Question

HTML------------------------------------------------------

CSS---------------------------------------------------

WEB230 - JavaScript 1 Assignment 7 - Forms
Some of these tasks would be better done in HTML or CSS but do them in JavaScript to practice what
we have learned.
1. Select the form element and save it in a variable. From here we can access all of the form fields.
2. When the page loads do the following:
add the password value "monkey"
select the favourite city "New York"
clear the textarea
3. Add an event handler to the "name" field to change the background color of the "name" field to
green when the length of the string is at least 5 characters. Make sure the color is removed if the
count goes below 5. (Hint: input event)
4. Add an event handler to the "Show" button to display the password. When the password is
shown change the button to say "Hide" and visa versa. (Hint: change the field type to "text")
Also, prevent the form from submitting.
5. When the checkbox is checked enable the "Send Data" button, when unchecked disable it.
6. When the form submits:
check that the favourite food is "Apple". If not, do not submit the form and show an alert
box that tells the user what food they should like. (Hint: remember that the value of a form
field is always a string.)
See if any text is selected in the textarea. If it is, do not submit the form and show an alert
box asking the user why they selected that text.
7. When the user enters their first name (change event) save the value to localStorage. When the
page loads, check to see if there is a value stored. If so, fill in the first name with that value. (This
is tricky to test since most browsers will keep the form data over page refresh. To check if it is
working, open a new tab in your browser and copy the URL to the new tab. The first name
should be filled in.)
Notes:
do not modify the HTML or CSS files
do not rename the files
follow best practices as discussed
Submission Details:
Include a comment at the beginning of the JavaScript file that includes your name, student
number, assignment name, and the date.
Use camelCase for variable names
Do not concatenate strings, use template literals
Do not use the var keyword - instead use let or const
Do not include any HTML tags in the JavaScript file
Do not use document.write
put your files in a folder and zip the folder (right click - send to --> compress folder)
submit the zip file - do not use any other archive format (ie RAR, 7ZIP, etc.)