Assignment # 4

Due on 11/16/2021 by Midnight

The syllabus contains important information about grading criteria (including policies on extensions and late penalties), academic integrity, tutoring and office hours, and instructions on how to submit this assignment through bright space when done.

(Please note that there are two parts for this assignment)

Part #1: Simple Shopping cart application (products.html): Using EventListener() method, and the DOM’s forms[ ] and elements[ ] array collection objects to validate a form.

Part#2: Adding New Nodes Elements application (newNodes.html):

Adding new nodes elements and text to an already exciting HTML document!

Assignment # 4 Details:

HTML requirements for assignment #4

· Create a new folder and name it assignment4 and place it inside your public_html.

· Create an index.html and place inside the assignment4 folder similar to what you have done in previous assignments.

· Link to this assignment’s index.html from your main i6 public_html’s index.html.

· From assignment #4 index, you should link to the two different parts need for this assignment (2 different html pages):

o Part1: Shopping cart: should be called products.html

§ The product.html page should be well designed similar to your Assignment #1 with responsive .css (feel free to use the same design and navigation as your assignment #1).

§  You can even link to this assignment from within the nav button called “product” inside assignment #1 so it can look like a complete project for extra credit (integrate this assignment within assignment 1).

<a href=”assignment4/products.html” > products </a

o Part2: Adding new nodes elements: newNodes.html

Part # 1: A Simple Shopping Cart (Online Store) Application! (products.html)

· Use HTML form, JavaScript form’s validation, addEventListener(), to develop a simple online shopping cart application!

· Create an online store (shopping cart) featuring your own design and products to sell.

· Make sure to provide all the requirements listed below.

Form Requirements:

· The product.html page should also include a form with fields such input, radio buttons, submit, reset, and select.

· Use .css to design the form nicely as you did in previous assignments. You can use the same .css from previous classes.

· The product.html page should also include at least two products to sell, with an image, a price, and a field allowing the user to enter a quantity to order for each product (similar to the image here).

· Also, provide a shipping method (will-call or shipping), a shipping amount, and fields capturing customer details such as the user’s name, phone, email, address, and credit card information.

· Provide a unique name for each of the elements of the form as we will be using this form for server programming which requires using the name attributes for each form element. For example:

Email: <input type=email name=email>

JavaScript requirements

· Make sure to be using addEventlistener within the .js to execute all functions needed here. Do not invoke events from within the HTML document anymore as it’s not efficient (There should not be any events within the HTML page.)

· Write your code in an external JavaScript file called asg4cart.js.

· Use addEventlistener method with change, submit to execute functions needed for this assignment.

· Use focus(), selec(), alert() to make sure to that the user entered a value and when specific elements such as zip code and email are valid.

· Include the following JavaScript functions:

1) total(): When the user enters the quantity number of item to order, you should trigger a function ”total()” to display the current subtotal and the grand total immediately into the document (use the “change” event).

Make sure to add a shipping amount to the grand total if the user selected shipping.

2) receipt(): When the user clicks the checkout button, a function called

receipt() should be executed to validate all of the form elements:

· Make sure that the type of the submit button is type=submit:

<input type=submit value=checkout>

· You should make sure to validate all of the form elements using JavaScript:

o Check if the fields are empty or null;

o Validate the zip code making sure that it’s contains 5 digits (length is 5.)

o Make sure that the email includes an at-sign (“@“) and a dot (“.“);

o If the validation fails, alert the user and ask it to enter valid information, using focus(), select(), alert(), and change the background color to red of that specific element.

o Use also e.preventDefault() to stop the form from submitting to a new page so you can see the receipt/output on the same page.

o When all the validation is fine, then this function should display a receipt with all the information entered such as products, quantity purchased, current date, subtotal, and grand Total inside an element below the checkout button.

o List the credit card number as x for all digits in the receipt except the last four digits, which should appear as they are.

Helpful examples for part #1 of this assignment:

Review all of the examples for classes on 11/4 and 11/9 posted on the course webpage to help you to use addEventListener with change and submit to compute the subtotal and also to help you validate the form’s elements.

Part #2: Creating a new HTML elements and text nodes Application: (newNodes.html)

o Creating a new HTML elements and text nodes.

o "Create a Navigational menu designed by a .css class similar to our class example that will be posted on 11/11.

o You should have 2 items with text such as Home, and Contact).

o Make sure to use and li for these navigational items.

o Create a newNodes.js script to create two more items (nodes and also text nodes for each such as Products and About.

o The script should also change the colors of all the items in the navigations by changing the CSS class style name within your .js script.