CSS and JavaScript Clock Project

Hosted Project

https://js-beginners.github.io/javascript30-css-and-js-clock/

GitHub Source Files

https://github.com/JS-Beginners/javascript30-css-and-js-clock

Project Objective

The objective of this JavaScript Project is to wire up an analogue JavaScript Clock that mainly uses CSS and JavaScript.

JavaScript Used

• Date() constructor
• JavaScript core

My Personalize Summary

Level of Difficulty

In my opinion, this project is more about knowing how to use CSS than using core JavaScript itself. Therefore, I wouldn't exactly call it a beginner JavaScript project. You also need to know how to use a bit of math to transform and place your second, hour, and minute hands for your clock. I found the code easy to read but the project hard in practice to implement. In fact, just like I found in the BlueLime JavaScript Analogue Clock Project, although I could follow the “why” behind the syntax of this project, it would take me quite a long time to implement the code myself. So again, I used this project more as a code along than a do-it-yourself and I have it as a reference if I ever have to create something like this. As the solution was presented, I copied the code and then I studied it.

New Things Learned or Refreshed

I was refreshed on the various ways you can manipulate CSS to make the simplest of code come together in a full fledged project.

Time to Code

Since I simply followed along on this project, it took me about an hour to listen, watch, and code out the solution.

Lines of Code

This project uses around 100 lines of code, including white space and code comments. This project is different in that all of the CSS, JS, and HTML is in one index.html file.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the JS content in the index.html file (Keep the CSS if you only want to practice JS to make the hands on the clock move).
3. Implement the JavaScript code in your own index.html file.
4. If you think you need to see a video solution first, be sure to pick up Wes's FREE JavaScript30 course by following the link below.
5. Add a link to your finished project below!

What You Should See

1. Visit the hosted github page to see this JavaScript Analogue Clock in action.
2. You should use only CSS and JS to code this project.
3. Once completed, your clock should display a working analogue time in your local time zone.

Need to see the video solution for this project?

Get Wes Bos' JavaScript30 course now!