index.html

<img src="NICD_Secondary Logo_Landscape_White.png" width="50%">
<div>
    <div id="minutes" class="countdown"></div>
    <div id="seconds" class="countdown"></div>
</div>
<div>
    <button onclick="start()" id="start">Start</button>
    <button onclick="reset()" id="reset">Reset</button>
</div>


<style>
    @font-face {
        font-family: Derailed;
        src: url('derailed-bold-webfont.ttf');
    }

    .countdown {
        font-family: Derailed;
        font-size: 30vw;
        color: white;
        /* overflow: hidden; */
        width: 49vw;
        display: inline-block;
    }

    body {
        background-color: black;
    }

    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    button {
        background-color: black;
        font-family: Derailed;
        border-color: white;
        color: white;
        font-size: 12pt;
        border-radius: 10px;
        padding-left:10;
        padding-right:10;
        padding-top:5;
        padding-bottom:5; 
        margin-left: 10;
    }

    button:disabled {
        background-color: grey;
        color: lightgrey;
    }

    #minutes {
        text-align: right
    }

    #seconds {
        width: 40vw
    }

    */
</style>
<script>

    var timeout;
    const initMinutes = 10;
    const initSeconds = 0;
    var minutes = initMinutes;
    var seconds = initSeconds;

    minutesElement = document.getElementById("minutes");
    secondsElement = document.getElementById("seconds");
    startElement = document.getElementById("start")

    function fmt(number) {return number.toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})}

    reset()

    function reset() {
        clearTimeout(timeout)

        startElement.innerHTML = 'Start'
        startElement.onclick = start
        
        minutesElement.innerHTML = fmt(initMinutes) + ':'
        secondsElement.innerHTML = fmt(initSeconds)

        minutes = initMinutes
        seconds = initSeconds

    }

    function stop() {
        clearTimeout(timeout)
        startElement.innerHTML = 'Start'
        startElement.onclick = start
    }

    function start() {
        var endTime, msLeft, time;

        startElement.innerHTML = 'Stop'
        startElement.onclick = stop

        function updateTimer() {
            msLeft = endTime - (+new Date);
            if (msLeft < 1000) {
                seconds = 0
                secondsElement.innerHTML = "00";
            } else {
                time = new Date(msLeft);
                seconds = time.getUTCSeconds()
                minutes = time.getUTCMinutes()
                minutesElement.innerHTML = fmt(minutes) + ':'
                secondsElement.innerHTML = fmt(seconds);
                timeout = setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
            }
        }
        endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
        updateTimer();
    }

</script>