Clock Exercise

[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]