For your final project, you are to create a webpage that uses JavaScript to provide user interactivity. The entire project should consist of at least one HTML page (index.html), your own custom...

For your final project, you are to create a webpage that uses JavaScript to provide user interactivity. The entire project should consist of at least one HTML page (index.html), your own custom JavaScript file with your functionality, and an external CSS file.

The topic for your final project is up to you, you can pick any topic you like, your project should be coherent. It should be something that serves a purpose and makes sense.

You will be graded on meeting the requirements as well as the quality of the application and the quality of the code. Your code should include meaningful comments and should not include debugging material such as "console.log" statements. You should have meaningful variable and function names. Your project should be able to be used without having to read the code or without you having to supply notes. Think of this as work that you would want to represent you professionally and make it as professional as possible.

Here are some ideas that might appeal to you:

• A component customizer for a car/bicycle/computer or similar complex machine. The program would allow the user to choose apart from a few different categories and tell them the total price with the selected configuration.


• Averyenhanced choose your own adventure game. The user would fill in a form before the game to customize details about the game. The program would prompt choices using images or button elements to have the user make choices. The program would update the HTML of the page with the changing story.


• A simple ebook reader that would use a few titles fromProject Gutenberg(Links to an external site.)and display them. The user could choose a book and then the reader would show 10 or so lines from the text. Anextbutton and apreviousbutton would allow the user to load the next or previous 10 lines.


• A food restaurant information application. The user would select the kind of food they wanted and would see a list of places that serve that food along with a picture of the restaurant and the menu.

Requirements

JavaScript

• Use jQuery


• Use event listeners


• An array with data of your choosing. The data from this array must actually be used in the program. This data can be set by users.


• A form that captures user data and allows some sort of interaction. The form must allow for user input via a text element, select list, radio buttons, or other HTML input type elements.


• An image that is somehow altered or changed by interaction with HTML on the page.


• Use of a loop.


• Use of a conditional statement.


• Use of JavaScript to create an element or text on the page.


• Use of JavaScript to change the display of an element on the page via CSS and classes.


• The code should be broken into functions where appropriate. The use of two functions is required. These functions must be named functions called in your code. Event handling functions or functions connected to timers do not count for this requirement.

CSS

• CSS code that targets an id within the HTML.


• CSS code that targets classes within the HTML.


• CSS code that provides default fonts for the pages.


• All CSS must be stored in a single linked style sheet.


• All CSS should be free from errors. Check the code usinghttps://jigsaw.w3.org/css-validator/#validate_by_input(Links to an external site.)
  

HTML

• Your HTML page must be valid HTML as checked byhttps://validator.w3.org/#validate_by_input(Links to an external site.)
  


• Your HTML page must be namedindex.html.
  


• You must have at least one HTML form.


• Your HTML must include at least one h1 tag.


• Your HTML must include at least one image.


• Your HTML must include at least one class and one id.

Rubric