In this tutorial, we will learn how to create a simple Countdown Timer JavaScript project.
We will create a Countdown Timer JavaScript project which will start countdown up to 31st Dec of 2020.
1. index.html
Let's create index.html and add the following code to it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Countdown Timer</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<h1>End of Year 2020</h1>
<div class="countdown-container">
<div class="countdown-el days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdown-el hours-c">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="countdown-el mins-c">
<p class="big-text" id="mins">0</p>
<span>mins</span>
</div>
<div class="countdown-el seconds-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
</body>
</html>
2. script.js
Let's create JavaScript file named script.js and add following JavaScript code to it:
const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("mins");
const secondsEl = document.getElementById("seconds");
const newYears = "31 Dec 2020";
function countdown() {
const newYearsDate = new Date(newYears);
const currentDate = new Date();
const totalSeconds = (newYearsDate - currentDate) / 1000;
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600) % 24;
const mins = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = formatTime(hours);
minsEl.innerHTML = formatTime(mins);
secondsEl.innerHTML = formatTime(seconds);
}
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}
// initial call
countdown();
setInterval(countdown, 1000);
style.css
Let's create CSS file named style.css and add the following CSS code to it:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background-size: cover;
background-position: center center;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
font-family: "Poppins", sans-serif;
margin: 0;
}
h1 {
font-weight: normal;
font-size: 4rem;
margin-top: 5rem;
}
.countdown-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.big-text {
font-weight: bold;
font-size: 6rem;
line-height: 1;
margin: 1rem 2rem;
}
.countdown-el {
text-align: center;
}
.countdown-el span {
font-size: 1.3rem;
}
Run index.html in Browser
Let's open the index.html file in browser and you will be able see following screen:
More Free JavaScript Projects with Source Code
- JavaScript Tic Tac Toe Game
- JavaScript Project - Modal Box
- JavaScript Project - Modal Box
- JavaScript Project - Password Generator
- JavaScript Project - Weather App
- JavaScript Project - Todo App
- JavaScript Project - Notes App
- JavaScript Project - Movie App
- JavaScript Project - Drawing App
- JavaScript Project - Countdown Timer
- Breakout Game with JavaScript, HTML, and CSS
- Exchange Rate Project with JavaScript, HTML, and CSS
- Expense Tracker Project with JavaScript, HTML, and CSS
- Form Validator with JavaScript, HTML, and CSS
- LyricsSearch App with JavaScript, HTML and CSS
- Movie Seat Booking Project with JavaScript, HTML, and CSS
Comments
Post a Comment