Show-Time

Description

The following HTML code displays a live clock on a web page.
This code updates the current time using JavaScript and displays it automatically every second.

Code

HTML index.html


<!DOCTYPE html>
    <html>
    <head>
        <link rel="icon" href="././M-W.png" type="image/png">
        <link rel="stylesheet" href="style.css">
        <title>Show Time | By Mr.Miner</title>
    </head>
    <body>
        <h2>Time now is:</h2>
        <h3 id="time"></h3>
        <p>hidden text</p>
    
        <script src="script.js"></script>
    </body>
    </html>

CSS style.css


body {
    background: black;
    color: wheat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

h2, h3, p {
    margin: 0;
    font-family: "Comic Sans MS";
    font-size: 600%;
}

p {
    color: black;
    font-size: 100%;
}

JS script.js


function updateTime() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    
    const formattedTime = `${hours}:${minutes}:${seconds}`;
    
    document.getElementById('time').textContent = formattedTime;
}

setInterval(updateTime, 10);
updateTime();

Related Images

can't load image

Tags