Updated required changes

Virtual4087 · Oct 22, 2023 · 33b050e · 33b050e
1 parent 80272b7
commit 33b050e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -809,13 +809,13 @@ nav .nav_buttons {
   z-index: 1;
 }
 
-#popup {
+.popup {
   position: fixed;
   z-index: 2;
   top: 50%;
   left: 50%;
-  height: 160px;
-  width: 300px;
+  height: 192px;
+  width: 350px;
   transform: translate(-50%, -50%);
   background-color: #fffd;
   border: 1px solid #ccc;
@@ -826,11 +826,11 @@ nav .nav_buttons {
 
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
 }
-#popup p {
+.popup p {
   margin: 20px auto;
   text-align: center;
 }
-#popup button {
+.popup button {
   --color_2: #111111;
   color: #111111;
   background: none;
@@ -848,12 +848,12 @@ nav .nav_buttons {
   position: relative;
   overflow: hidden;
 }
-#popup button:hover {
+.popup button:hover {
   transform: scale(1.1);
   color: white;
   background: black;
 }
-#closePopupButton {
+.closePopupButton {
   display: block;
   margin-top: 10px;
 }
diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@
       </div>
       <div id="nav-text" class="nav_buttons">
         <a href="#" class="nav_button">HOME</a>
-        <a href="#donates" class="nav_button">DONATE</a>
+        <a href="#donates" class="nav_button showPopupButton" data-popup-trigger="donate">DONATE</a>
         <a href="#goals" class="nav_button">ABOUT</a>
         <a href="#footer" class="nav_button">CONTACT US</a>
       </div>
@@ -56,7 +56,7 @@
       </div>
       <div class="page_buttons">
         <button class="one">VIEW PROGRESS</button>
-        <button class="two">PLANT A TREE</button>
+        <button class="two showPopupButton" data-popup-trigger="cover-page">PLANT A TREE</button>
       </div>
     </div>
   </div>
@@ -112,7 +112,7 @@
       livelihoods, and nurturing life.<br />
       Together, we can make a difference, one tree at a time.<br /><br /><span>~ Founder</span><br /><br />
     </div>
-    <button id="showPopupButton">JUST $1 PLANTS A TREE</button>
+    <button class="showPopupButton" data-popup-trigger="donate">JUST $1 PLANTS A TREE</button>
   </div>
 
     <!--Added margin to bottom--> 
@@ -232,22 +232,32 @@ <h2 class="quick-links">Quick Links</h2>
   </div>
   <div id="overlay" class="hidden"></div>
 
-  <div id="popup" class="hidden">
+  <div class="hidden popup">
     <div class="popup-content">
       <p>We haven't added this feature yet.</p>
-      <button id="closePopupButton">Close</button>
+      <button class="closePopupButton">Close</button>
     </div>
   </div>
 </body>
 <script>
-  const showPopupButton = document.getElementById("showPopupButton");
-  const closePopupButton = document.getElementById("closePopupButton");
-  const popup = document.getElementById("popup");
-  const overlay = document.getElementById("overlay");
-  showPopupButton.addEventListener("click", function() {
-    popup.style.display = "block";
-    overlay.style.display = "block";
-  });
+  const showPopupButtons = document.querySelectorAll(".showPopupButton");
+const closePopupButton = document.querySelector(".closePopupButton");
+const popup = document.querySelector(".popup");
+const overlay = document.getElementById("overlay");
+  // showPopupButton.addEventListener("click", function() {
+  //   popup.style.display = "block";
+  //   overlay.style.display = "block";
+  // });
+  showPopupButtons.forEach(button => {
+      button.addEventListener("click", function() {
+        // Determine which button was clicked and show the popup accordingly
+        const trigger = button.getAttribute("data-popup-trigger");
+        if (trigger === "donate" || trigger === "cover-page" || trigger === "navbar") {
+          popup.style.display = "block";
+          overlay.style.display = "block";
+        }
+      });
+    });
 
   closePopupButton.addEventListener("click", function() {
     popup.style.display = "none";