
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
- Download the source code from the github repository above.
- Delete the contents of the
clock.js
file. - Implement the JavaScript code in your own
clock.js file.
- 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 .
- Add a link to your finished project below!
What You Should See
- Visit the hosted github page to see this JavaScript Analogue Clock in action.
- You should use the JavaScript Canvas API to code this project.
- Once completed, your clock should display a working analogue time in your local time zone.
This list is absolutely beautiful. I will take it up and do the projects one after the other. Thanks so much