Stopwatch using javascript

Project Description:

In this project we are going to make a Stopwatch using javascript

Stopwatch will be able to show number of seconds and microsecond passed.
Accuracy of second in stopwatch will be 10/1000 instead of 1/1000 because if you dont have good hardware it may lack time or it may not show true timing because of heavy.
It will have four buttons to control timing. Start, Lap, Stop and Clear.
Time laps will be shown just below the stopwatch.

Requirements:

You must be familiar with using functions with javascript events.
You must be familiar with javascript prebuilt timing functions eg: setTimeout(), setInterval(), clearTimeout() etc.
Must be familiar with using javascript DOM.

Challenge:

If you want to do it with description and guidelines above, you can try our Editor above.

Project view must look like below in image:

Guides:

First create a container for whole stopwatch, Inside which create seperate container for each parts.
define global variables: var sec=0, ms=0, interval=false, laparr=[];
Write seperate functions for each functionalities: start(), stop(), lap(), clear:clea() and timer().

If you want to take a challenge don't scroll below

javascript source code for stopwatch

HTML

        <section class='stopwatch-container'>
            <section class='stopwatch'>
        
                <div class='sec'>00 </div>
                <div class='cln'>:</div>
                <div class='mics'> 00</div>
        
            </section>
        
            <section class='lap'>
        
            </section>
            
            <button onclick='start()'>Start</button>
            <button onclick='lap()'>Lap</button>
            <button onclick='stop()'>Stop</button>
            <button onclick='clea()'>Clear</button>
            </section>

CSS

        * {
            box-sizing: border-box;
        }
           .stopwatch-container {
            width:200px;
            height:auto;
            margin:auto;
            color:white
        }
        .stopwatch {
            background-color: rgb(17, 2, 2);
            width:200px;
            height:150px;
            display:inline-flex;
            margin:auto;
            border-radius: 30%;
        }
        .sec {
            background-color: rgb(0, 8, 8);
            width:47%;
            font-size: 36px;
            padding:15px;
            padding-top: 40px;
            border-radius: 20%;

        }
        .cln {
            background-color: rgb(0, 8, 8);
            width:6%;
            font-size: 36px;
            padding:15px;
            padding-top: 40px;
            border-radius: 20%;

        }
        .mics {
            background-color:rgb(0, 0, 7);
            width:47%;
            font-size: 36px;
            padding:15px;
            padding-top: 40px;
            border-radius: 20%;
        }
        .lap {
            background-color: rgb(8, 14, 3);
            height:50px;
            width:200px;
            margin: auto;
            padding-top:10px;
            overflow-x: scroll;
            border-radius:5px;
        }
        .lap::-webkit-scrollbar {
            display:none;
        }
        button {
            background-color: blue;
            font-size: 15.0px;
        }

        var sec=0, ms=0, interval=false, laparr=[];
        function start() {
           
           if(!interval) {
            interval=setInterval(timer,10);//you cant call it when it is already being executed
           }
        }
        function stop() {
             clearInterval(interval);
             interval=false;
        }
        function clea() {
            console.log('cleared');
            document.querySelector('.sec').innerHTML=0;
            document.querySelector('.mics').innerHTML=0;
            document.querySelector('.lap').innerHTML=null;
            laparr=[];

            sec=0;
            ms=0;
            clearInterval(interval);
            interval=false;
        }
        function lap() {
            let t=`${sec}:${ms}`;
            laparr.push(t)

            document.querySelector('.lap').innerHTML=laparr;
          
        }
       
        function timer() {
            ms=ms+10;
            document.querySelector('.mics').innerHTML=ms;
            if(ms==1000) {
                ms=0;
                sec=sec+1;
            }
            document.querySelector('.sec').innerHTML=sec;

        }

PREVIEW:

Challenge-2:

Add extra minute section in stopwatch.
guide: First define global variable min, Then add a functionality such that when sec==60, min=min+1, sec=0;