Merge pull request #340 from thevijayshankersharma/edit-button

Adding a change/edit button
sk66641 · Jun 27, 2024 · 2c55250 · 2c55250
2 parents 1427a21 + aa36288
commit 2c55250
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -2465,3 +2465,34 @@ button:active {
     transform: scale(1);
   }
 }
+
+#editBtn {
+  display: none;
+}
+
+/* Example CSS for the edit popup */
+.edit-popup {
+  display: none; /* Hide popup by default */
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+#addTimeOption{
+  color: black ;
+}
+
+.edit-popup.show-edit-popup {
+  display: block; /* Show popup when class is applied */
+}
+
+.edit-popup-content {
+  max-width: 400px;
+  margin: auto;
+  text-align: center;
+}
diff --git a/index.html b/index.html
@@ -31,6 +31,7 @@
   <div class="navHeader">
     <div class="header-content">
       <nav>
+
         <button id="muteBtn" class="mute-btn" style="display: none;">
           <i id="muteIcon" class="fas fa-volume-up"></i>
         </button>
@@ -41,6 +42,32 @@
           <li><a href="#" id="addTime" aria-label="Add Time" style="display: none;">Add Time</a></li>
           <li><a href="#" id="pauseStartBtn" style="display: none;" aria-label="Pause/Start">Pause</a></li>
           <li><a href="#" id="fullscreenBtn" aria-label="Toggle Fullscreen">Fullscreen</a></li>
+          <li><a href="#" id="editBtn" aria-label="Edit">Edit</a></li>
+          <!-- Add this inside your existing HTML structure, preferably at the end of <body> -->
+        <div id="editPopup" class="edit-popup">
+          <div class="edit-popup-content">
+              <h2>Edit Options</h2>
+              <ul>
+                  <li><a href="#" id="addTimeOption">Add Time</a></li>
+                  <li><a href="#"</a>
+                    <select id="musicDropdown" style="display: none;">
+                      <option value="select" disabled selected>Change Music</option>
+                      <option value="none">None</option>
+                      <option value="disco">Disco</option>
+                      <option value="fairies">Fairies</option>
+                      <option value="funky">Funky</option>
+                      <option value="upbeatdisco">upbeatdisco</option>
+                      <option value="vintage">Vintage</option>
+                      <option value="whistle">Whistle</option>
+                      <option value="snare">Snare</option>
+                    </select>
+                  </a>
+                  </li>
+                  <!-- Add more options as needed -->
+              </ul>
+              <button id="closeEditPopup">Close</button>
+          </div>
+      </div>
           <li><a href="pages/about.html">About</a></li>
           <li><a href="pages/features.html">Features</a></li>
           <li><a href="./Login/index1.html">Step In</a></li>

diff --git a/js/script.js b/js/script.js
@@ -6,8 +6,11 @@ document.addEventListener('DOMContentLoaded', () => {
     const musicSelect = document.getElementById('musicSelect');
     const addTimeButton = document.getElementById('addTime');
     const muteButton = document.getElementById('muteBtn'); // Get reference to mute button
-
-
+    const editBtn = document.getElementById('editBtn');
+    const editPopup = document.getElementById('editPopup');
+    const closeEditPopup = document.getElementById('closeEditPopup');
+    const addTimeOption = document.getElementById('addTimeOption');
+    const changeSongOption = document.getElementById('changeSongOption');
 
     // Create and append the pause/start button
     const pauseStartButton = document.getElementById('pauseStartBtn');
@@ -18,6 +21,38 @@ document.addEventListener('DOMContentLoaded', () => {
     let countdownValue;
     let lightInterval;
     let isMuted = false;
+
+    // Function to toggle edit popup visibility
+    function toggleEditPopup() {
+        editPopup.classList.toggle('show-edit-popup');
+    }
+
+    // Event listener for edit button to show popup
+    editBtn.addEventListener('click', function(event) {
+        event.preventDefault(); // Prevent default behavior of anchor tag
+        toggleEditPopup(); // Show edit popup
+    });
+
+    // Event listener to close edit popup
+    closeEditPopup.addEventListener('click', function(event) {
+        event.preventDefault();
+        toggleEditPopup(); // Close edit popup
+    });
+
+    // Example: Function to handle add time option
+    addTimeOption.addEventListener('click', () => {
+        // used instantly invoked function expression
+        (function get_time() {
+            const add_time = Number(prompt('Enter a positive number to increase the time & negative to decrease it (in "Seconds")'));
+            if (isNaN(add_time)) {
+                alert('Please enter a valid number!')
+                get_time();
+            } else {
+                addTime(add_time);
+            }
+        })()
+    });
+
     // Event Listener for Add Time Button
     addTimeButton.addEventListener('click', () => {
         // used instantly invoked function expression
@@ -48,6 +83,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     submitButton.addEventListener('click', () => {
         console.log("Submit button clicked");
+        editBtn.style.display = 'inline-block';
         run()
     });