Digital clock

Clock

:

:

//Clock.js

"use strict";

const $ = selector => document.querySelector(selector);

const padSingleDigit = num => num.toString().padStart(2, "0");

const displayCurrentTime = () => {

};

document.addEventListener("DOMContentLoaded", () => {

// 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.

});

17 Extra exercises for Murach's JavaScript and jQuery (4 th Edition) Extra 7-1 Develop the Clock application In this exercise, you'll create an application that displays the current time in hours, minutes, and seconds. The display should use a 12-hour clock and indicate whether it's AM or PM. The application looks like this: Digital clock To convert the computer's 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/PM value to "PM". Also, be aware that the hours value for midnight is 0 . 1. Open the application in this folder: exercises_extra\ch07\alock \ 2. In the JavaScript file, note that four functions are supplied. The $() function that you can use to select elements. The padSingleDigit() function, that adds a leading zero to single digits using a string method that you'll learn about in chapter 12. The start of a displayCurrentTime() function. And the start of a DOMContentLoaded 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 DOMContentLoaded event handler, code a timer that calls the displayCurrentTime() function at 1 second intervals. Also, make sure that the current time shows as soon as the page loads