LAB 2: Construction of an adaptive online grocery website

GOAL AND GOALS
The purpose of this laboratory is to build a dynamic mini website that allows a user to
purchase items at an online grocery store. Our focus will be on the functionality. During this
laboratory, you will need to:
• Get familiar with JavaScript for building dynamic web pages (responding to the user's
actions).
• In conjunction with the theme of putting the user at the heart of the design process, your
online grocery UI will have to be personalized in response to various characteristics of
typical users.
SUBMISSION DEADLINE
● Wednesday, February 10, 2021, 11:30 p.m.
SUBMISSION METHOD
● In Brightspace, the Lab 2 contains a link to your submission.
● Do not submit files. Submit a link to your GitHub repo as well as your web page, so that the
teaching assistant can see the rendering of your grocery store online and browse it. Be sure
to register FINAL SOUMISSION when you are ready for your submission to be corrected.
● WARNING: Any code or even "little piece of code" you take from such a stack overflow or
other website should be accompanied by a comment that recognizes the source. You must,
in your submission text, state "Code for X inspired by ..................................................(link
html)")
SEG3125 Analysis and
Design of User Interfaces LAB 2: Construction of an adaptive
online grocery website
INSTRUCTIONS / TUTORIALS TO FOLLOW
(1) You need to familiarize yourself with JavaScript. Just like HTML/CSS, the tutorial on the W3
School website is really great. Go step by step, but you won't be able to do everything, there are
several items. Don't be discouraged as you will see that several elements of the tutorial areon
basicstructures or operators containing any programming language (arithmetic operations,
Boolean, functions, Random, String, objects, etc.). You've already
this knowledge, it is only a different syntax.
I urge you to quickly check out the section on HTML DOM. The dynamic aspect
of websites comes from a small part of JavaScript, the one that allows you to
find and modify HTMLs elements. Read this section on the JS HTML DOM,
specifically the DOM Document sections (showing how to access an HTML item)
and the DOM Events section showing how it is possible to listen (adding a
“listener") to the occurrence of events (mouse click for example) and react to it.
The HOW TO section
also contains
examples of navigation. The navigation code I provide you with this lab comes in part from this
example on tab titles.
(2) Your demonstration space will still be useful this week (and throughout the session). Use
GitHub Pages which will allow you to have your own website at the address
username.github.io. I suggest you put
your projects in separate directories, and
thus have username.github.io/SEG3525-
LabX as a directory for each lab.
Design
In connection with the task-based design model, I provide you with some information about
your typical users. Here are two characters and their goals.
Lucie, 28, is a vegetarian. She would like to be able to do her groceries without being offered
meats and fish. It has a limited budget, so likes to see the items in order of price to be able to buy
the cheapest. Lucie has vision problems too, so she appreciates when the characters on the
screen are big enough.
Eric,45, has a gluten intolerance. He would like to do his groceries without being offered items
containing wheat. He prefers to buy organic products, unless it is very expensive. Eric feels
intimidated by all the vegetable names he doesn't know and prefers to see pictures.
In a real design situation, you could now think of a to-do list for each purpose and that list would
lead you to design requirements. But... As we are in the end of university courses, I will give you
programming requirements to consider these characters, but also get you to learn elements of
JavaScript.
STARTING POINT
To help you (for those who need it) I provide you with some code. The directory SEG3125- Module1-
Grocery contains the source code and you can see the rendering of the site here.
This is a small 3-page site that you will need to edit. A navigation bar (Client, Products, Cart)
allows you to move from one page to another. Look in the hand file.js for the JavaScript of
this navigation.
(1) The Customer page allows the user
to select whether he is vegetarian
or allergic to gluten.
(2) The products page shows a subset of
products based on user dietary
restrictions.
(3) The Cart page shows what is in the cart
and the total.
Suppose 3 grocery items: broccoli, wheat bread, salmon, an "adaptive" grocery store that meets
Lucie and Eric's needs should limit Lucie's selection to bread and broccoli, and selection for Eric with
broccoli and salmon. This would increase their productivity by not having to browse items they won't
want to buy anyway.
As you can see, so far, the site is very basic! It will be up to you to change the code and
incorporate elements that will meet the goals of Lucie and Eric.
Programming
Using HTML/CSS/JavaScript, you need to generate a small, dynamic website that allows a
user to shop online.
Basic requirements of your page (Compulsory)
Our focus for this week will be to have a site with correct functionalities. Since,
many of you are beginners in JavaScript, that will be enough.
Your website should contain:
• The name of the grocery store (this is not present in the code provided)
• At least 10 possible products in the product list.
• Navigation between two or three zones depending on your information pooling.
• A personal data entry area
o Each user may be vegetarian and/or allergic to gluten. (The code provided does not
considers the OR... change it).
o Each user can indicate a preference for organic or non-organic products.
(This is not considered in the code provided, it needs to be added in the
Options section, and add it as a variable in the list of products).
• An area for the choice of items
o Items should be priced. (to add to the code provided)
o Items should be in sorted by price. (to add to the code provided)
• An area to view the cart.
o The contents of the cart and its total.
• Your signature (Website designed by ...) at the bottom of the page.
• The use of external CSS (separate file) to set styles for titles, divisions, your signature at the
bottom of the site. Explore font changes, colors, alignment, etc., to make the site a little
prettier. For this lab, your rating will be on the feature, so don't waste too much time here if
you're just starting out.
• Using JavaScript (separate files) to contain the script associated with the site.
Additional possibilities (Optional)
• Add user characteristics (e.g., diabetic, lactose intolerant)
• Use photos to show which items to choose from
• Change the size of the characters for Lucie.
• Allow the addition of quantities.
• Add any other HTML/CSS elements to improve site rendering.
EVALUATION
● This lab is worth 3.5%.
● Any group who has included all the items requested in the basic requirements will be
awarded 10/10. One point will be deducted for each missing item.
● Failure to provide code-inspired sources of online code will result in a score of zero.
● Any late submission will have a penalty of 10% per day of delay, up to 2 days.
Questions
● You can ask your questions during the lab session on Wednesday, February 3rd.
● You can also send your questions to your TA Farouk (bfarouk@uottawa.ca)