Linking JS File

Go to the tny_july.html file in the code editor. Directly above the closing tag, insert a script element that links to the tny_timer.js file. Defer the loading of the script file until the web page loads.

JavaScript Browser Relations

Go to the tny_timer.js file in the code editor. At the top of the file, insert a statement to tell the browser to apply strict usage of the JavaScript code in the file.

Javascript Functions

Directly above the nextJuly4() function, insert a function named showClock() that has no parameters. Within the showClock() function, complete Steps below.

• Declare a variable named thisDay that stores a Date object containing the date May 19, 2018 at 9:31:27 a.m.
• Declare a variable named localDate that contains the text of the date from the thisDay variable using local conventions. Declare another variable named localTimethat contains the text of the time stored in the thisDay variable using local conventions.
• Within the inner HTML of the page element with the ID currentTime, write the following code datetime where date and time are the values of the localDate and localTime variables.
• Hector has supplied you with a function named nextJuly4() that returns the date of the next 4th of July. Call the nextJuly4() function using thisDay as the parameter value and store the date returned by the function in the j4Datevariable.
• The countdown clock should count down to 9 p.m. on the 4th of July. Apply the setHours() method to the j4Date variable to change the hours value to 9 p.m. (Hint: Express the value for 9 p.m. in 24-hour time.)
• Create variables named days, hrs, mins, and secscontaining the days, hours, minutes, and seconds until 9 p.m. on the next 4th of July. (Hint: Use the code from the tny_script.js file in the tutorial case as a guide for calculating these variable values.)
• Change the text content of the elements with the IDs dLeft, hLeft, mLeft, and sLeft to the values of the days, hrs, mins, and secs variables rounded down to the next lowest integer.

JavaScript Commands

Directly after the opening comment section in the file, insert a command to call the showClock() function.

After the command that calls the showClock() function, insert a command that runs the showClock() function every second.

Document your work in this script file with comments.

-----HTML FILE: tny_july.html----

----JS FILE: tny_time.js----

/*

New Perspectives on HTML5 and CSS3, 7th Edition

C9 T4

*/

function nextJuly4(currentDate) {

var cYear = currentDate.getFullYear();

var jDate = new Date("July 4, 2018");

jDate.setFullYear(cYear);

if ((jDate - currentDate) < 0) jDate.setFullYear(cYear + 1);

return jDate;

}