Set 1
Set 1
Create a web page with a form that will allow the user to enter names of items that the user
would like to buy, and the quantity needed for each item (Shopping List). The user will also need
to add their name and email address at the end.
Create a “Welcome Navigation” that is for information purposes only and shows the information
about the site and what does it offers. Arrange the information in a presentable format of your
choice.
4 marks
Hide the text boxes and buttons for the shopping list items which will be visible whenever the
user clicks on a button to start adding items. Hint: You CAN Use jQuery show/hide for this.
4 marks
Create an “HTML Form”
Take input in an HTML form for the following: (4)
a. Item Name
b. Item Quantity
The form contains a button to submit each item individually and empty the Input Text
space. (4)
The form contains a button to navigate the Shopping list.
All Inputs need to be validated. Where name should not be empty or just white spaces,
and quantity should be greater than 0. (4)
12 marks
Create the “Shopping List”
Ask the user for his name and email in a prompt. Validate the input that the name contains only
letters. Validate the email to be in the format (****@***.com) (6)
The user then can see the items he needs to buy in a table with the quantity of each item next to
it. The user should see as a header: “Name” Shopping List associated with “Email” (2)
Then the table is loaded on screen. (8)
You need to have a button going back to the html form that allows adding new items (4)
20 marks
1
Marks for other items:
Miscellaneous notes:
You are free to choose your own colours. In order to have a professional and consistent
look and feel, choose a colour palette and stick to it. You can use the following resources
to generate a palette:
o https://www.canva.com/colors/color-palette-generator/
o https://coolors.co/generate
If you had time to apply some design elements, 4 bonus marks could be awarded.
You need to type many htmlElement.style.display = “None” and “Block” so it would be a
great idea to use a helper function rather than repeating the code.
If anything is not clear please ask!
Submission Guidelines:
1. Place all your code into a single folder. Zip this folder and submit the zipped file to
eConestoga dropbox (Assignments > Midterm). A good way to make sure everything is
correct is to copy the files you are submitting on a different location on your computer and
making sure everything works. Submit HTML and JS files.
Note: You can submit multiple times if you want. Please mention in comments which
submission to evaluate. Also note that you are not allowed to submit after the deadline or after
leaving the class (whichever applies first).
2
Screenshots (minimalistic design screenshots shows just the functionality):
Welcome Screen: