Skip to main content Accessibility Feedback

A vanilla JavaScript clock

This week, I’m sharing topics from my next pocket guide: Vanilla JS Web Apps.

Let’s take what we learned over the last few days and use it to build a clock with vanilla JavaScript.

The Setup #

First, we’ll pull in our render() function.

var render = function (template, node) {
    if (!node) return;
    node.innerHTML = (typeof template === 'function' ? template() : template);
    var event = new CustomEvent('elementRenders', {
        bubbles: true
    });
    node.dispatchEvent(event);
    return node;
};

We’ll also create an empty <div> with the ID #clock.

<div id="clock"></div>

Now we’re ready to build our clock!

Setting the time #

When the page loads, we’ll render the current time using new Date() to generate a time string, and toLocaleTimeString() to convert it to the user’s local time.

We’ll inject it with the render() function.

render('<h1>The time is ' + new Date().toLocaleTimeString() + '</h1>', document.querySelector('#clock'));

Here’s a demo.

Updating the time #

That’s a great start, but we want the time to automatically update every second. To do that, we’ll use setInterval to re-render our content every 1000 milliseconds.

render('<h1>The time is ' + new Date().toLocaleTimeString() + '</h1>', document.querySelector('#clock'));

window.setInterval(function () {
    render('<h1>The time is ' + new Date().toLocaleTimeString() + '</h1>', document.querySelector('#clock'));
}, 1000);

Here’s our working clock.

Cleaning things up #

Right now, we’re repeating ourself by running the same render() code in two different spots.

To keep our code more DRY (Don’t Repeat Yourself), we should move that to a function we can call as needed.

var tick = function () {
    render('<h1>The time is ' + new Date().toLocaleTimeString() + '</h1>', document.querySelector('#clock'));
};

tick();
window.setInterval(tick, 1000);

And here’s our completed projected.

If you’ve already purchased the complete set of pocket guides, you’ll get “Vanilla JS Web Apps” as a free update when it comes out.

And if you haven’t, now’s the time to buy! The price will go up when the guide launches.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips