Scribd
Upload
21 views4 pages

Set 1

Uploaded by

akshay.j.uperia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views4 pages

Set 1

Uploaded by

akshay.j.uperia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Programming: Web Design and Development

PROG8020 – Midterm Set 1


Important Notes:

 This assessment must be completed individually.


 I will be checking for borrowed or copied assignments. All work is to be done from scratch;
you may not use any templates.
 This assessment is out of 50 marks total.
 Please sign this form: https://forms.office.com/r/FXrWBsVxEh

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.

 The minimum amount to enter per item is 1.


 The user should see at the beginning a Welcome Screen which welcomes the user to the
Shopping List page and asks the user to click on start to start adding items to the list.

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:

1. Programming style, standards and overall completion of the tasks. 4 marks


It is a good idea to practice conforming to a set of programming standards. Refer to the
posted summary of the IT Standards posted in IT Programs > General Resources.
2. All JavaScript codes and functions are added to a different JS file not inside the
HTML.
4 marks
3. Acceptable design minimal requirements are needed for the design as far as the website
looks a bit organized. 2 marks

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:

Creating Shopping List:

Viewing Shopping List:


3
4

You might also like