JavaScript 30 – Day 2: CSS + JS Clock

Welcome to my recap of Day 2 of the free JavaScript 30 online video course by Wes Bos. In case you really have not yet heard of the course, quickly head over to it and get started right away! 🙂

Please refer to the JavaScript 30 archive for all recap posts.

Objective

On Day 2, the task is to build a realistic clock powered by vanilla JavaScript and CSS only.

The provided starter files include not more than a single HTML file that again contains the markup for the clock as well as some inline CSS that takes care of the styling. In my fork of the JavaScript 30 repository, I moved the latter into a separate CSS file, though.

I stopped the video right after the outline of the clock functionality.

Conception

The JavaScript part is pretty straightforward:

• use a Date object to read the current time from;
• adapt (i.e., rotate) the clock hands accordingly.

Implementation

When I first saw the provided CSS code, I wasn’t too happy with how the hands were set up. That’s why I changed a couple things:

.clock-face {
    position: relative;
    width: 100%;
    height: 100%;
}

.hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    height: 50%;
    transition: transform .05s cubic-bezier(0, 2, .5, 1);
    transform-origin: 50% 100%;
}

.hand::before {
    content: '';
    display: block;
    position: relative;
    bottom: 0;
    border-radius: 42.5%;
    border: 3px solid black;
    height: 100%;
}

.hour-hand {
    height: 37.5%;
}

.second-hand::before {
    border: 2px solid red;
}

All hands are now invisible elements that just provide a spatial reference for their individual ::before pseudo element, which is styled and thus makes the hand visible. Furthermore, I tweaked the hands a little: rounded corners, a shorter hour hand, and a slim and red second hand. Also, now there is no initial rotation of 90 degrees necessary anymore.

And this is how it looks like:

Finally, the JavaScript code is as simple as this:

const hourHand = document.querySelector( '.hour-hand' );
const minHand = document.querySelector( '.min-hand' );
const secondHand = document.querySelector( '.second-hand' );

function setHand( hand, degrees ) {
    hand.style.transform = `rotate(${degrees}deg)`;
}

setInterval( () => {
    const date = new Date();

    setHand( hourHand, 30 * date.getHours() );
    setHand( minHand, 6 * date.getMinutes() );
    setHand( secondHand, 6 * date.getSeconds() );
}, 1000 );

Refinement

Besides thinking about getting rid of that funky swirl when a hand transitions to 0 degrees, I didn’t do anything at all to my code.

Live Demo

Want to see this in action? Well, here is a live demo. 🙂

Retrospection

Day 2 was easy, and I wasted spent way more time with tweaking the CSS than thinking about and implementing the functionality of the clock.

Still it was fun to do! 🙂

And You?

JavaScript 30 is free! So, unless you already did this on your own, what’s your reason not to? 🙂