Extra 10-1 Convert the Countdown application to functions In this exercise, youll change the Countdown application of chapter 7 so it uses functions. 1. Open the HTML and JavaScript files in this folder: exercises_extra\ch10\countdown\ Note that there are two JavaScript files for this application: the main JavaScript file (countdown.js) and the start of a library file (library_countdown.js). 2. In the countdown, js file, note that three functions are supplied. The $ function. The calculateDays function that contains all of the code for the application. And an onload event handler that attaches the calculateDays function to the click event of the Countdown button and sets the focus on the first field. This is the original code for this chapter 7 application. 3. In the library_countdown.js file, note that two functions are supplied. The clearMessage function clears the message from the node that's passed to it. The hasNoError function returns true or false depending on whether the node thats passed to it is set to an empty space. 4. In the index.html file, add the script tag for this new library file. Be sure the script tags are in the correct order so the countdown.js file can use the functions in the library_countdown.js file. 5. Add the other functions that are needed for this application to the library file. To do that, move the code from the main JavaScript file to the library and adjust as needed. When youre through, the library should include separate functions for (1) making sure both entries have been made, (2) testing the validity of just the date entry, (3) calculating the number of days until the event, and (4) displaying the number of days until the event. 6. Modify the countdown.js file so it uses the functions in the library to get the correct results. In this exercise, youll change the Countdown application of chapter 7 so it uses functions. 7. Open the HTML and JavaScript files in this folder: exercises_extra\ch10\countdown\ Note that there are two JavaScript files for this application: the main JavaScript file (countdown.js) and the start of a library file (library_countdown.js). 8. In the countdown, js file, note that three functions are supplied. The $ function. The calculateDays function that contains all of the code for the application. And an onload event handler that attaches the calculateDays function to the click event of the Countdown button and sets the focus on the first field. This is the original code for this chapter 7 application. 9. In the library_countdown.js file, note that two functions are supplied. The clearMessage function clears the message from the node that's passed to it. The hasNoError function returns true or false depending on whether the node thats passed to it is set to an empty space. 10. In the index.html file, add the script tag for this new library file. Be sure the script tags are in the correct order so the countdown.js file can use the functions in the library_countdown.js file. 11. Add the other functions that are needed for this application to the library file. To do that, move the code from the main JavaScript file to the library and adjust as needed. When youre through, the library should include separate functions for (1) making sure both entries have been made, (2) testing the validity of just the date entry, (3) calculating the number of days until the event, and (4) displaying the number of days until the event. 12. Modify the countdown.js file so it uses the functions in the library to get the correct results.

coutdown.css

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-color: white; width: 510px; margin: 0 auto; border: 3px solid blue; padding: 0 2em 1em; } h1 { font-size: 150%; color: blue; margin-bottom: .5em; } label { float: left; width: 8em; } input { width: 20em; margin-left: 1em; margin-bottom: 1em; } #message { font-weight: bold; color: red; }

countdown.js

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

var calculateDays = function() { var event = $("event").value; var dt = $("date").value; var message = $("message").firstChild; var date, days, today, oneDay; // clear previous message message.nodeValue = " "; //make sure task and due date are entered and correct if (event.length === 0 || dt.length === 0) { message.nodeValue = "Please enter both a name and a date."; } else { //make sure due date string has slashes and a 4-digit year if (dt.indexOf("/") === -1) { message.nodeValue = "Please enter the date in MM/DD/YYYY format."; } var year = dt.substring(dt.length - 4); if (isNaN(year)) { message.nodeValue = "Please enter the date in MM/DD/YYYY format."; } //convert due date string to Date object and make sure date is valid date = new Date(dt); if (date === "Invalid Date") { message.nodeValue = "Please enter the date in MM/DD/YYYY format."; } } // if no error messages, calculate and display days until event if (message.nodeValue === " ") {

//calculate days today = new Date(); oneDay = 24*60*60*1000; // hours * minutes * seconds * milliseconds days = ( date.getTime() - today.getTime() ) / oneDay; days = Math.ceil(days);

//create and display message if (days === 0) { message.nodeValue = "Hooray! Today is " + event + "!"; } if (days < 0) { event = event.substring(0,1).toUpperCase() + event.substring(1); // capitalize event message.nodeValue = event + " happened " + Math.abs(days) + " day(s) ago."; } if (days > 0) { message.nodeValue = days + " day(s) until " + event + "!"; } } };

window.onload = function() { $("countdown").onclick = calculateDays; $("event").focus(); };

indext.html

Countdown To...

Event Name: Event Date:

library_countdown.js

"use strict";

var clearMessage = function(messageNode) { messageNode.nodeValue = " "; };

var hasNoError = function(messageNode) { return (messageNode.nodeValue === " ") ? true: false; };