Digital Countdown using HTML, CSS and JavaScript With Source Code
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:
Get Discount on Top Educational Courses
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>
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;
}
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
URL Shortener Using Python Django Introduction: Long URLs can be shortened into short, shareable links with the help of the URL Shortener …
User Authentication System Using Python Django Introduction: The implementation of safe and adaptable user authentication in Django is the main goal of …
The E-Learning System using Java with a Graphical User Interface (GUI) Introduction The E-Learning System is developed using Java (with a Graphical …
Weather App Using Python Django Introduction: When a user enters the name of a city, the Weather App retrieves current weather information. …
Quiz App Using Python Django Introduction: Users can take quizzes in a variety of subjects, see their results, and monitor their progress …
resume screener in python using python introduction The hiring process often begins with reviewing numerous resumes to filter out the most suitable …
More HTML CSS JS Projects
Get Huge Discounts
