Analogue Clock Project

Hosted Project

https://js-beginners.github.io/analog-clock/

GitHub Source Files

https://github.com/JS-Beginners/analog-clock

Project Objective

The objective of this JavaScript Project is to wire up analogue JavaScript Clock.

JavaScript Used

• JavaScript Canvas Web API

My Personalize Summary

Level of Difficulty

This project is more about knowing how to manipulate the JavaScript Canvas Web API than using core JavaScript itself.

Therefore, I wouldn't exactly call it a beginner project.

I found code easy to read but the project hard in practice to implement.

In fact, although I can follow the “why” behind the syntax of this project, it would take me quite a long time to implement the code myself.

I used this project more as a code along than a do-it-yourself.

As the solution was presented, I copied the code and then studied it.

If I had to write this code myself from scratch, I'd have a very difficult time.

You have to not only know how to use the Canvas API, but also how to use math to manipulate the positioning of many elements in the project.

For example, here is the loop used to position all of the numbers on the clock:

 for(num=1; num < 13; num++){
 
      ctx.rotate(ang);
 
      ctx.translate(0, -radius*0.85);
 
      ctx.rotate(-ang);
 
      ctx.fillText(num.toString(), 0, 0);
 
      ctx.rotate(ang);
 
      ctx.translate(0, radius*0.85);
 
      ctx.rotate(-ang);
 
 } 

New Things Learned or Refreshed

I was refreshed on the use of the JavaScript Canvas API.

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.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the clock.js file.
3. Implement the JavaScript code in your own clock.js file.
4. If you think you need to see a video solution first, be sure to pick up John's Bluelime's 27 JavaScript Projects Beginner Course .
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 the JavaScript Canvas API 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 Bluelime's JavaScript for Beginners: Create 27 Projects from Scratch Course Now!