I’m working on a college (mini) project tourism website for booking trips and showcasing monuments in India. There are some buttons on the index page which on clicking redirects the user to a different page which has boxes containing a monument image, it location and a book now button. I want to add “i” buttons to each monument box that appears when u hover over the box which when clicked, displays a popup with information related to that monument like history, culture, and tradition.
I have the monument information stored in a JSON file (monuments.json). I’m using HTML, CSS, and JavaScript for the frontend.
My question is: How can I achieve the click functionality for the “i” button to trigger the popup display with monument information fetched from the JSON file?
ill paste one of the files where i have to achieve tis functionality.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tourism Website
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.3.0/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="packages" id="packages">
<div class="box-container">
<div class="box">
<img src="images/north/agra fort.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Agra Fort</i></h3>
<p>Agra</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="price"> Rs. 45 <span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/baijnath.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Baijnath Temple</ i></h3>
<p>Himachal Pradesh</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/chittaurgarh.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Chittaurgarh Fort</i></h3>
<p>Chittorgarh</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/dhamek.jpeg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Dhamekh Stupa</i></h3>
<p>Sarnath</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/humayun.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Humayun's Tomb</i></h3>
<p>New Delhi</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/jageshwar.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Jageshwar Dham</i></h3>
<p>Uttarakhand</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/jantar.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Jantar Mantar</i></h3>
<p>New Delhi</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/kulbhalgarh.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Kumbhalgarh Fort</i></h3>
<p>Kumbhalgarh</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/leh palace.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Leh Palace</i></h3>
<p>Leh</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/qutub minar.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Qutub Minar</i></h3>
<p>New Delhi</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/ranthambore.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Ranthambore Fort</i></h3>
<p>Ranthambore</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> Rs. 0 (Free Entry)</div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/red fort.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Red Fort</i></h3>
<p>New Delhi</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/sikri.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Fatehpur Sikri</i></h3>
<p>Fatehpur Sikri</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
<div class="box">
<img src="images/north/taj mahal.jpg" alt="">
<div class="content">
<h3><i class="fas fa-map-marker-alt"> Taj Mahal</i></h3>
<p>Agra</p>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="price"> Rs. 35<span> per adult</span></div>
<a href="#book" class="btn">book now</a>
</div>
</div>
</div>
</section>
</body>
</html>