Short 7-1 Improve the validation of the Countdown app

This exercise has you make a modification to the way the Countdown application in chapter 7 validates the date entered by the user. When youre done, this application should only allow dates with two slashes. Estimated time: 10-15 minutes.

1. Open the HTML and JavaScript files in this folder:

exercises_short\ch07\countdown\

2. Start the application, enter a date that has only one slash (as above), and note that the application accepts the date.

3. In the JavaScript file, find the if statement that checks whether the date string has slashes. Note that its only checking whether there is one or more slash. Then, modify the code so it checks to make sure that the date entry has two slashes. If not, display the same error message as shown above.

To do this, you need to store the result of the indexOf method and use it to first check whether a first slash was found and then use it as the starting point for trying to find a second slash.

Here is the javascript:

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

var calculateDays = function() { var event = $("event").value; var dt = $("date").value; var message = $("message").firstChild; //make sure task and due date are entered if (event.length == 0 || dt.length == 0) { message.nodeValue = "Please enter both a name and a date."; return; } //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."; return; } var year = dt.substring(dt.length - 4); if (isNaN(year)) { message.nodeValue = "Please enter the date in MM/DD/YYYY format."; return; } //convert due date string to Date object and make sure date is valid var date = new Date(dt); if (date == "Invalid Date") { message.nodeValue = "Please enter the date in MM/DD/YYYY format."; return; } //calculate days var today = new Date(); var oneDay = 24*60*60*1000; // hours * minutes * seconds * milliseconds var days = ( date.getTime() - today.getTime() ) / oneDay; days = Math.ceil(days); //create and display message if (days == 0) { message.nodeValue = "Hooray! Today is ".concat(event.toLowerCase(), "! (", date.toDateString(), ")"); } if (days < 0) { //capitalize event event = event.substring(0,1).toUpperCase() + event.substring(1); message.nodeValue = event.concat(" happened ", Math.abs(days), " day(s) ago. (", date.toDateString(), ")"); } if (days > 0) { message.nodeValue = days.toString().concat(" day(s) until ", event.toLowerCase(), "! (", date.toDateString(), ")"); } };

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

HTML:

Countdown To...

Event Name: Event Date:

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