Stop Watch

<div class="sw-container">
    <div id="display">00:00:00</div>
    
    <div class="controls">
        <button id="startStop" onclick="startStop()">Start</button>
        <button id="reset" onclick="reset()">Reset</button>
    </div>
</div>

<style>
    .sw-container {
        text-align: center;
        background: #f4f4f4;
        padding: 20px;
        border-radius: 10px;
        max-width: 300px;
        margin: 20px auto;
        font-family: 'Courier New', Courier, monospace;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    #display {
        font-size: 3rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
        background: #fff;
        padding: 10px;
        border-radius: 5px;
        border: 2px solid #ddd;
    }

    .controls button {
        padding: 10px 20px;
        font-size: 1rem;
        cursor: pointer;
        border: none;
        border-radius: 5px;
        transition: 0.3s;
        margin: 0 5px;
    }

    #startStop { background-color: #28a745; color: white; }
    #startStop.stop { background-color: #dc3545; }
    #reset { background-color: #6c757d; color: white; }
    
    .controls button:hover { opacity: 0.8; }
</style>

<script>
    let startTime;
    let elapsedTime = 0;
    let timerInterval;

    function timeToString(time) {
        let diffInHrs = time / 3600000;
        let hh = Math.floor(diffInHrs);

        let diffInMin = (diffInHrs - hh) * 60;
        let mm = Math.floor(diffInMin);

        let diffInSec = (diffInMin - mm) * 60;
        let ss = Math.floor(diffInSec);

        let diffInMs = (diffInSec - ss) * 100;
        let ms = Math.floor(diffInMs);

        let formattedMM = mm.toString().padStart(2, "0");
        let formattedSS = ss.toString().padStart(2, "0");
        let formattedMS = ms.toString().padStart(2, "0");

        return `${formattedMM}:${formattedSS}:${formattedMS}`;
    }

    function print(txt) {
        document.getElementById("display").innerHTML = txt;
    }

    function startStop() {
        let btn = document.getElementById("startStop");
        if (btn.innerHTML === "Start") {
            startTime = Date.now() - elapsedTime;
            timerInterval = setInterval(function printTime() {
                elapsedTime = Date.now() - startTime;
                print(timeToString(elapsedTime));
            }, 10);
            btn.innerHTML = "Stop";
            btn.classList.add("stop");
        } else {
            clearInterval(timerInterval);
            btn.innerHTML = "Start";
            btn.classList.remove("stop");
        }
    }

    function reset() {
        clearInterval(timerInterval);
        print("00:00:00");
        elapsedTime = 0;
        let btn = document.getElementById("startStop");
        btn.innerHTML = "Start";
        btn.classList.remove("stop");
    }
</script>