👀Create StopWatch⏱️

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here

How to create digital clock
How to create countDown timer.
Date() object in JS
toString() method in JS
paddStart() method in JS
setInteval() method in JS
setTimeout() method in JS
JS date Gate method
For design purposes, you need to add some CSS.

00:00:00

HTML


    <div class="showcontent">
                
    <p id="demo">00:00:00</p>



<div class="contentrow">
<div class="btn">
    <div class="group">
        <button id="start" onclick="start()">start</button>
        <button id="stop" onclick="stop()">stop</button>
        <button id="resume" onclick="resume()">resume</button>
    </div>
    <div >
        <button id="reset" onclick="reset()">Reset</button>
    </div>
</div>
</div>
</div>

JavaScript


clockfun();
function clockfun(){
    let date=new Date();

    let hours=date.getHours();

    let mediterian="AM";
    if(hours>12){
        mediterian="PM";
    }

    if(hours>12){
        hours=hours%12;
    }
    else{
        hours=12;
    }
    hours=hours.toString().padStart(2,'0');
    let minites=date.getMinutes().toString().padStart(2,'0');
    let seconds=date.getSeconds().toString().padStart(2,'0');

    document.getElementById("digitalclock").innerHTML=`${hours}:${minites}:${seconds} ${mediterian}`;


}
setInterval(clockfun,1000);

You can use alternative JS


var previoustotalmilisec=0;
var currentmilisec=0;

var id=undefined;



var startbtn=document.getElementById("start");

var stopbtn=document.getElementById("stop");

var resetbtn=document.getElementById("reset");

var resumebtn=document.getElementById("resume");

function start(){
    var oldtime=new Date().getTime();
    id=setInterval(calculate,30);
    function calculate(){
        var newtime=new Date().getTime();

        currentmilisec=newtime-oldtime;
        var total=previoustotalmilisec+currentmilisec;

        let milisec=(total%100).toString().padStart(2,'0');
        let sec=Math.floor((total/1000)%60).toString().padStart(2,'0');

        let minit=Math.floor(total/(60*1000)).toString().padStart(2,'0');;

        document.getElementById("demo").innerHTML=`${minit}:${sec}:${milisec}`;

    }

    startbtn.style.display='none';
    stopbtn.style.display='inline-block';


}



function stop(){
    clearInterval(id);
    previoustotalmilisec+=currentmilisec;
    currentmilisec=0;

    stopbtn.style.display='none';

    resumebtn.style.display='inline-block';
}

function resume(){
    startbtn.style.display='none';
    resumebtn.style.display='none';
    start();
}






function reset(){
    previoustotalmilisec=0;
    currentmilisec=0;
    document.getElementById("demo").innerHTML=`00:00:00`;

    clearInterval(id);

    stopbtn.style.display='none';
    resumebtn.style.display='none';
    startbtn.style.display='inline-block';

}

CSS


.showcontent .btn{
        
    display: flex;
    align-items:center;
    justify-content: center;
}
.showcontent p{
    background-color: #333;
    font-family: monospace;
    color: white;
    text-align: center;
    border-radius: 5px;
    padding:8px;
    font-size: 40px;
    
    
    
}
.contentrow button{
    
    padding:12px 16px;
    border: none;
    color: white;
    font-size: 18px;
    border-radius: 15%;
    margin-right: 15px;
    box-shadow: 0px 8px 2px #333;
    cursor: pointer;

}
#start{
    background-color: dodgerblue;
}
#reset{
    background-color:red;
}
#stop{
    display: none;
    background-color:rgb(255, 0, 76);
}
#resume{
    display: none;
    background-color: #04AA6A;
}
.showcontent button:active{
    box-shadow: 0px 4px 2px #333;
    transform: translateY(5px);
}

new Date()

Returns a Date object with the current date and time based on the system's clock.
This create a date object represent the current date and time.

toString()

The toString() method converts any data type into a string. Syntax: varname.toString(),

padStart()

It is used to JS to pad the current string with another string untill the resulting string reaches the given length.
Example: str.padStart(len,char or string);

setInterval()

This method in JS repeatedly calls a function or executes a code with a fixed time delay between each call.

setTimeout()

This method is used to execute a function or code snippet after a specified delay in milliseconds.

date.get....()

getDate(): Returns the day of the month(1-31)
getMonth(): Returns the month(0-11)
getFullYear(): Returns the year(4 digit year)
getDay(): Returns the day of the week(0-6)
getHours(): Returns the hours(0-23)
getMinutes(): Returns the minites(0-59)
getSeconds(): Returns the seconds(0-59)
getMilliseconds(): Returns the milliseconds(0-999)
getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC

Projects

👀Create StopWatch⏱️

HTML

JavaScript

You can use alternative JS

CSS

new Date()

toString()

padStart()

setInterval()

setTimeout()

date.get....()