Hey, I am Ajink, and today in this blog, we’re going to develop a countdown timer with customizable features using HTML, CSS, and JavaScript. A countdown timer is a useful tool for various applications, and with customization options, you can tailor it to fit your specific needs.
HTML Code: create a index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Customizable Countdown Timer</title>
</head>
<body>
<div class="countdown-container">
<div class="countdown">
<div class="countdown-input">
<label for="hours">Hours:</label>
<input type="number" id="hours" value="0" min="0">
<label for="minutes">Minutes:</label>
<input type="number" id="minutes" value="5" min="0" max="59">
<label for="seconds">Seconds:</label>
<input type="number" id="seconds" value="0" min="0" max="59">
<button onclick="startCountdown()">Start Countdown</button>
</div>
<div class="countdown-display" id="countdown-display">00:05:00</div>
</div>
</div>
<script defer src="script.js"></script>
</body>
</html>
HTML Code Explanation:
- We have a basic HTML structure with a container div, a countdown div containing input fields for hours, minutes, and seconds, and a button to start the countdown.
- The display div (
countdown-display) shows the current countdown time.
CSS Code:
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.countdown-container {
text-align: center;
}
.countdown {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 20px;
}
.countdown-input {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
}
.countdown-input label {
margin: 0 10px;
}
.countdown-input input {
width: 50px;
padding: 5px;
margin: 0 5px;
text-align: center;
}
.countdown-input button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.countdown-display {
font-size: 2em;
color: #333;
}
CSS Code Explanation:
- The CSS provides styling for the countdown timer, including colors, shadows, and spacing.
JavaScript Code:
let countdownInterval;
let countdownTime = 300; // Initial time in seconds (5 minutes)
function startCountdown() {
const hours = parseInt(document.getElementById('hours').value) || 0;
const minutes = parseInt(document.getElementById('minutes').value) || 0;
const seconds = parseInt(document.getElementById('seconds').value) || 0;
countdownTime = hours * 3600 + minutes * 60 + seconds;
updateCountdownDisplay();
countdownInterval = setInterval(function () {
countdownTime--;
if (countdownTime <= 0) {
clearInterval(countdownInterval);
alert('Countdown finished!');
} else {
updateCountdownDisplay();
}
}, 1000);
}
function updateCountdownDisplay() {
const hours = Math.floor(countdownTime / 3600);
const minutes = Math.floor((countdownTime % 3600) / 60);
const seconds = countdownTime % 60;
const formattedTime = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}`;
document.getElementById('countdown-display').innerText = formattedTime;
}
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}
JavaScript Code Explanation:
- The JavaScript code includes functions to start the countdown, update the display, and format the time.
- The countdown is updated every second, and when it reaches zero, an alert is shown.
Conclusion:
In this blog, we successfully developed a customizable countdown timer using HTML, CSS, and JavaScript. You can adjust the hours, minutes, and seconds and start the countdown accordingly. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.
Thanks for reading, and if you have any doubts, feel free to comment!
