In this project, we’re going to build a practical new year countdown using HTML, CSS, and JavaScript. You’ll see how to calculate the remaining time and update the countdown automatically. Along the way, you’ll practice setTimeout, DOM selection, DOM content updates, so you can understand how the interface and JavaScript logic work together.
Create these three files, copy the code into each one, then open index.html with Live Server.
new-year-countdown/ ├── index.html ├── style.css └── index.js
<!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>New Year Countdown</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>Countdown to New Year</h2>
<div class="year">2024</div>
<div class="countdown">
<div id="day">00</div>
<div id="hour">00</div>
<div id="minute">00</div>
<div id="second">00</div>
</div>
<script src="index.js"></script>
</body>
</html>
Continue your learning journey with these handpicked projects that share similar concepts and technologies
In this project, we’re going to build a practical temperature converter using HTML, CSS, and JavaScript. You’ll see how to convert a value and keep the result easy to understand. Along the way, you’ll practice DOM selection, input values, number formatting, so you can understand how the interface and JavaScript logic work together.
View project
In this project, we’re going to build a practical recipe book app using HTML, CSS, and JavaScript. You’ll see how to fetch recipe data and create useful recipe cards from the response. Along the way, you’ll practice API requests, async and await, DOM selection, so you can understand how the interface and JavaScript logic work together.
View project
In this project, we’re going to build a practical weight converter using HTML, CSS, and JavaScript. You’ll see how to convert a value and keep the result easy to understand. Along the way, you’ll practice setTimeout, input events, DOM selection, so you can understand how the interface and JavaScript logic work together.
View project