Building a CSS & DOM Clock

Warning: It’s not as easy as you may think.

Rachel Lum
6 min readJun 29, 2019

Giving Frontend Web Development the Credit It Deserves

Hand Clock Demo

Frontend web development can easily be misinterpreted as “easy”, or the “paintbrush” that makes websites look pretty. I am hoping to break the stigma and reveal that there is a lot more to frontend web development than what people initially assume (myself included).

For this particular code challenge, I was asked to build a CSS & DOM Clock, which implies building out the HTML layout, CSS, and JavaScript to create an accurate hand clock.

Note that there are many ways to solve this problem. This is simply a walkthrough of my own thought process and solution. I found this frontend web development code challenge from Pramp.com. It is suggested to be solved in about 45 minutes. I have linked my CodePen at the bottom of this article so you can see the full solution, but resist opening it until you have tried it on your own.

Breaking it Down

As I mentioned, building even the most basic functioning hand clock is not as easy as it seems. Take a moment to think of all of the components required to make the clock work.

--

--

Rachel Lum

Full stack web developer with passions for dance, fitness, health, math, communication, and technology.