We are all familiar with the analog clocks mounted on the walls in our houses.
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.
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
Moreover, your HTML must only have the following markup in the actual program:
All the other required elements inside
.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.