Countdown Timer
Introduction:
This Projects Countdown Timer introduces a Animated Countdown Timer which is created by using the latest tech stacks i.e. HTML5 , CSS3 and JavaScript(ES6)
The logic used to create this project no too much difficult
One who has basic understanding of JavaScript and familiar with JS Functions concept can understand in easy manner.
You can customize this project’s animation as well as logic as per requirement.
Its one of the major project you can use for your personal use as well as to present in your college.
Explanation:
The JavaScript plays very Essential role for the main logic of the timer.A user can set a countdown timer as well as reset it to set new one.This interaction of user can be happened with the help of JavaScript.So we can say it’s a heart of this project.
First of all we have declared a variable named startTimer() which contains a null value means a user has not set a timer yet. The JavaScript code contains a addEventListener() functions which helps to set a countdown time a user want. A function called addEventListener() contains a another function that is startInterval() this is the onclick function that means when user click on the ‘Start’ button it is being called and starts the countdown timer from the time you have set Like above functions we have discussed we have another button that is RESET.
When a user click on the ‘Reset’ button the another function is being called that is stopInterval(). This is the function which stops the timer and reset it to default.
Source Code:
HTML Code:
Filename: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<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=Dosis:wght@300&family=Jost:wght@500&family=Nunito:wght@500&family=Prompt:wght@500&family=Roboto+Slab:wght@700&family=Sofia+Sans:wght@500&display=swap" rel="stylesheet">
<title>Countdown Timer</title>
</head>
<body>
<div id="container">
<div class="tit"><h1>Countdown Timer</h1></div>
<div class="top">
<div class="h">
<input id="hour" type="number" max="99" min="0" value="0" class="time">
<p id="hour-label" class="label">Hours</p>
</div>
<div class="m">
<input id="minute" type="number" max="60" min="0" value="0" class="time">
<p id="min-label" class="label">Minutes</p>
</div>
<div class="s">
<input id="sec" type="number" max="60" min="0" value="0" class="time">
<p id="sec-label" class="label">Seconds</p>
</div>
</div>
</div>
<div class="bottom">
<button id="start" class="btn">Start</button>
<button id="reset" class="btn">Reset</button>
</div>
<script src="main.js"></script>
</body>
</html>
CSS Code:
Filename: Style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Dosis', sans-serif;
font-family: 'Jost', sans-serif;
font-family: 'Nunito', sans-serif;
font-family: 'Prompt', sans-serif;
font-family: 'Roboto Slab', serif;
font-family: 'Sofia Sans', sans-serif;
color: rgb(17, 16, 16);
}
body{
height: 100vh;
background-image: url(bg.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
h1 {
color: white;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-family: sans-serif;
background: none;
}
.tit {
justify-self: center;
width: 100vw;
margin-top: 8rem;
background: none;
}
#container {
display: flex;
flex-direction: column;
background: none;
height: 50vh;
}
.top {
display: flex;
justify-content: center;
width: 100vw;
align-items: center;
margin-top: 2rem;
background: none;
}
.bottom {
display: flex;
justify-content: center;
height: 1vh;
align-items: flex-start;
background: none;
background: none;
}
/*label*/
.label {
/* margin: 1rem; */
opacity: .5;
justify-self: center;
align-self: center;
font-size: 30px;
background: none;
}
/*times*/
.time {
justify-self: end;
margin-left: 1.5rem;
align-self: flex-end;
opacity: .8;
/* text-align: center; */
border: none;
background-color: #ffffff00;
font-size: 50px;
width: 70px;
background: none;
height: 50px;
}
/*buttons*/
.btn {
align-self: center;
margin: 1rem;
border-radius: .3rem;
border: .1px solid gray;
width: 100px;
height: 40px;
font-size: 30px;
justify-self: center;
}
.h,
.m,
.s {
margin: 1rem;
padding: 1rem;
border-radius: 1rem;
}
.h:hover,
.m:hover,
.s:hover {
background-color: rgb(233, 231, 229);
}
.bottom button:hover {
color: rgb(64, 141, 73);
cursor: pointer;
}
JavaScript Code:
Filename: script.js
var start = document.getElementById('start');
var reset = document.getElementById('reset');
var h = document.getElementById("hour");
var m = document.getElementById("minute");
var s = document.getElementById("sec");
//store a reference to the startTimer variable
var startTimer = null;
start.addEventListener('click', function(){
//initialize the variable
function startInterval(){
startTimer = setInterval(function() {
timer();
}, 1000);
}
startInterval();
})
reset.addEventListener('click', function(){
h.value = 0;
m.value = 0;
s.value = 0;
//stop the timer after pressing "reset"
stopInterval()
})
function timer(){
if(h.value == 0 && m.value == 0 && s.value == 0){
h.value = 0;
m.value = 0;
s.value = 0;
} else if(s.value != 0){
s.value--;
} else if(m.value != 0 && s.value == 0){
s.value = 59;
m.value--;
} else if(h.value != 0 && m.value == 0){
m.value = 60;
h.value--;
}
return;
}
//stop the function after pressing the reset button,
//so the time wont go down when selecting a new time after pressing reset
function stopInterval() {
clearInterval(startTimer);
}
We have created one more function that is timer() in this we have given some conditions that the
That the functions we have declared can only be called when all the conditions in the functions are satisfied.
The conditions are the user should not enter minus value , the minute and second input should be less than 60.These are the conditions which make our all logic meaningful.
Output:
Find More Projects
Jungle Dash Game Using Python with source code with pygame module Introduction: Dive into the excitement of jungle adventures with our new …
Building a Tetris Game with Python with source code Introduction: Welcome to the world of Tetris, where falling blocks meet strategic maneuvers …
Super Mario Game Using Python with source code Introduction: Remember playing Super Mario as a kid? It’s that classic game where you …
library management system using python with source code using Python GUI Tkinter (Graphical User Interface) How to Run the code: Introduction: Imagine …
Space Shooter Game Using Python with source code Overview: A space shooter game typically involves controlling a spaceship to navigate through space …
Hotel Management System Using Python with source code Introduction: Welcome to our blog post introducing a helpful tool for hotels: the Tkinter-based …
