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. });

******************************************

clock.css:

body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 400px; border: 3px solid blue; padding: 0 2em 1em; } h1 { color: blue; } div { margin-bottom: 1em; } label { display: inline-block; width: 11em; text-align: right; } fieldset { margin-bottom: 1em; } #seconds { margin-right: 0.5em; }

*********************************************

index.html:

Digital clock

Clock

: :

*****************

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: 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\clock \ 2. In the JavaScript file, note that four functions are supplied. The $0 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