Digital Clock Using HTML, CSS, JavaScript 2020

May 9, 2020

This tutorial will teach you how to create digital clock using html,css and javascript. The design of digital clock is created by using css and it follows the neomorphism design. Any beginner can follow this tutorial easily even if you just started learning html, css and javascript.

If you wanted to learn neomorphism design, I have created dedicated video just for it – Check out the neomorphism design lesson in English

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>By Reecry</title>
<style>
*{
    margin: 0px;
    padding: 0px;
}

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rebeccapurple;
}

.box{
    text-align: center;
}

.hours, .minutes, .seconds, .amorpm{
    width: 4em;
    height: 4em;
    background-color: rebeccapurple;
    padding: 1em;
    margin: 1em;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    box-shadow: 3px 3px 9px #542682, -3px -3px 9px #8048b8;
}

#hours, #minutes, #seconds, #amorpm{
    font-size: 2em;
    color: white;
}

.box > h1{
    font-size: 1em;
    color: white;
}
</style>
</head>
<body>


    <div class="container">

            <div class="box">
                <div class="hours">
                    <h1 id="hours">8</h1>
                </div>
                <h1>hours</h1>
            </div>


            <div class="box">
                <div class="minutes">
                    <h1 id="minutes">8</h1>
                </div>
                <h1>minutes</h1>
            </div>


            <div class="box">
                <div class="seconds">
                    <h1 id="seconds">8</h1>
                </div>
                <h1>seconds</h1>
            </div>

            <div class="box">
                <div class="amorpm">
                    <h1 id="amorpm">8</h1>
                </div>
                <h1>am or pm</h1>
            </div>

           

    </div>

    <script>

let digitalClock = () => {

    let date = new Date();

    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();

    let amorpm = hours >= 12 ? 'pm' : 'am';

    




    document.getElementById("hours").innerHTML = hours;
    document.getElementById("minutes").innerHTML = minutes;
    document.getElementById("seconds").innerHTML = seconds;
    document.getElementById("amorpm").innerHTML = amorpm;

    setTimeout(digitalClock, 500);

} 

digitalClock();
</script>


</body>
</html>