Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding a change/edit button #340

Merged
merged 3 commits into from
Jun 27, 2024
Merged

Adding a change/edit button #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ae434ad
Added edit button
thevijayshankersharma Jun 26, 2024
05338b2
hide the edit button
thevijayshankersharma Jun 27, 2024
aa36288
resolved conflicts
thevijayshankersharma Jun 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
27 changes: 27 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
40 changes: 38 additions & 2 deletions js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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
Expand Down Expand Up @@ -48,6 +83,7 @@ document.addEventListener('DOMContentLoaded', () => {

submitButton.addEventListener('click', () => {
console.log("Submit button clicked");
editBtn.style.display = 'inline-block';
run()
});

Expand Down
Loading