Introduction
Countdown timers have been around since the early twentieth
The development of digital electronics in the 1950s resulted in the development of electronic countdown timers. These have been used in a wide range of applications, including scientific experiments, space missions, and sporting events.
Digital timers became more widely available in the 1970s and were used in consumer products such as microwave ovens and alarm clocks.
Countdown timers have become increasingly popular in the digital realm in recent years, appearing in online games, apps, and websites. Countdown timers are now widely used in a wide range of applications, from cooking and fitness to business and education.Countdown timers have been around since the early 1900s. Countdown timers were first used in aviation, where pilots used them to time flights and monitor fuel consumption.In this article i we will be creating a simple yearly count down timer with html, css, and javascript
What is a Count Down Timer
A countdown timer is a tool that displays the amount of time until a specific event or deadline. It is commonly used to help keep track of time to avoid missing a significant event or deadline. Countdown timers are found in various contexts, such as sporting events, concerts, and online meetings. They are viewable on smartphones, computers, and dedicated digital clocks. Countdown timers can help people stay on track and manage their time more effectively.
Prerequsite
Before getting started with this tutorial, you need to have basic knowledge of the following:
Html
CSS
Javascript
Developing the Frontend
creating our frontend with just html and css. copy and paste the following.
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<h1>New Year Eve</h1>
<div class="container">
<div class="count-hours">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="count-hours">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="count-hours">
<p class="big-text" id="mins">0</p>
<span>mins</span>
</div>
<div class="count-hours">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Adding style to our html design
*{
box-sizing: border-box;
}
body{
background-size: cover;
background-position: center, center;
min-height: 100vh;
font-family: "poppins" sans-serif;
margin: 0;
display: flex;
flex-direction: column;
background-image: url(time.jpg);
align-items: center;
justify-content: center;
}
.container{
display: flex;
}
h1{
color:white;
font-size: 5rem;
padding-top:20px ;
}
.count-hours{
}
span{
color: white;
padding-left:40px;
}
.big-text{
color: azure;
font-size: 70px;
padding: 10px;
margin: 0 2rem;
}
Now that we are done with our frontend design, let's head straight to adding functionality to our work.
const day = document.querySelector("#days");
const hour = document.querySelector("#hours");
const min = document.querySelector("#mins");
const sec = document.querySelector("#seconds");
const newYear = "1 jan 2024";
function countDown() {
const newYearDate = new Date(newYear);
const currentDate = new Date();
const totalSeconds = (newYearDate - 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);
day.innerHTML = days;
hour.innerHTML = hours;
min.innerHTML = mins;
sec.innerHTML = seconds;
// console.log(days, hours, mins, seconds);
}
countDown();
setInterval(countDown, 1000);
From the code above, Firstly, we get all html documents needed for the id attribute. Then, declare the variable for the new year in anticipation.
The countdown() performs all the activities, like getting the total number of seconds, days, hours, mins, and seconds remaining in the new year(1 jan 2024). And displaying the data to our frontend using the innerHTML property
Conclusion
We have been able to create a simple countdown timer using html, css, and javascript. If u follow this tutorial, your project should be working fine without any errors.
Thanks for reading. Please like and add your comments in the comment session
Top comments (0)