How to make a Clock with JavaScript

Posted on by

Today you’re gonna learn how to make a simple clock with JS like the one above this paragraph.

First of all, you’re gonna need to open your editor of preference, then create 3 documents, an HTML, CSS, and JavaScript document

HTML

Next, you have to write the following on your HTML document, make sure to link your CSS and JavaScript files.

As you can see inside the body, in the first div we assigned a class named main which is the parent of the div with the class badge and the div with the class clock_screen.

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

        <div class="clock_screen">
            <div id="date">
                <span id="months"></span>
                <span id="days"></span>
                <span id="years"></span>
            </div>
                <span id="hour"></span>
                <span id="minutes"></span>
                <span id="seconds"></span>
        </div>
    </div>
    
    <script src="code.js"></script>
</body>
</html>

CSS

Next, we’re gonna be working on the CSS to bring the clock design to life.

ThIs is something that you want to use almost always I would say. The browser assigns some padding and margin by default, with this you get rid of it.

You have to know that the “*” symbol will select everything, so be careful with what you write inside of it.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;

Now we want to add a background to our clock. As you can see I didn’t use px units in the height, if you wonder why here is your answer. Vh units will adapt to any screen size while px won’t.

body{
    background-image: url('img/pattern.png');
    background-size: cover;
    height: 100vh;

}

Here is the whole CSS document, I think it is pretty self-explanatory, but If you have any questions leave them down below, I’ll be answering all of them.

By the way, I used a google font that’s why the “@import” at the beginning.

@import url('https://fonts.googleapis.com/css?family=Archivo+Black&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    
}
body{
    background-image: url('img/pattern.png');
    background-size: cover;
    height: 100vh;

}
.main{
    margin: 100px auto;
    padding: 30px;
    width: 400px;
    height: 400px;
    background: #cccccc;
    position: relative;
    border-radius: 50%;
}
.badge{
    padding: 5px 10px;
    width: 125px;
    background: #56bf0f;
    border-radius: 50%;
    color: #ffffff;
    font-family: sans-serif;
    font-weight: bold;
    position: absolute;
    top: 0px;
    left: 34.375%;
    text-align: center;

}
.clock_screen{
    padding: 105px 25px;
    height: 100%;
    background: #ebebeb;
    font-size: 50px;
    text-align: center;
    border-radius: 50%;
    font-family: Archivo Black;
}
#date{
    font-size: 35px;
}

JavaScript

Now let’s go ahead and bring this clock to life with JavaScript since it doesn’t do anything, yet.

First, create a function and call it however you want.

Important to know: var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared. While var and let can be declared without being initialized, const must be initialized during declaration.

In the first variable, we call the actual date, so I called it time then we call hrs, mins and secs on different variables so we can replace the empty spaces in the HTML document.

function clock_screen(){
    const time = new Date();
    let hrs = time.getHours();
    let mins = time.getMinutes();
    let secs = time.getSeconds();
    
    if (hrs === 0){
        hrs = '12';
    }

    if(hrs < 10){
        hrs = '0' + hrs;
    }
    if(mins < 10){
        mins = '0' + mins;
    }
    if(secs < 10){
        secs = '0' + secs;
    }
    

    //time
    document.getElementById('hour').innerHTML = hrs;
    document.getElementById('minutes').innerHTML = ':' + mins;
    document.getElementById('seconds').innerHTML = ':' + secs;
}
setInterval(clock_screen, 1000)

As you can see I have several ifs and that is so a number 0 shows every time there’s a single number. This is just for looks, but you don’t really need them.

Then we call the HTML element by their ID’s, make sure to get the ID’s right.

        <div class="clock_screen">
            <div id="date">
                <span id="months"></span>
                <span id="days"></span>
                <span id="years"></span>
            </div>
                <span id="hour"></span>
                <span id="minutes"></span>
                <span id="seconds"></span>
            </div>
        </div>

Make sure to set an interval so the clock actually works.

function clock_date(){
    const timedate = new Date();
    let day = timedate.getDate();
    let month = timedate.getMonth();
    let year = timedate.getFullYear();

document.getElementById('months').innerHTML = month + 1 +' /';
document.getElementById('days').innerHTML = day + ' /';
document.getElementById('years').innerHTML = year;
}

setInterval(clock_date, 1000)

Here you can see that add 1 to the month and that’s because the counting of the months starts from zero. That means that January is “0” so you add 1. For example, right now is December and if I didn’t add 1 it would display as month 11. You get the point just add 1 hahaha.

If you want to check this out on GITHUB “CLICK HERE”