Vanilla JavaScript Projects

Clock Exercise

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Vanilla JavaScript Projects

Check out a free preview of the full Vanilla JavaScript Projects course

The "Clock Exercise" Lesson is part of the full, Vanilla JavaScript Projects course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to create a randomly moving clock. The paragraph element in the starter file will hold the current time. Random styles should be applied for the top, left, and color properties every three seconds.

Preview
Close

Transcript from the "Clock Exercise" Lesson

[00:00:00]
>> That brings us to our next quick win, which is to build a random clock. Not as random as this gif, which I found on the interwebs, but can we all take a moment to appreciate that this happened at some point in human history? So we're gonna make something slightly less random, but with a little randomness going on.

[00:00:21]
So you may have seen those screen savers where you've got like, the time showing up and then it shows up somewhere else, and then it shows up somewhere else. And then it shows up somewhere else. And it's like the most exciting screensaver from 1993. Like, yeah. Well, we can do it in 2023 with just a little bit of JavaScript.

[00:00:47]
So, okay, in this, I'm sorry, clock index.html, there is another little pre-scaffolded webpage for you. That is going to do nothing because we haven't built it yet. But the idea is we're gonna turn this beautiful blank field into the 90 screensaver of our dreams. By using our friend math.random.

[00:01:26]
So this is another fun little thing in the browser that we have. Math is this built-in object in JavaScript that has all kinds of fun tricks. And one of the things it can do, in addition to giving you constants, like pi-ish, [LAUGH] is that we can call math.random and get a random number between 0 and 1.

[00:01:54]
So we can use that, and if we call it again, we get a different one, and we call it again, and we get a different one. We can use that to essentially pick random values and then scale them to a range that we're interested in, of values that we care about.

[00:02:11]
So in this, so it's actually clock.index.html. So, once you kind of get in download, we've got some. We've got basically the same kind of general setup the same style sheet and everything. We've got a super exciting web page with like, basically nothing in it, except there is this clock div.

[00:02:37]
And inside of it, there is a little p element with an id. I wonder what that could be used for. So we're going to basically grab that p element. Use our magical browser powers to get the current time as a string cuz not every person can immediately calculate from milliseconds since the epoch.

[00:02:57]
[LAUGH] And then we're going to set the text in that paragraph to this time string. And if you want to have a little fun with it, randomly position it and color it by setting a style attribute with values for things like color. And top and left, which are offsets basically from, and this is a positioned element, so it's gonna be offsets in this little box that we've got.

[00:03:33]
And I want that to update every 3 seconds, because I don't need to know every second of time, but every 3 seconds is definitely an appropriate and normal interval of time to want, right? So this is your mission, should you choose to accept it, is to make a super awesomely old school clock screensaver.

[00:03:54]
[LAUGH]

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now