How to build a javascript digital clock

HTML CODE

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./style.css">
        <title>JavaScript Digial Clock</title>
    </head>
    <body>

        <div class="time-card">
            <div class="time"><h1 id="hour"></h1></div>
            <div class="time"><h1 id="minute"></h1></div>
            <div class="time"><h1 id="sec"></h1></div>
        </div>

        <script src="./index.js"></script>
    </body>
</html>

CSS Code

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
body {
    color: #888;
    background: rgb(150, 150, 150);
    font-family: 'Oswald', sans-serif;
    padding-top: 100px;
}

.time-card {
    display: flex;
    justify-content: center;
    vertical-align: middle;
}

.time-card .time {
    background: rgba(0, 0, 0, .8);
    margin: 5px;
    border-radius: 5px;
    padding: 0px 10px;
    box-shadow: 0 5px 14px 1px #16161652;
    width: 60px;
    text-align: center;
}

.time-card .time h1 {
    font-size: 50px;
}

JS Code

setInterval(showTime, 1000);
function showTime() {
    var date = new Date();
    var hour = date.getHours() % 12 || 12;
    var seconds = date.getSeconds();
    var minutes = date.getMinutes();
    // minutes = minutes < 10 ? `0${minutes}` : minutes;
    console.log(minutes)
    const showHours = document.getElementById("hour");
    showHours.innerHTML = hour;

    const showMin = document.getElementById("minute");
    showMin.innerHTML = minutes;

    const showSec = document.getElementById("sec");
    showSec.innerHTML = seconds;
}

Build a JavaScript Digital Clock within 3 Minutes

How to build a javascript digital clock

HTML CODE