JSFiddle - React, Tailwind, and code Playground

by toby3105

HTML

<button id="start">Click me</button>
<div id="display">test</div>

JavaScript

document.getElementById("start").addEventListener("click", function () {
    var displayElement = document.getElementById("display");
    displayElement.innerHTML = "bla";
    startTimer(displayElement);
});

function displayTime(currentTime) {
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();

    var meridiem = "am"; // Default is AM

    if (hours > 12) {
        hours = hours - 12; // Convert to 12-hour format
        meridiem = "PM"; // Keep track of the meridiem
    }

    if (hours === 0) {
        hours = 12;
    }

    if (hours < 10) {

        hours = "0" + hours;
    }

    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
    var time = hours + ":" + minutes + ":" + seconds + " " + meridiem;
    console.log(time);
}

function startTimer(displayElement) {
    var now = new Date();
    var startDate = new Date(now.getYear(), now.getMonth(), now.getDay(), 9);
    
    setInterval(function () {
        startDate.setSeconds(startDate.getSeconds() + 10);
        console.log(displayElement);
        displayElement.innerHtml = startDate.toTimeString();
    }, 1000)

}