The Clock Project using Javascript

With Javascript, there’s a lot ways of doing different things. The simpler way of doing things is usually the best way. So in class, we worked on this small project where we recreated a clock on a page where the page also changed colors in the background. Initially I had use javascript just to create the clock using the new date function, and then I was able to get the time from that. The thing I did differently this time around though was that I made use of the map function. With the map function I was able to add the zeros in the hours, minutes and seconds whenever time goes to single digits. What I took away from that was that the map function is useful to actually take something such as a value or digit and add it on to a function so it adds that value or digit in the function.

Another thing that I didn’t intially do in the project was the converting of time to RGB. I had no idea how this preview clock was changing colors either. After I realized that converting the time to RGB was pretty simple using an array and forEach function, I was able to get that the background could also be changed using the result of this conversion.

One last thing that I had initially on my project that I changed was the onload event. I had put it in my html page in my body tags for when to load the clock. After looking and watching the example done, I realized I was able to put onload straight into the Javascript and then load the entire clock and background change using one single big function called app.

There’s still a few little things that will take me some time of getting used to such as remembering to take advantage of a variable when using the queryselector to point to which part of your html you’re wanting to edit from javascript. For mine, I edited the body and span and used queryselector to tell javascript where to look for what I wanted to edit using a certain variable. All in all though, I think I learned quite a bit just from my revisions of this project. Hopefully I’ll be able to tweak it even more and add some of my own things to make this look even better. I’ll definitely keep you guys updated!