CSCI 120 Coastal Carolina University D Angelo Food Fusion Project First, copy all the files inside the HTML Project (csci120/chapter7/project/) to a direct

CSCI 120 Coastal Carolina University D Angelo Food Fusion Project First, copy all the files inside the HTML Project (csci120/chapter7/project/) to a directory named csci120/chapter8/project. This is your starting point. Remember, you should have the following pages: index, about, breakfast, lunch, dinner, extras, locations, contact, survey, events, employment, order.You should also have a styles folder with a .css file, and an images folder holding any images used on your pages. Also create a “scripts” folder to hold your javascript (.js) files. **For all the javascript tasks below, use the external method for including javascript. There should be no javascript code in the html file (only the link to the .js file). In the javascript file, use functions and use the addListener method to attach functions to events. (You will need to add some paragraphs to the html; you could do this with Javascript, but that is beyond the scope for this project).http://ccuresearch.coastal.edu/djwill13/csci120/Chapter%207/index.htmlabove is chapter 7. to view source right click and click view page source. Chapter 8 Project — Javascript
Return to your Food Fusion website, created in the Chapter 2-7 projects. You created the
content, site structure, and styling; now it’s time to add some interactivity.
Step 1. Set up
First, copy all the files inside the HTML Project (csci120/chapter7/project/) to a directory named
csci120/chapter8/project. This is your starting point. Remember, you should have the following
pages: index, about, breakfast, lunch, dinner, extras, locations, contact, survey, events,
employment, order.You should also have a styles folder with a .css file, and an images folder
holding any images used on your pages. Also create a “scripts” folder to hold your
javascript (.js) files.
**For all the javascript tasks below, use the external method for including javascript.
There should be no javascript code in the html file (only the link to the .js file). In the
javascript file, use functions and use the addListener method to attach functions to
events. (You will need to add some paragraphs to the html; you could do this with
Javascript, but that is beyond the scope for this project).
Step 2. Add javascript functionality to make the survey page obnoxiously interactive:
? After the user enters the phone number, pop up a Good Luck alert message
? use onblur and name your function goodLuck()
? Add an empty paragraph just below the name field. After the user enters the name,
populate the new paragraph with the text “Have we met before, ?”
? Add an empty paragraph just below the select field. After selecting a favorite dish,
change the background color of the select paragraph and the new paragraph to a new
color, and add text to the new paragraph that says “Good choice”.
? Add an empty paragraph just below the restaurant rating field. When the user selects 4
or below, add text to the new paragraph that says “Are you sure?”; when the user selects
6 or above, use the text “Great”. Optional: Provide a different message for each
number rating.
? When the user clicks Reset, show an alert that says “Get it right this time!” and change
the background of the page to a bright color.
? Add an empty paragraph just below the Submit button area. When the user clicks
Submit, first check that the phone number is not empty. If it is empty, add text to the
paragraph that says “Tricked you–phone number is required!” and prevent the
submission. The text should be in red color, with a gray background for the paragraph. If
the phone field is NOT empty, then add text to the paragraph that says “Thanks–can I
call you tomorrow?”. You choose the colors for this one, but make it different than the
red and gray.
Step 3.
UPLOAD the entire csci120 directory (and all contents) to the web server.

Purchase answer to see full
attachment