JSFiddle - React, Tailwind, and code Playground

by waqasumer

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stop Watch</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container mt-5 h-position-relative">
        <div>
            <h1 class="title">Stop Watch</h1>
        </div>

        <div class="circle mt-5">
            <div>
                <h1 class="labels">Min</h1><span class="">:</span>
                <h1 class="labels">Sec</h1><span class="">:</span>
                <h1 class="labels">Millisec</h1>
            </div>
            <div>
                <h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span>
                <h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span>
                <h1 id="msec" class="circleContent">00</h1>
            </div>

            <div class="h-position-absolute h-tl">
                <button id="start" onclick="start()" type="button" class="btn bg-success text-light btn-circle btn-md mr-1"><i class="fa fa-play"></i></button>
                <button onclick="stop()" type="button" class="btn bg-danger text-light btn-circle btn-md mr-1"><i class="fa fa-pause"></i></button>
                <button onclick="lapTimer()" id="lapButton" type="button" class="btn btn-primary btn-circle btn-md mr-1"><i class="fas fa-stopwatch"></i></button>
                <button onclick="reset()" type="button" class="btn btn-primary btn-circle btn-md mr-1"><i class="fa fa-refresh"></i></button>
            </div>

        </div>
        <br />
        <div class="row" id="laps">
        </div>
    </div>


</body>
<script src="https://use.fontawesome.com/931bd37ef8.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"...

CSS

body {
    background: #000428;
    background: -webkit-linear-gradient(to right, #004e92, #000428);
    background: linear-gradient(to right, #004e92, #000428);
}

.title {
    text-align: center;
    color: #fff;
}

.circle {
    margin: 0 auto;
    padding: 0;
    width: 300px;
    height: 300px;
    padding-top: 65px;
    border-radius: 50%;
    text-align: center;
    border: 10px solid #666;
    border-style: double;
}

.circleContent {
    display: inline-block;
    color: #fff;
    font-size: 50px;
    width: 70px;
}

.circleContent-span {
    color: #fff;
    font-size: 50px;
}

.labels {
    display: inline-block;
    color: #fff;
    font-size: 15px;
    width: 80px;
}

.h-position-relative {
    position: relative;
}

.h-position-absolute {
    position: absolute;
}

.h-tl {
    padding-top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.btn-circle.btn-md {
    width: 45px;
    height: 45px;
    padding: 7px 10px;
    border-radius: 35px;
    font-size: 15px;
    text-align: center;
}

.laps {
    list-style: none;
    margin: 0;
    padding-left: 0;
    border-top: 1px solid #333;
    font-size: 16px;
    color: #fff;
}

.row {
    color: #fff;
    border: 1px solid #fff;
}

JavaScript

var min = 0;
var sec = 0;
var msec = 0;

var getMin = document.getElementById("min");
var getSec = document.getElementById("sec");
var getmsec = document.getElementById("msec");
var interval;

function timer() {
    msec++
    getmsec.innerHTML = msec;

    if (msec >= 100) {
        sec++;
        if (sec <= 9) {
            getSec.innerHTML = "0" + sec;
        } else {
            getSec.innerHTML = sec;
        }
        msec = 0;

    } else if (sec >= 60) {
        min++;

        if (min <= 9) {
            getMin.innerHTML = "0" + min;
        } else {
            getMin.innerHTML = min;
        }
        sec = 0;
    }
}

function start() {
    interval = setInterval(timer, 10);

    var btn = document.getElementById("start");
    btn.disabled = true;
}

function stop() {
    clearInterval(interval);

    var btn = document.getElementById("start");
    btn.disabled = false;
}

function reset() {
    min = "00";
    sec = "00";
    msec = "00";

    getMin.innerHTML = min;
    getSec.innerHTML = sec;
    getmsec.innerHTML = msec;

    clearInterval(interval);

}

function lapTimer() {
    var Laps = document.getElementById('laps');
    Laps.innerHTML += "<div>" + " " + getMin.innerHTML + ":" + getSec.innerHTML + ":" + getmsec.innerHTML + "</div>";
}