Fun With JavaScript!

One of the things that made me excited to learn JavaScript was seeing some of the cool things I could create with it, like this clock that changes the page’s background based on what time it is.

The Hex Clock takes the current time (example: 2:15:09), turns those numbers into a hexadecimal value (#021509), and uses that value to change the background color of the page.

JavaScript has a built-in Date class with methods like getMinutes(), which I used to store the current hours, minutes, and seconds in 3 variables. Once I got those values, I concatenated them into a single hexadecimal value and, in jQuery, set the body’s background color to that value.

The background and time only updated after a refresh though. It took a lot of Googling before I figured out how to make the function repeat on its own, indefinitely.

Then, I decided that I wanted to try creating an RGB clock too. I’ve never seen someone else build one, so I have nothing to compare to that will say that my code is “right” or “wrong.” But, visually, it works like I imagined it would.

The biggest challenge here was figuring out where I would get my RGB values from. I knew that I wanted R to be hours, G to be minutes, and B to be seconds. After some playing around with the variables, I decided that since 24 * 10 was close enough to 255, I could multiply the current h value by 10 to get the R value. For G and B, I multiplied the m and s values by 4.25 (60 * 4.25 = 255). And, voila. Lots more color changing in the background.

The only gripe I have with what I produced is that, aside from the hours, you can’t really tell how the RGB values relate just by looking at the final product. Still, I’m pretty pleased with myself.

Now, if only I could think of more ways to test my skills…

Advertisements

5 thoughts on “Fun With JavaScript!

  1. Hey, I just wanted to say that I’ve been reading some of your blog posts and I’m enjoying watching your journey! I’m definitely a little behind you (currently tackling some ruby basics before I start at General Assembly) but I’m going to try and attempt this idea when I finally get to this point with Javascript! Good work, keep doing what your doing 🙂

    Like

  2. Hey, I just wanted to say that I’ve been reading some of your blog posts and I’m enjoying watching your journey! I’m definitely a little behind you (currently tackling some ruby basics before I start at General Assembly) but I’m going to try and attempt this idea when I finally get to this point with Javascript! Good work, keep doing what your doing 🙂

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s