added a input field in project 'Simple Timer' Which Will Ask User To Add Timer According To Thier Need

pull/227/head
Aquib 7 months ago
parent 8109aaff3f
commit 1aaaf56c48

@ -37,6 +37,11 @@
></span>
</div>
</div>
<div class="flex justify-center gap-2 my-4">
<input type="number" id="customMinutes" placeholder="Min" class="w-14 p-2 text-center rounded">
<input type="number" id="customSeconds" placeholder="Sec" class="w-14 p-2 text-center rounded">
<button id="setTime" class="bg-blue-400 p-2 rounded">Set</button>
</div>
<div class="flex justify-center gap-6">
<button

@ -2,15 +2,32 @@ const resetBtn = document.querySelector('#reset');
const playBtn = document.querySelector('#play');
const timerEl = document.querySelector('#timer');
const root = document.querySelector(':root');
const customMinutesInput = document.querySelector('#customMinutes');
const customSecondsInput = document.querySelector('#customSeconds');
const setTimeBtn = document.querySelector('#setTime');
// Initial setup
const totalSeconds = 60;
let totalSeconds = 60;
let playing = false;
let currentSeconds = totalSeconds;
timerEl.innerText = formatTime(totalSeconds);
const timerInterval = setInterval(run, 1000);
setTimeBtn.addEventListener('click', () => {
let min = parseInt(customMinutesInput.value) || 0;
let sec = parseInt(customSecondsInput.value) || 0;
let newTime = min * 60 + sec;
if (newTime > 0) {
totalSeconds = newTime;
currentSeconds = newTime;
timerEl.innerText = formatTime(newTime);
customMinutesInput.value = "";
customSecondsInput.value = "";
}
});
playBtn.addEventListener('click', () => {
playing = !playing;
playBtn.classList.toggle('play');

Loading…
Cancel
Save