JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AKST Clock</title>
    <style>
        #clock {
            font-family: Arial, sans-serif;
            font-size: 24px;
            color: #333;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="clock"></div>

    <script>
        function updateClock() {
            // Alaska Standard Time (AKST) is UTC-9 hours
            const akstOffset = -9;

            // Get the current UTC time
            const utcTime = new Date();

            // Calculate AKST by applying the offset to the hours
            const hours = String((utcTime.getUTCHours() + akstOffset + 24) % 24).padStart(2, '0');
            const minutes = String(utcTime.getUTCMinutes()).padStart(2, '0');
            const seconds = String(utcTime.getUTCSeconds()).padStart(2, '0');

            // Format the time string for display
            const timeString = `${hours}:${minutes}:${seconds} AKST`;

            // Display the clock in the div with id 'clock'
            document.getElementById("clock").innerHTML = timeString;
        }

        // Run updateClock function every 1 second
        setInterval(updateClock, 1000);

        // Initial call to display the time immediately when page loads
        updateClock();
    </script>
</body>
</html>