Java Script Index.html My Account Profile My Account Profile E-Mail: Mobile phone: ZIP Code: Date of Birth: Profile.html My Account Profile $(document).ready( function() { //

Java Script

Index.html

         
 
My Account Profile
 E-Mail:    Mobile phone:    ZIP Code:    Date of Birth:     
 

Profile.html

         
 
My Account Profile
 E-Mail:   Mobile phone:   ZIP Code:   Date of Birth:    
 

Profile.css

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-color: white; width: 850px; margin: 0 auto; border: 3px solid blue; padding: 0 2em 1em; } h1 { font-size: 150%; color: blue; margin-bottom: .5em; } h2 { font-size: 120%; margin-bottom: .25em; } label { float: left; width: 9em; } input, select { width: 15em; margin-bottom: 1em; } span { color: red; } .profile span { color: black; } .profile input { margin-top: 1em; }

profile.js

"use strict"; $(document).ready(function(){ var isDate = function(text) { if( ! /^[01]?\d\/[0-3]\d\/\d{4}$/.test(text) ) return false; var index1 = text.indexOf( "/" ); var index2 = text.indexOf( "/", index1 + 1 ); var month = parseInt( text.substring( 0, index1 ) ); var day = parseInt( text.substring( index1 + 1, index2 ) ); if( month  12 ) { return false; } //if( day > 31 ) { return false; } else { switch( month ) { case 2: if ( day > 28 ) { return false; } // doesn't handle leap year break; case 4: case 6: case 9: case 11: if ( day > 30 ) { return false; } break; default: if ( day > 31 ) { return false; } break; } } return true; }; $( "#save" ).click(function() { $("span").text(""); // clear any previous error messages var isValid = true; // initialize isValid flag var email = $("#email").val(); var phone = $("#phone").val(); var zip = $("#zip").val(); var dob = $("#dob").val(); if ( email === "" || !email.match(/^[\w\.\-]+@[\w\.\-]+\.[a-zA-Z]+$/) ) { isValid = false; $( "#email" ).next().text("Please enter a valid email."); } if ( phone === "" || !phone.match(/^\d{3}-\d{3}-\d{4}$/) ) { isValid = false; $( "#phone" ).next().text( "Please enter a phone number in NNN-NNN-NNNN format."); } if ( zip === "" || !zip.match(/^\d{5}(-\d{4})?$/) ) { isValid = false; $( "#zip" ).next().text("Please enter a valid zip code."); } if ( dob === "" || !isDate(dob) ) { isValid = false; $( "#dob" ).next().text( "Please enter a valid date in MM/DD/YYYY format."); } if ( isValid ) { // code that saves profile info goes here sessionStorage.email = email; sessionStorage.phone = phone; sessionStorage.zip = zip; sessionStorage.dob = dob; // go to profile page location.href = "profile.html"; } $("#email").focus(); }); // set focus on initial load $("#email").focus(); });

Session Stolage aid displays It TIKe lS My Account Profle ? @locanost8383/profile/profilehtru My Account Profile E-Mail Mobile phone: 555-123-4567 ZIP Code Date of Birth 12/09/1906 grace@yahoo.com 12345 Back 1. Open the HTML and JavaScript files in this folder: exercises_extra\ch15\profile\ 2. In the JavaScript file (profile.js), find the code in the handler for the click event of the Save button that validates the user entries. Then, find the if statement that checks the value of the isValid variable 3. Add code to the if statement that saves the values in the email, phone, zip, and dob variables to session storage. Then, add code that uses the location object to navigate to the profile html file 4. In the profile.html file, find the embedded JavaScript in the head element of the page. Note that it contains the jQuery ready event handler and a handler for the click event of the Back button. 5. In the ready event handler, add code that retrieves the profile information from session storage and displays it in the span elements whose id attributes are "email", "phone", "zip", and "dob". Use the jQuery text) method of the span elements to do this. 6. In the handler for the click event of the Back button, add code that uses the history object to go back to the previous page 7. Run the application, enter valid data, and click Save. After you review the data that's displayed on the profile html page, press F12 to open the developer tools and display the Application panel to view the data in session storage for this application