Handling Events

This week we$$ll begin with altering and enhancing prewritten code. Read the section in your textbook on the Miles Per Gallon calculator before you begin to understand exactly how the functions execute when the code runs. You$$ll also need to download and unzip the code provided. Save to a folder on your hard drive. We$$ll see how a form written in HTML can be enhanced to provide form validation before it is submitted by users. This assignment is modified from the one in the book so be sure to follow the steps written here.

Find the html file in the folder you created and test in a browser to see how it works. Enter invalid data $$ letters rather than numbers, for example and take note of what happens. Close the file.

Open your text editor or IDE.

Rather than start a new file, this time you$$ll open the mpg$.$html file in your folder. Note there$$s also a css file included $$ we$$ll work on this later.

Locate and modify the if$-$else statement that provides the data validation so it checks each text box separately. If the data in a text box is invalid, an error message should be displayed and the focus should be moved to that text box. Customize this error message.

Test this change to be sure that a separate error message is displayed for a text box if it contains invalid data. Screenshot this test with the computer time stamp showing..

Add a Clear Entries button below the Calculate MPG button. To do that, copy the HTML for the label and input elements for the Calculate button, and paste it after the input element for the Calculate button. Then, modify the HTML for the Clear Entries button so it has a unique id and an appropriate value attribute.

Test and screenshot the results. One before and one after clearing. The timestamps will confirm that it worked.

Before you finish, open the css file for this week$$s assignment.

Change at least one attribute to customize, be sure to save changes.

Screenshot this code change with the computer time stamp showing. Be aware it may not apply itself depending on your testing browser and other factors.

Submit the $4$ screenshots inserted into a document with labels identifying which they are. Paste in your final code as well and comment on the purpose of each code section or block. Comments are already in code in many cases, but detail what those comments mean $$ the processes followed to accomplish the task. Do this for all code sections for the html$,$ js$,$ and css$,$ not just those you added. Also discuss how this application might be integrated into a web page.

Submit application files as a zipped folder so your instructor can run the application.