Welcome to our step-by-step tutorial on creating a JavaScript countdown timer. In this guide, we’ll show you how to build a dynamic countdown timer using HTML, CSS, and JavaScript. This project is perfect for beginners looking to enhance their web development skills.
Why Use a Countdown Timer?
Countdown timers are essential tools for creating urgency and excitement for events, sales, or deadlines on your website. They help improve user engagement and drive conversions by clearly displaying the time remaining for a specific event.
Project Folder Structure:
Before we start coding, let’s create the project folder structure.
- Create a project folder named “Countdown”.
- Inside the folder, add three files:
index.html,style.css, andscript.js. - Include an “img” folder for images within the project structure.
Step 1: Create the HTML Structure
Start by setting up the basic HTML structure. Create a countdown div to hold the timer and individual elements for days, hours, minutes, and seconds.
<!-- Code by Get Code Snippets - https://getcodesnippets.com/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CountDown</title>
<!-- Google Fonts for font family -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
rel="stylesheet">
<!-- Bootstrap for container-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<!-- Project CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="container">
<div class="countdown" id="countdown">
<div class="digits-wrap">
<div class="digits-box">
<div class="digit" id="dayTen"></div>
<div class="digit" id="dayUnit"></div>
</div>
<span>DAYS</span>
</div>
<div class="digits-wrap">
<div class="digits-box">
<div class="digit" id="hourTen"></div>
<div class="digit" id="hourUnit"></div>
</div>
<span>HOURS</span>
</div>
<div class="digits-wrap">
<div class="digits-box">
<div class="digit" id="minuteTen"></div>
<div class="digit" id="minuteUnit"></div>
</div>
<span>MINUTES</span>
</div>
<div class="digits-wrap">
<div class="digits-box">
<div class="digit" id="secondTen"></div>
<div class="digit" id="secondUnit"></div>
</div>
<span>SECONDS</span>
</div>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
Step 2: Style the Timer with CSS
Next, add some basic styling to make the countdown timer visually appealing. You can customize the styles to fit your design needs.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
}
body {
overflow: hidden;
}
main {
position: relative;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 100% 80%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
main::before {
position: absolute;
content: "";
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
}
.countdown {
position: relative;
background: linear-gradient(360deg, #000 10%, #1a1a1a);
border: 1px solid rgb(238 238 238 / 20%);
width: fit-content;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
padding: 2rem;
border-radius: 1rem;
text-align: center;
gap: 1.5rem;
}
.countdown .digits-wrap span {
display: block;
color: #fff;
font-size: 1.125rem;
margin: 10px 0 0;
}
.digits-box {
position: relative;
display: flex;
gap: 0.2rem;
}
.digits-box::before {
position: absolute;
content: "";
width: 100%;
height: 0.2rem;
background: #222;
top: 0;
bottom: 0;
margin: auto;
z-index: 9;
}
.countdown .digits-box .digit {
position: relative;
background: linear-gradient(360deg, #1a1a1a 0%, #0d0d0d);
min-width: 65px;
min-height: 80px;
color: #fff;
font-size: 3.75rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
outline: 1px solid rgb(238 238 238 / 20%);
outline-offset: -4px;
border-radius: 0.6rem;
}
.digit::before {
position: absolute;
content: "";
background: linear-gradient(to right, #010000 0, #ccc 33%, #010000 100%);
width: 4px;
height: 10px;
border: 1px solid #42423b;
left: 0;
top: 0;
bottom: 0;
margin: auto;
border-left: 0;
z-index: 99;
}
.digit::after {
position: absolute;
content: "";
background: linear-gradient(to right, #010000 0, #ccc 33%, #010000 100%);
width: 4px;
height: 10px;
border: 1px solid #42423b;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border-right: 0;
z-index: 99;
}
Step 3: Add Functionality with JavaScript
Now, let’s write the JavaScript to make the countdown timer work. Set the future date and calculate the remaining time by minus (-) from today’s date, updating the timer every second.
const futureDate = new Date(2024, 6, 23, 0, 0, 0); // setting the future date to May 21, 2024 at 00:00:00 Mid Night
const futureTime = futureDate.getTime();
function getRemainingTime() {
const today = new Date().getTime();
const timeDiff = futureTime - today;
// Calculate remaining days, hours, minutes and seconds
const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
// Update the digit divs with the countdown values
document.getElementById("dayTen").textContent = Math.floor(days / 10);
document.getElementById("dayUnit").textContent = days % 10;
document.getElementById("hourTen").textContent = Math.floor(hours / 10);
document.getElementById("hourUnit").textContent = hours % 10;
document.getElementById("minuteTen").textContent = Math.floor(minutes / 10);
document.getElementById("minuteUnit").textContent = minutes % 10;
document.getElementById("secondTen").textContent = Math.floor(seconds / 10);
document.getElementById("secondUnit").textContent = seconds % 10;
//If tme difference is less than or euqal to zero, display expired message
if (timeDiff <= 0) {
document.getElementById("countdown").textContent = "Offer Expired!";
clearInterval(intervalID);
return;
}
}
// Initial call to update time
getRemainingTime();
// Set interval to update time every second
const intervalID = setInterval(getRemainingTime, 1000);
Conclusion
By following these steps, you’ve created a functional and stylish countdown timer using HTML, CSS, and JavaScript. This timer can be customized further to fit any website’s design and purpose. Use it to enhance your web projects and engage your audience effectively.
Feel free to modify the code to suit your specific requirements and enhance the user experience on your website!
Happy coding!