In this article, I intended to teach you how to use setInterval clearInterval and at the end, I want to create a digital clock and stopwatch.
setInterval method calls a function or evaluates an expression at a specified interval. setInterval method will continue calling a function until the clearInterval function is called or the browser window is closed.
The ID value returned by the setInterval function is used as the parameter for the clearInterval method.
If you want to run your function once after a specified time use setTimeout function.
setInterval(function,milliseconds,para1,para2)
1000ms=1second
For example, if you want to alert your user to log in or something else at a specified interval of time repeatedly use setInterval function. It's recommended to create a function separately then add a reference of that function to the setInterval function. When calling that function never add curly braces () because setInterval function expects reference of that function not calling of that function. You just need to add a reference to that function keep this in mind deeply.
function userAlert(){
alert('please login')
}
setInterval(userAlert,1000);
if you wanna stop alert the setInterval function returns an ID which is used as the clearInterval function parameter to stop it.
function userAlert(){
alert('please login')
}
let alertID=setInterval(userAlert,1000);
clearInterval(alertID);
If you grasped the concept of setInterval and clearInterval I wanna create a stopwatch and a digital clock.
Stopwatch
This is a little bit confusing and I'm not sure how to create this stopwatch but I have to experiment with this to make myself confident 100% grapsed this concept. In my opinion first of all we need to create HTML Part.
HTML PART
<div class='wrapper'>
<h1>StopWatch</h1>
<h2>Vanilla JavaScript StopWatch</h2>
<p><span class='seconds'></span>:<span class='tens'></span></p>
<button class='start'>Start</button>
<button class='stop'>Stop</button>
<button class='reset>Reset</button>
</div>
We add a wrapper to wrap out stopwatch content then we add some title and info after that I added a paragraph tag which is
inside this I put two spans which is inline element in HTML with classes of seconds and tens. Because I added seconds and tens if you deeply look at the stop watch it increments by ten 🔟 and when it reaches 100 💯 it starts from 1 again and here I put seconds to increment second by 1 when tens is reached 100 💯.I added three buttons to control my stopwatch. Start button to start my stopwatch, stop button to do vice versa of start button and finally reset button to reset my stopwatch and reinvent the wheel.
We have to add some style to our stopwatch.
CSS PART
:root{
--base-color:#00858f;
--text-color:#fff;
}
body{
font-family:'Open Sans',sans-serif;
margin:0;
padding:0;
height:100vh;
background-color:var(--base-color);
display:flex;
align-items:center;
justify-content:center;
}
.wrapper{
max-width:60%;
margin:auto;
}
h1,h2{
font-size:1.5rem;
color:var(--text-color);
text-align:center;
font-weight:200;
}
button{
all:unset;
border:1px solid var(--text-color);
color:var(--text-color);
font-family:inherit;
font-size:1rem;
outline:0;
transition:all .5s ease;
width:1rem 2rem;
margin-left:1rem;
}
button:hover{
background:var(--text-color);
color:var(--base-color);
}
p{
font-size:1.2rem;
font-weight:bold;
margin:4rem auto;
}
My style may differ from your style doesn't matter you can implement your own style just implement my functionality and logic that I grasped wanna to transfer my logic to you through this article.
What we need to create that stopwatch please thing a minute and let me know if you have any idea and suggestions about this stopwatch and my grasp.
Initially we need to target our seconds and tens and then declare some functions to reach our goal.
JavaScript PART
let tens=0;
let seconds=0;
let htmlTens=document.querySelector('.tens');
let htmlSeconds=document.querySelector('.seconds');
let startBtn=document.querySelector('.start');
let stopBtn=document.querySelector('.stop');
let resetBtn=document.querySelector('.reset');
And now what we need to do. we need to declare a interval to get the ID of setInterval function which returns it.
let tens=0;
let seconds=0;
let htmlTens=document.querySelector('.tens');
let htmlSeconds=document.querySelector('.seconds');
let startBtn=document.querySelector('.start');
let stopBtn=document.querySelector('.stop');
let resetBtn=document.querySelector('.reset');
let interval;
startBtn.addEventListener('click',function(){
interval=setInterval(startTime,10);
});
stopBtn.addEventListener('click',function(){
clearInterval(interval);
});
resetBtn.addEventListener('click',function(){
tens='00';
seconds='00';
//if textContent didn't work add innerHTML
htmlTens.textContent=tens;
//if textContent didn't work add innerHTML
htmlSeconds.textContent=seconds;
})
//we declare startTimer function
function startTimer(){
tens++;
if(tens<9){
htmlTens.innerHTML='0'+tens;
}
if(tens>9){
htmlTens.innerHTML=tens;
}
if(tens>99){
seconds++;
htmlSeconds.innerHTML='0'+seconds;
tens=0;
htmlTens.innerHTML='0'+tens;
}
if(seconds>9){
htmlSeconds.innerHTML=seconds;
}
if you open it in your browser and click on the start button the stopwatch ⏱ starts incrementing by 1 but we have a bug. If you look at the startTimer function we increment tens again and again if we click twice the seconds will also increment and it's speed will rise we need to clear the previous increment of tens.
let tens=0;
let seconds=0;
let htmlTens=document.querySelector('.tens');
let htmlSeconds=document.querySelector('.seconds');
let startBtn=document.querySelector('.start');
let stopBtn=document.querySelector('.stop');
let resetBtn=document.querySelector('.reset');
And now what we need to do. we need to declare a interval to get the ID of setInterval function which returns it.
let tens=0;
let seconds=0;
let htmlTens=document.querySelector('.tens');
let htmlSeconds=document.querySelector('.seconds');
let startBtn=document.querySelector('.start');
let stopBtn=document.querySelector('.stop');
let resetBtn=document.querySelector('.reset');
let interval;
startBtn.addEventListener('click',function(){
clearInterval(interval);
interval=setInterval(startTime,10);
});
stopBtn.addEventListener('click',function(){
clearInterval(interval);
});
resetBtn.addEventListener('click',function(){
tens='00';
seconds='00';
//if textContent didn't work add innerHTML
htmlTens.textContent=tens;
//if textContent didn't work add innerHTML
htmlSeconds.textContent=seconds;
})
//we declare startTimer function
function startTimer(){
tens++;
if(tens<9){
htmlTens.innerHTML='0'+tens;
}
if(tens>9){
htmlTens.innerHTML=tens;
}
if(tens>99){
seconds++;
htmlSeconds.innerHTML='0'+seconds;
tens=0;
htmlTens.innerHTML='0'+tens;
}
if(seconds>9){
htmlSeconds.innerHTML=seconds;
}
Digital Clock
HTML Part
<h1 class='clock'></h1>
CSS Part
.clock{
text-align:center;
font-family:'Poppins',sans-serif;
color:#333;
font-size:2rem;
margin:5rem auto;
}
JavaScript Part
function timer(){
let date=new Date();
let time=date.toLocaleTimeString(); //returns the local time
document.querySelector('.clock').textContent=time;
}
setInterval(timer,1000);
Loading animation
Create this loading animation by the concepts you learn in this blog. If you can't let me know and create this for you. Thanks a lot for reading this blog.