Extra 10-1 Convert the Countdown application to functions In this exercise, you’
ID: 3861276 • Letter: E
Question
Extra 10-1 Convert the Countdown application to functions In this exercise, you’ll change the Countdown application of chapter 7 so it uses functions. 1. Open the HTML and JavaScript files in this folder: exercises_extrach10countdown 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 that’s 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 you’re 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, you’ll change the Countdown application of chapter 7 so it uses functions. 7. Open the HTML and JavaScript files in this folder: exercises_extrach10countdown 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 that’s 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 you’re 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();
// 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
<!DOCTYPE html>
<html>
<head>
<title>Countdown To...</title>
<link type="text/css" rel="stylesheet" href="countdown.css">
<script type="text/javascript" src="countdown.js"></script>
</head>
<body>
<main>
<h1>Countdown To...</h1>
<label for="event">Event Name:</label>
<input type="text" name="event" id="event"><br>
<label for="date">Event Date:</label>
<input type="text" name="date" id="date"><br>
<input type="button" name="countdown" id="countdown" value="Countdown!">
<p id="message"> </p>
</main>
</body>
</html>
library_countdown.js
"use strict";
var clearMessage = function(messageNode) {
messageNode.nodeValue = " ";
};
var hasNoError = function(messageNode) {
return (messageNode.nodeValue === " ") ? true: false;
};
Explanation / Answer
index.html
<!DOCTYPE html>
<html>
<head>
<title>Countdown To...</title>
<link type="text/css" rel="stylesheet" href="countdown.css">
<!-- Task 4 Starts -->
<script type="text/javascript" src="library_countdown.js"></script>
<!-- Task 4 Ends -->
<script type="text/javascript" src="countdown.js"></script>
</head>
<body>
<main>
<h1>Countdown To...</h1>
<label for="event">Event Name:</label>
<input type="text" name="event" id="event"><br>
<label for="date">Event Date:</label>
<input type="text" name="date" id="date"><br>
<input type="button" name="countdown" id="countdown" value="Countdown!">
<p id="message"> </p>
</main>
</body>
</html>
countdown.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;
}
library_countdown.js
"use strict";
var $ = function (id) { return document.getElementById(id); };
var clearMessage = function (messageNode) {
messageNode.nodeValue = " ";
};
// check if both entries filled
var isFormFilled = function (event, dt, message) {
if (event.length === 0 || dt.length === 0) {
message.nodeValue = "Please enter both a name and a date.";
return false;
} else {
return true;
}
};
//convert due date string to Date object
var convertDate = function (dt,message) {
if (isValidDate(dt,message)) {
return new Date(dt);
}
};
var isValidDate = function (dt, message) {
//make sure due date string has slashes and a 4-digit year
if (isValidFormat(dt,message)) {
// make sure Date Object is valid
var date = new Date(dt);
console.log("1");
if (date == "Invalid Date") {
message.nodeValue = "Please enter the date in MM/DD/YYYY format.";
console.log("2");
return false;
} else {
console.log("3");
return true;
}
}else{
return false;
}
};
//make sure due date string has slashes and a 4-digit year
var isValidFormat = function (dt,message) {
if (dt.indexOf("/") === -1) {
message.nodeValue = "Please enter the date in MM/DD/YYYY format.";
return false;
}
var year = dt.substring(dt.length - 4);
if (isNaN(year)) {
message.nodeValue = "Please enter the date in MM/DD/YYYY format.";
return false;
}
return true;
};
var hasNoError = function (messageNode) {
return (messageNode.nodeValue === " ") ? true : false;
};
//calculate days difference
var calculateDifference = function (date, today) {
var * 60 * 60 * 1000; // hours * minutes * seconds * milliseconds
var days = (date.getTime() - today.getTime()) / oneDay;
days = Math.ceil(days);
return days;
};
var displayDaysDifference = function (event, days, message) {
//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 + "!";
}
}
countdown.js
"use strict";
var calculateDays = function() {
var event = $("event").value;
var dt = $("date").value;
var message = $("message").firstChild;
var date, days, today;
// clear previous message
clearMessage(message);
//make sure task and due date are entered and correct
// check if both entries filled
if(isFormFilled(event,dt,message)){
//convert due date string to Date object
date = convertDate(dt,message);
}
// if no error messages, calculate and display days until event
if (hasNoError(message)) {
//calculate days
today = new Date();
days = calculateDifference(date,today,message);
displayDaysDifference(event,days,message);
}
};
window.onload = function() {
$("countdown").onclick = calculateDays;
$("event").focus();
};
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.