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

Designing the HTML

The first step in literally any program/application to be created for the web is to design its HTML. If the HTML is designed well, all other aspects of the program's development become peaches and cream.

So let's start designing the HTML for our analog clock.

Step one is to design the hierarchy of elements in the clock, and in the meanwhile come up with good and effective names for those elements.

Following the intuitive BEM naming convention, here are the components of our analog clock:

  • .clock — represents the whole clock. Once designed, this can serve as the frame of the clock.
  • .clock_graduation — represents a marking (also known as a graduation) on the clock.
  • .clock_graduation--large — represents a major marking on the clock.
  • .clock_hand — represents a hand of the clock. In total, there will be three .clock_hand elements in .clock.
  • .clock_hand--seconds — represents the seconds hand.
  • .clock_hand--minutes — represents the minutes hand.
  • .clock_hand--hours — represents the hours hand.
  • .clock_hand-nut represents the hand nut that holds all the hands of the clock together.

Once done, our analog clock will have the following HTML:

<div class="clock">
   <div class="clock_graduation--large"></div>
   <div class="clock_graduation"></div>
   <div class="clock_graduation"></div>
   <div class="clock_graduation"></div>
   <div class="clock_graduation"></div>
   <!--The HTML above repeats 11 times-->

   <div class="clock_hand clock_hand--hours"></div>
   <div class="clock_hand clock_hand--minutes"></div>
   <div class="clock_hand clock_hand--seconds"></div>
   <div class="clock_hand-nut"></div>
</div>

Now let's think about the CSS of each of the elements in this markup.