JavaScript

Client-Side with HTML & JavaScript !

Check out the CLOCK

This code is functional but can definitely be improved. You will do so as exercises today.

Using only what you've seen in Ch14-16 *and* what Dr.Dale has _allowed_ in addition
(see Ch14&15 Explore! for reminder),
do the following.

WORKING IN ORDER ...

  1. remove all script tags from the body of the page instead, add to your body TAG the initClock() function FIRST as soon as page loads. Why? do this? So that all the page tags, id's , & classes are set up before any JavaScript runs 
                          <body onload="initClock()">

    Hey! This one has been done for you! Go on to #2...

  2. a) write a new function which contains only those parts of the initClock() function which cause the hour, minute, and second hands to be moved. Should be a SUBSET of code found in initClock().

    b) add an element to your html body which onclick will call your new function. (all hands of clock should update every time you click this element)

  3. class & id names are excessively long. Modify all of them so that they are SHORTER but STILL MEANINGFUL. Be very careful doing this and keep checking that you haven't broken anything.
  4. Add a 'center' to the clock to cover up the part where clock ends overlap as they turn and look 'messy' You may find it helpful to know that border-radius: 50% 50% is another way to makes things..... round.

    Center not on top?   Try forcing reload of cached css

  5. Move all css to a separate file and link into your html page.
  6. write a new function which implements a shorter version of document.getElementById (discussed and shown in your text)
  7. consider where and in what way(s) the clock and it's parts might benefit from using an array Modify your code accordingly. Try to find a use, and reason to practice, at least one reasonable array being used when done.

    If you like, you can make this an array of elements that are seen in some other html element you add to the page and which does not interact with the clock. Should be in some way related however. (Perhaps clickable to change colors or something on the clock?)

  8. consider where and in what way(s) the clock and it's parts might benefit from being a class rather than stand alone elements. Modify your code accordingly. Try to find a use, and reason to practice, at least one reasonable class being used when done.

    If you like, you can make this a class that is seen in some other html element you add to the page and which does not interact with the clock. Should be in some way related however. Be creative!

Before you leave send an email to me which includes your source files, as an attached tar - file 

  Subject: 284- clock, inclass
In the body of your email indicate
  1. the number of the LAST instructions you got working.
  2. If you are in the middle of something, don't delete but instead...
    comment out whatever is still not-functional and include a note IN EMAIL to tell me where you are and what you *think* might still be wrong with it. Include a line number in your source

By ?????? (aka start of class next time, ie, 9:30am Apr 5)
lkd send an email to me which includes your source files, as an attached tar - file 

  Subject: 284- clock, completed
In the body of your email indicate
    how you addressed 7 & 8 above in particular!