Amazing Stop Watch by using Html CSS & JavaScript

arsalan khan

1658

Hey Folk! Presenting you a amazing Ui design Stop Watch by using Html CSS and JavaScript source code is simple and easy to understand :-). I hope you guys like it!

 <div class="container">
        <h3>StopWatch</h3>
<p>
    <span id="hr">00</span> : <span id="min">00</span> : <span id="sec">00</span>
</p>
<button id="startBtn" onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="location.reload()">Reset</button>
    </div>

Try it Yourself >>

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Nanum+Gothic&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    user-select: none;
    border: none;
  font-family:Montserrat;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #242424;
}
.container{
    position: relative;
    width: 490px;
    height: 490px;
    text-align: center;
    border-radius: 50%;
    border: 3px solid #ee2c12;
    box-shadow:4px 6px 10px #f30b0b52 , inset 6px 6px 10px #ffffff0f;
background-color: #2e2e2e;
}
.container h3{
    
    color: #fdfdfd;
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 29px;
    text-align: center;
letter-spacing: 3px;
margin-top: 90px;

}
.container p{
    margin-top: 55px;
    color: #fdfdfd;
    font-weight: bolder;
    font-size: 58px;
    text-align: center;
}

.container button{
    cursor: pointer;
    margin:70px 30px 0px ;
    width:80px  ;
    height: 35px;
    background: transparent;
    color: #ffffff;
 font-weight: bold;
    font-size: 18px;
    border: 2px solid #0c0c0c;
    border-radius: 4px;
    letter-spacing: 2px;
    transition: all .4s;

}

.container button:hover{
    background: #c73623;
    color: #ffffff;
}

Try it Yourself >>

let sec=document.querySelector('p #sec');
let min=document.querySelector('p #min');
let hr=document.querySelector('p #hr');
let startBtn= document.querySelector('.container #startBtn');

let interval;
let ss=0;
let mm=0;
let hh=0;

function stop(){
    clearInterval(interval);
    startBtn.style.pointerEvents='visible';
}
function start(){
    startBtn.style.pointerEvents='none';

    interval=setInterval(() => {
        if(ss<59){
            ss+=1;
            ss<10 ? sec.innerHTML='0' + ss : sec.innerHTML=ss;
        }
        else{
            ss=0;
            ss<10 ? sec.innerHTML='0' + ss : sec.innerHTML=ss;
            if(mm<59){
                mm+=1;
                mm<10 ? min.innerHTML='0' + mm : min.innerHTML=mm;
            }
            else{
                hh+=1;
                hh<10 ? hr.innerHTML='0' + hh : hr.innerHTML=hh;
            }
        }
    }, 1000);
}

Try it Yourself >>