This JavaScript Countdown Timer Minutes Seconds code allows users to set a countdown countdown timer By inputting the desired time and format, users can initiate the countdown. It displays the remaining time in hours, minutes, and seconds. This functionality helps users track time for various activities efficiently.
You can use this countdown timer code on websites for events, promotions, or product launches to create a sense of urgency. It enhances user engagement by visually indicating the time remaining, and encouraging action. Additionally, it’s customizable and easy to integrate into any web project, enhancing functionality and user experience.
How to Create JavaScript Countdown Timer Minutes Seconds
1. Start by creating an HTML file and setting up the basic structure. Copy the provided HTML code into your file. This code includes the necessary elements for the countdown timer, such as input fields and buttons.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<title>CountDown Timer</title>
</head>
<body>
<div class="container">
<!-- form -->
<form class="form">
<!-- countdown time input field -->
<input type="number" min="1" class="time-input" placeholder="Enter Countdown">
<!-- options -->
<select name="format">
<option value="hours">Hours</option>
<option value="minutes">Minutes</option>
<option value="seconds">Seconds</option>
</select>
<!-- submit button or set button -->
<button type="submit" class="set-btn">SET</button>
</form>
<!-- countdown text -->
<p class="countdown">00 : 00 : 00</p>
<!-- buttons -->
<div class="buttons">
<button class="stop-btn" disabled>STOP</button>
<button class="reset-btn" disabled>RESET</button>
</div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
2. Ensure you have the CSS and JavaScript files linked correctly in your HTML code. The CSS file contains styles for the timer and buttons, while the JavaScript file contains the functionality to make the timer work.
/* Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/* common styles */
* {
padding: 0;
margin: 0;
font-size: 1rem;
font-family: 'Roboto', sans-serif;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
text-align: center;
color: #00ff44;
}
button {
padding: 7px 15px;
border: none;
outline: none;
border-radius: 4px;
}
button:hover {
cursor: pointer;
background-color: #ffff00;
}
/* common styles end */
/* form */
.form {
margin: 90px 0px 20px 0px;
}
.time-input {
padding: 10px 7px;
border: none;
outline: none;
border-radius: 4px;
}
select[name='format'] {
padding: 10px;
border: none;
outline: none;
border-radius: 4px;
margin: 0px 10px;
background-color: #00ff44;
}
.set-btn {
background-color: #00ff44;
}
/* form styles end */
/* countdown */
.countdown {
font-size: 6.5rem;
margin-top: 20px;
}
/* countdown styles end */
/* buttons */
.stop-btn {
padding: 10px 20px;
background-color: #ff6344;
}
.reset-btn {
margin-top: 10px;
padding: 10px 20px;
background-color: rgb(0, 174, 255);
}
/* buttons styles end */
3. Now, let’s add the JavaScript code to make the countdown timer functional. Copy and paste the provided JavaScript code into a new file named “script.js” and save it in a folder named “js” within your project directory.
/* grab necessary elements */
// grab the .form
const form = document.querySelector('.form');
// grab the .time-input
const timeInput = document.querySelector('.time-input');
// grab the select[name='format']
const format = document.querySelector("select[name='format']");
// grab the .set-btn
const setBtn = document.querySelector('.set-btn');
// grab the .countdown
const countDown = document.querySelector('.countdown');
// grab the .stop-btn
const stopBtn = document.querySelector('.stop-btn');
// grab the .reset-btn
const resetBtn = document.querySelector('.reset-btn');
/* grab necessary elements ends */
/* global variables and constants*/
// variable to store setInterval
let countDownInterval;
// secondsLeft in millisecond
let secondsLeftms;
// end time
let endTime;
// .stop-btn clicked or not
let stopBtnClicked = false;
/* global variables ends */
/* .stop-btn click listener */
stopBtn.addEventListener('click', () => {
// toggle the value of 'stopBtnClicked'
stopBtnClicked = !stopBtnClicked;
// if STOP button is clicked
if (stopBtnClicked === true) {
// change the text to 'PLAY'
stopBtn.innerHTML = 'PLAY';
// enable the .reset-btn
resetBtn.disabled = false;
// clear the setInterval() inorder to freeze the countdown timer
clearInterval(countDownInterval);
} else if (stopBtnClicked === false) {
// if PLAY button is clicked
// then change text to 'STOP'
stopBtn.innerHTML = 'STOP';
// disable the .reset-btn
resetBtn.disabled = true;
// then update endTime
endTime = secondsLeftms + Date.now();
// set a new setInterval()
countDownInterval = setInterval(() => {
setCountDown(endTime);
}, 1000);
}
});
/* .stop-btn click listener ends */
/* .reset-btn click listener */
resetBtn.addEventListener('click', () => {
resetCountDown();
});
/* .reset-btn click listener ends */
/* .form submit listener */
form.addEventListener('submit', (event) => {
// prevent the default page reloading
event.preventDefault();
// get the countdown time user typed
let countDownTime = timeInput.value;
// check if it is not zero
if (countDownTime > 0) {
// check which is the format, ie the <select> element's value
if (format.value === 'hours') {
// convert hours to milliseconds
// 1 hrs = 3600000 ms (5 zeros)
countDownTime = countDownTime * 3600000;
} else if (format.value === 'minutes') {
// 1 minute = 60000 ms (4 zeros)
countDownTime = countDownTime * 60000;
} else if (format.value === 'seconds') {
// 1 seconds = 1000 ms (3 zeros)
countDownTime = countDownTime * 1000;
}
// get current time in milliseconds
const now = Date.now();
// calculate the ending time
endTime = now + countDownTime;
// activate the countdown at first
setCountDown(endTime);
countDownInterval = setInterval(() => {
setCountDown(endTime);
}, 1000);
// then disable the .set-btn
setBtn.disabled = true;
// then enable the .stop-btn
stopBtn.disabled = false;
}
});
/* .form submit listener ends */
/* setCountDown function */
const setCountDown = (endTime) => {
// calculate how many milliseconds is left to reach endTime from now
secondsLeftms = endTime - Date.now();
// convert it to seconds
const secondsLeft = Math.round(secondsLeftms / 1000);
// calculate the hours, minutes and seconds
let hours = Math.floor(secondsLeft / 3600);
let minutes = Math.floor(secondsLeft / 60) - (hours * 60);
let seconds = secondsLeft % 60;
// adding an extra zero infront of digits if it is < 10
if (hours < 10) {
hours = `0${hours}`;
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
if (seconds < 10) {
seconds = `0${seconds}`;
}
// stopping the timer if the time is up
if (secondsLeft < 0) {
resetCountDown();
return;
}
// set the .countdown text
countDown.innerHTML = `${hours} : ${minutes} : ${seconds}`;
};
/* setCountDown function ends */
/* resetCountDown function */
const resetCountDown = () => {
// destroy the setInterval()
clearInterval(countDownInterval);
// reset the countdown text
countDown.innerHTML = '00 : 00 : 00';
// set stopBtnClicked = false
stopBtnClicked = false;
// change inner text to STOP
stopBtn.innerHTML = 'STOP';
// enable .set-btn
setBtn.disabled = false;
// disable .stop-btn and .reset-btn
stopBtn.disabled = true;
resetBtn.disabled = true;
};
/* resetCountDown function ends */
Congratulations! You’ve successfully implemented a JavaScript countdown timer on your website. Enjoy using it to create excitement and drive action among your website visitors
