javascript, beginner's project, clock project

This is a great project to help beginners grab the fundamentals of working with the Date Object hands-on, in javascript. In this article, we'll be building a simple digital clock with a 12-hour feature.

Building the Clock Structure

We'll begin building our project with HTML.

HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Digital Clock</title>
</head>
<body>
    <main>
        <div class="clock-container" id="container">
            <p class="value" id="hours"></p>
            <p>:</p>
            <p class="value" id="minutes"></p>
            <p>:</p>
            <p class="value" id="seconds"></p>
            <p class="value" id="suffix"></p>
        </div>
    </main>
    <script src="index.js"></script>
</body>
</html>

Moving unto JavaScript

Grabbing the Elements

We'll grab the HTML elements needed to display the clock from the HTML document we created above.

const Displayhours = document.querySelector('#hours');
const Displayminutes = document.querySelector('#minutes');
const Displayseconds = document.querySelector('#seconds');
const suffix = document.querySelector('#suffix');

Date Object to get the time

Creating a new Date Object and visualising it with console.log

const date = new Date()
console.log(date)

Result of the Date Object

Getting the hours, minutes and seconds from the Date Object

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

Adding our clock to the DOM

The code below adds the clock to the DOM.

Displayhours.textContent = hours,
Displayminutes.textContent = minutes,
Displayseconds.textContent = seconds

Visualizing our Code with CSS

Adding the CSS code

* {
    padding: 0;
    margin: 0;
}

@font-face{
    font-family:'digital-clock-font';
    src: url('./technology.bold.ttf');
    font-weight: 400;
   }

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #335c67;
    color: #f5f1ed;
}

main {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.clock-container {
    width:  600px;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 10rem;
    font-family: 'digital-clock-font',sans-serif;
}

.value {
    padding: 10px;
    max-width: 300px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 2px 4px black;
}

#seconds {
    max-width: 300px;
    text-align: center;   
}

#suffix {
    font-size: 2rem;
    width: 50px;
    height: 40px;
    padding: 5px;
}

Our job so far.
Notice the suffix "AM/PM" space is currently empty, we'll implement it later.

Moving on with JavaScript

The clock is currently stagnant, it's time to make it tick. for this to happen we'll wrap our code within the "setInterval()" method and set the timer to 1000ms.

setInterval(() => {
    const date = new Date()
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();


    Displayhours.textContent = hours,
    Displayminutes.textContent = minutes,
    Displayseconds.textContent = seconds 
}, 1000);

Display of the clock ticking

Let's add the "AM/PM" suffix function we mentioned earlier.

function clockSuffix(hours) {
    if (hours < 12) {
        return 'AM';
    }
    return 'PM'
}

Invoke the function below within the "setInterval()" method.

suffix.textContent = clockSuffix(hours);

Our clock now got it "suffix" flower

It'll be a great display if the time has a leading '0' when it's a single digit. let's implement that.

function zeros (num) {
    if(num < 10) {
        return "0" + num;
    }
    return num;
}

Invoke the function below within the "setInterval()" method and append it to the Date Object variables created earlier.

hours = zeros(hours);
minutes = zeros(minutes);
seconds = zeros(seconds);

Leading zeros included.

By default, our clock is a 24-hour clock. our next and final implementation is to convert our clock to 12 hours.

function twelveHours(hours) {
    if (hours % 12 === 0 ) {
        return 12;
    }
    return hours % 12;
}

Call the function within the "setInterval()" method too.

hours = twelveHours(hours)

Final JavaScript Code

const Displayhours = document.querySelector('#hours');
const Displayminutes = document.querySelector('#minutes');
const Displayseconds = document.querySelector('#seconds');
const suffix = document.querySelector('#suffix');

setInterval(() => {
    const date = new Date()
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();

    suffix.textContent = clockSuffix(hours);

    hours = twelveHours(hours)

    hours = zeros(hours);
    minutes = zeros(minutes);
    seconds = zeros(seconds);

    Displayhours.textContent = hours,
    Displayminutes.textContent = minutes,
    Displayseconds.textContent = seconds 
}, 1000);

//suffix function
function clockSuffix(hours) {
    if (hours < 12) {
        return 'AM';
    }
    return 'PM'
}

//adding a leading zero if time is a single digit
function zeros (num) {
    if(num < 10) {
        return "0" + num;
    }
    return num;
}

//12-hours feature function
function twelveHours(hours) {
    if (hours % 12 === 0 ) {
        return 12;
    }
    return hours % 12;
}

Final project display

Conclusion

With this unambiguous step-by-step process of building a digital clock with vanilla JavaScript, you should have been able to solidify your knowledge using the Date Object.

This is a great small project that'll help you in your Javascript journey, feel free to include additional features and make it yours.

How to Build a Simple Digital Clock with HTML, CSS and JavaScript

Table of contents