JSFiddle - React, Tailwind, and code Playground

by Ender

HTML

<h1>Mark's Busted Computer Clock</h1>
<div id="time">
    <span id="hour">146</span>:<span id="minute">45</span>:<span id="second">00</span>
</div>

CSS

h1 {font-size: 20px; font-weight:bold;}

JavaScript

$(function() {
    setInterval(UpdateSecond, 1000);
});

function UpdateSecond() {
    var num = parseInt($('#second').text(), 10);
    num++;
    if (num == 60) {
        num = 0;
        UpdateMinute();
    }
    if (num < 10) {
        num = "0" + num;
    }
    $('#second').text(num);
}

function UpdateMinute() {
    var num = parseInt($('#minute').text(), 10);
    num++;
    if (num == 60) {
        num = 0;
        UpdateHour();
    }
    if (num < 10) {
        num = "0" + num;
    }
    $('#minute').text(num);
}

function UpdateHour() {
    $('#hour').text(parseInt($('#hour').text(), 10) + 1);
}