Hello Coders, In this article we are going to learn how to create a new year countdown timer using javascript. Follow the below steps to build this beginner javascript project completely. Below I have provided both video tutorial as well as the complete source code of the project.
Create a New Year CountDown Timer Using JavaScript | Video Tutorial
Build a New Year Countdown Timer using HTML, CSS and JavaScript | Source Code
Lets start by creating three files that are required for this project: index.html, styles.css, script.js
Step 1: Setting up the basic HTML
For the html we will need only one div and inside that we will create four more divs to hold days, hours, minutes, seconds respectively. Refer the code below.
<!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>6 New Year Countdown</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>New Year Countdown</h1>
<div id="countdown">
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Adding JavaScript
First we will get reference to all the DOM elements and store them in these variables: daysContainer, hoursContainer, minutesContainer, secondsContainer.
Next create a function called updateCountdown. Inside this function first we need to set newYear to the next new year. Now get the currentTime and find the difference between the newYear and the currentTime.
Now using this diff, we will calculate the number of days, hours, minutes and seconds left for the next year. Now finally we will show them inside the containers which we created. One thing you need to note is that we need to call this function updateCountdown every second. So, we will use setInterval.
var daysContainer = document.querySelector("#days")
var hoursContainer = document.querySelector("#hours")
var minutesContainer = document.querySelector("#minutes")
var secondsContainer = document.querySelector("#seconds")
function updateCountdown() {
var newYear = new Date("January 1, 2024 00:00:00")
var currentTime = new Date()
var diff = newYear - currentTime
var days = Math.floor(diff / (1000 * 60 * 60 * 24))
var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
var seconds = Math.floor((diff % (1000 * 60)) / 1000)
daysContainer.innerHTML = days + "<span> Days</span>"
hoursContainer.innerHTML = hours + "<span> Hours</span>"
minutesContainer.innerHTML = minutes + "<span> Minutes</span>"
secondsContainer.innerHTML = seconds + "<span> Seconds</span>"
}
setInterval(updateCountdown, 1000)
Step 3: Adding CSS
Now for styling, you can add your own styles or else you can copy my basic styles from below.
body {
background-color: #ebebeb;
max-width: 900px;
margin: 3rem auto;
text-align: center;
}
#countdown {
font-size: 2.5rem;
font-weight: bold;
background-color: #fff;
padding: 3rem;
border-radius: 1rem;
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
#countdown div {
display: inline-block;
margin: 0 0.5rem;
}
#countdown div span {
color: purple;
}
Alright! Congrats on building this project. Now don’t forget to share this with others and also do check our other javascript project tutorials on this website. Thank You
