Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

Project: Analog Clock

Project 1

Objective

Create a running analog clock using HTML, CSS and JavaScript.

Description

We are all familiar with the analog clocks mounted on the walls in our houses.

Photo by Dmitry Sidorov: https://www.pexels.com/photo/close-up-shot-of-a-white-analog-clock-7016218/

In this project, your job is to create a simple analog clock that doesn't run on lithium batteries, but on the batteries of JavaScript.

It should show the current time on your computer machine and tick just like a real analog clock.

Isn't this interesting?

Below are a couple of points that your clock program must meet:

  • There should be markings around the clock, also known as graduations, with the main ones larger than the minor ones.
  • The clock should have three hands — one for seconds, one for minutes and one for hours. All three must have differing lengths, with the seconds hand being the longest and the hours hand being the shortest (as typical).
  • The seconds hand must be red and thinner than the rest of the hands.
  • The seconds hand must tick step-by-step, not in a fluid motion.

Though we've not made it a requirement that there must be hours marked on the clock, if you wish to, you could add this feature to the clock as well.

Here's an example of how the end result of your program should look:

Obviously, the clock's design can be different on your end. The only thing that you ought to make sure in your program is that the clock shows the exact time on your computer, and has the features as listed above.

That's it.

Your program must be built around an object-oriented style, NOT a procedural style.

In addition to this, you must NOT use any ECMAScript 6 feature in your code, such as the class keyword or the const keyword.

Moreover, your HTML must only have the following markup in the actual program:

<div class="clock"></div>

All the other required elements inside .clock should be added automatically. There should be no need to explicitly invoke anything in the JavaScript program in order to set up the clock — the existence of the element .clock (in the HTML) must itself govern the creation and setup of a clock.

For e.g. if there are two .clock elements, then there must be a clock for each of them.