Description:
A user-friendly countdown timer tool that lets you effortlessly set a timer duration in seconds, start and stop the countdown, and visually track the remaining time. Perfect for time management and productivity tasks.
[Countdown Timer] with HTML, CSS, and JavaScript. Include features such as input for setting the timer duration, start/stop controls, and visual countdown display.
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Countdown Timer</title> <style> body { font-family: 'Arial', sans-serif; text-align: center; margin: 20px; } #timer { font-size: 2em; margin-bottom: 20px; } input, button { font-size: 1em; margin: 5px; } </style> </head> <body> <div> <label for="duration">Set Timer (seconds):</label> <input type="number" id="duration" min="1" value="60"> <button onclick="startTimer()">Start</button> <button onclick="stopTimer()">Stop</button> </div> <div id="timer">00:00</div> <script> let countdown; let timerDisplay = document.getElementById('timer'); let durationInput = document.getElementById('duration'); let startButton = document.querySelector('button'); function startTimer() { let seconds = parseInt(durationInput.value); if (isNaN(seconds) || seconds <= 0) { alert('Please enter a valid positive number for the duration.'); return; } startButton.setAttribute('disabled', true); countdown = setInterval(function () { displayTimeLeft(seconds); if (seconds <= 0) { clearInterval(countdown); startButton.removeAttribute('disabled'); } seconds--; }, 1000); } function stopTimer() { clearInterval(countdown); startButton.removeAttribute('disabled'); displayTimeLeft(0); } function displayTimeLeft(seconds) { const minutes = Math.floor(seconds / 60); const remainingSeconds = seconds % 60; const display = `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`; timerDisplay.textContent = display; } </script> </body> </html>
No comments:
Post a Comment