Here’s a simple countdown timer app built with HTML, CSS, and JavaScript. You can easily run this in any modern browser. It lets you set the time, start, pause, and reset the countdown.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Countdown Timer</title>
<style>
body {
font-family: Arial, sans-serif;
background: #222;
color: #fff;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
}
.timer {
font-size: 5rem;
margin-bottom: 20px;
letter-spacing: 0.1em;
}
.controls {
display: flex;
gap: 10px;
}
input[type="number"] {
width: 60px;
padding: 5px;
font-size: 1.2rem;
text-align: center;
border-radius: 5px;
border: none;
outline: none;
}
button {
background: #0b84ff;
border: none;
padding: 10px 20px;
font-size: 1.2rem;
color: white;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #076ecf;
}
button:disabled {
background: #444;
cursor: default;
}
</style>
</head>
<body>
<div class="timer" id="timerDisplay">00:00:00</div>
<div class="inputs">
<input type="number" id="hours" min="0" max="99" placeholder="HH" />
<input type="number" id="minutes" min="0" max="59" placeholder="MM" />
<input type="number" id="seconds" min="0" max="59" placeholder="SS" />
</div>
<div class="controls" style="margin-top: 20px;">
<button id="startBtn">Start</button>
<button id="pauseBtn" disabled>Pause</button>
<button id="resetBtn" disabled>Reset</button>
</div>
<script>
const timerDisplay = document.getElementById('timerDisplay');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
const hoursInput = document.getElementById('hours');
const minutesInput = document.getElementById('minutes');
const secondsInput = document.getElementById('seconds');
let totalSeconds = 0;
let interval = null;
let isPaused = false;
function formatTime(seconds) {
const hrs = Math.floor(seconds / 3600);
const mins = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;
return [
hrs.toString().padStart(2, '0'),
mins.toString().padStart(2, '0'),
secs.toString().padStart(2, '0')
].join(':');
}
function updateDisplay() {
timerDisplay.textContent = formatTime(totalSeconds);
}
function startTimer() {
if (totalSeconds <= 0) return;
startBtn.disabled = true;
pauseBtn.disabled = false;
resetBtn.disabled = false;
hoursInput.disabled = true;
minutesInput.disabled = true;
secondsInput.disabled = true;
if (!isPaused) {
// Initialize totalSeconds from inputs if starting fresh
totalSeconds =
(parseInt(hoursInput.value) || 0) * 3600 +
(parseInt(minutesInput.value) || 0) * 60 +
(parseInt(secondsInput.value) || 0);
updateDisplay();
}
isPaused = false;
interval = setInterval(() => {
if (totalSeconds > 0) {
totalSeconds--;
updateDisplay();
} else {
clearInterval(interval);
startBtn.disabled = false;
pauseBtn.disabled = true;
resetBtn.disabled = false;
hoursInput.disabled = false;
minutesInput.disabled = false;
secondsInput.disabled = false;
alert("Time's up!");
}
}, 1000);
}
function pauseTimer() {
clearInterval(interval);
isPaused = true;
startBtn.disabled = false;
pauseBtn.disabled = true;
}
function resetTimer() {
clearInterval(interval);
totalSeconds = 0;
updateDisplay();
isPaused = false;
startBtn.disabled = false;
pauseBtn.disabled = true;
resetBtn.disabled = true;
hoursInput.disabled = false;
minutesInput.disabled = false;
secondsInput.disabled = false;
hoursInput.value = '';
minutesInput.value = '';
secondsInput.value = '';
}
startBtn.addEventListener('click', () => {
// Validate input
const h = parseInt(hoursInput.value) || 0;
const m = parseInt(minutesInput.value) || 0;
const s = parseInt(secondsInput.value) || 0;
if (h < 0 || h > 99 || m < 0 || m > 59 || s < 0 || s > 59) {
alert('Please enter valid time values.');
return;
}
if (h === 0 && m === 0 && s === 0) {
alert('Please enter a time greater than zero.');
return;
}
startTimer();
});
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);
updateDisplay();
</script>
</body>
</html>
Open this in a browser, set your countdown time, and control it with start, pause, and reset buttons. Let me know if you want it extended with more features!
Share this Page your favorite way: Click any app below to share.