Extra 7-1 Develop the Clock

application

In this exercise, youll create an application that displays the current time in

hours, minutes, and seconds. The display should use a 12-

hour clock and indicate

whether its AM or PM. The application looks like this:

To convert the computers time from a 24-

hour clock to a 12-

hour clock, first

check to see if the hours value is greater than 12. If so, subtract 12 from the hours

value and set the AM/P

M value to PM. Also, be aware that the hours value for

midnight is 0.

1.

Open the HTML and JavaScript files in this

folder:

exercises_extra\ch07\clock\

2.

In the JavaScript file, note that four functions are supplied. The $ function.

The start of a displayCurr

entTime() function. The padSingleDigit() function

that adds a leading zero to single digits. And the start of an onload event

handler.

3.

In the displayCurrentTime() function, add code that uses the Date object to

determine the current hour, minute, and second. Convert these values to a 12-

hour clock, determine the AM/PM value, and display these values in the

appropriate span

tags.

4.

In the onload event handler, code a timer that calls the displayCurrentTime()

function at 1 second intervals. Also, make sure tha

t the current time shows as

soon as the page

loads.

Digital clock

Clock

: :

"use strict"; var $ = function(id) { return document.getElementById(id); };

var displayCurrentTime = function() {

};

var padSingleDigit = function(num) { if (num < 10) { return "0" + num; } else { return num; } };

window.onload = function() { // set initial clock display and then set interval timer to display // new time every second. Don't store timer object because it // won't be needed - clock will just run. };