Hands-On Practice Case Study Task 1: The Website Folder. Create a folder called pacific14. Copy all of the files from your Chapter 9 pacific9 folder into the pacific14 folder. Task 2: Display an Alert Message on the Yurts Page. Launch a text editor and open the yurts.html file. You will configure the yurts.html page so that an alert message will pop up when the page is displayed in the browser. You have the option to complete this task with JavaScript or to complete this task with jQuery. Option 1: Using JavaScript. o Edit the body tag as follows: message. Save the file and test it in the browser. Your display should be similar to Figure 14.33. Figure 14.33 Pica Pacific Trails Resort Home Yurts Activities Reservations 8 The Yurts at Pacific Trails What is a yot? structures four A message displays when the Yurts page is loaded by the browser Figure 14.33 Full Alternative Text Option 2: Using JavaScript and jQuery. Modify the page as follows: Add a script tag in the head section to access a jQuery CDN. Code a jQuery script block that includes the ready event. Code JavaScript within the ready event to display an alert box with the message, "Today only-10% off on a weekend-coupon code ZenTen". Save the file and test it in the browser. Your display should be similar to Figure 14.33. Task 3: Add Form Data Validation to the Reservations Page. Launch a text editor and open the reservations.html file. You will configure form data validation for the Reservations page that requires an e-mail address to be entered. You have the option to complete this task with JavaScript or to complete this task with jQuery. Option 1: Using JavaScript. Add a script block to the head section as follows: function validateForm() { if (document.forms [0].myEmail.value == "") { alert("Please enter an e-mail address."); return false; } // end if return true; } // end function validateForm Edit the tag as follows: Save the file and load it in a browser. Test it by clicking the submit button without typing in the e-mail input box. The alert box should pop up and the form should not be submitted (see Figure 14.34). Test it again by entering information in the e-mail input box and submit again. The form should be submitted successfully and a confirmation page should appear. Figure 14.34 Pacific Trails Resort Home Yurts Activities Reservations Reservations at Pacific Trails Contact First Nam AD Comments The Reservations page indicates that an e-mail address was not entered Figure 14.34 Full Alternative Text Option 2: Using JavaScript and jQuery. Modify the page as follows: Add a script tag in the head section to access a jQuery CDN. Add a script tag in the head section to access the jQuery Validate plugin (refer to Hands-On Practice 14.13). Code a jQuery script block that includes the ready event and invokes the Validate plugin (refer to Hands-On Practice 14.13). o Edit the CSS to configure styles for error messages generated by the plugin. Configure a style rule for all label elements with the class name error. Use label.error as the selector. Set float to none, position to relative, left to 10em, top to -2.5em, width to 25em, color to red, and font typeface to Arial. o Edit the HTML. Remove the HTML5 required attributes. Remove the from the first name, last name, and comments labels. Add class="required email" to the input tag for the email textbox. Save the file and load it in a browser. Test it by clicking the submit button without typing anything in the form. Your page should be similar to Figure 14.35. Notice how the jQuery Validate plugin displayed an error message for the e-mail form control. Test the form again by entering information in form controls but enter an invalid e-mail address. Note the error message. Next, correct the e- mail address and click the submit button. The form should be submitted successfully and a confirmation page should appear. Figure 14.35 Pacific Tris Resort Reservatio X Pacific Trails Resort Home Yurts Activities Reservations Reservations at Pacific Trails Contact Us Required information is marked with an asterisk (*). First Name: Last Name: *E-mail: Phone: Arrival Date: Nights: Comments: Submit This field is required Figure 14.35 Full Alternative Text Copyright 2018 Pectie Tras Resort hefstomeudstme.com Form validation processed by a jQuery plugin 2 1 x III