Assessment 10 Query Strings and Storing Persistent Informati…

1. Directions – Download and unzip the file. The unzipped file tree includes the confirm.html page, the CSS for the page (in the css subdirectory), and the JavaScript file to be completed for the confirmation page (js/read.cookies.js).
2. From your Assessment 9, copy the registration.html file and place it in the top-level directory for this assessment.
3. Edit the form tag in the registration.html file so that it has its action set to confirm.html like this:

• <form action=”confirm.html” id=”reg-form” class=”registration-form”>

1. Copy the JavaScript file from your Assessment 9 and place it in the js subdirectory for this assessment.
2. Copy the CSS file from your Assessment 9 and place it in the css directory for this assessment. For this final assessment, it will be fine to have two different CSS files in the project.
3. Edit the JavaScript for the registration page (from Assessment 9).

• Add a function called writeCookieData(). This function should loop over the input controls (other than the submit button) and clear any previously stored cookies with data for these fields by setting the cookie’s value to empty string (“”) and setting the cookies expiration date to a time sufficiently far in the past.
• The writeCookieData() function should then loop over the form inputs (other than the submit button) and write the data for each field to a cookie. Use the form field’s id as the name of cookie and the value in the form as the value for the cookie.
• The last line in the writeCookieData() function should submit the form by calling form.submit() (where form is the variable used to access the form, so change the name as needed).
• Revise the code for the submit button’s click event handler so that if the form data is valid, the writeCookieData() function is called (but only if form data is valid).

1. Edit the JavaScript for the confirmation page (in the js/read.cookies.js file).

• Complete the code for the display CookieValue() function so that it first locates the output area (the div with the id output) on the confim.html page. The code should then loop through the cookies and display the names of the cookies and the values in the output area in a readable format.
• Complete the code for the window.onload so that the displayCookieValue() function is called when the page has loaded.

1. Test the registration form page in a browser to confirm that it validates the form and sends the user to the confirmation page if the form is valid (or remains on the registration page if the form is not valid). When the user is sent to the confirmation page, confirm that the cookie data is displayed correctly in a readable format.

Document this testing with screenshots and place the screenshots in a Word document. Include a brief caption or title with each image to identify what it shows.

Assessment examples: You may use the assessment examples in the file to give you an idea of what a Proficient or higher rating on the scoring guide would look like.

Walkthrough: You may view the following walkthrough videos to help you complete this assessment:

• .
• .

Zip up the completed project for this final assessment and submit the zip file, along with the Word document with the screenshots.