first commit
This commit is contained in:
commit
7f7e881eab
17 changed files with 539 additions and 0 deletions
12
README.md
Normal file
12
README.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
# SEG3125-LAB2
|
||||
|
||||
The website of a Sam's Grocery Store made by Ruchira Perrera, Sam Oyediran, Batuhan Basoglu, and Kene Ojukwu
|
||||
|
||||
https://arctichawk1.github.io/SEG3125-LAB2/
|
||||
|
||||
# Authors
|
||||
|
||||
- Batuhan Basoglu, 300001274 - ArcticHawk1
|
||||
- Ruchira Perrera, 8714992 - ruchirawp
|
||||
- Sam Oyediran, 300016349 - soyed
|
||||
- Kene Ojukwu, 300027974 - kene17
|
||||
BIN
images/bread.png
Normal file
BIN
images/bread.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
BIN
images/broccoli.png
Normal file
BIN
images/broccoli.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
images/carrot.png
Normal file
BIN
images/carrot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
images/cereal.png
Normal file
BIN
images/cereal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 528 KiB |
BIN
images/cheese.png
Normal file
BIN
images/cheese.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
images/chicken.png
Normal file
BIN
images/chicken.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
images/honey.png
Normal file
BIN
images/honey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 446 KiB |
BIN
images/onion.png
Normal file
BIN
images/onion.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 435 KiB |
BIN
images/salmon.png
Normal file
BIN
images/salmon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
BIN
images/white-fish.png
Normal file
BIN
images/white-fish.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
104
index.html
Normal file
104
index.html
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!--This style sheet is taken from https://www.w3schools.com/howto/howto_js_tabs.asp -->
|
||||
<link href="styles/style.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="company-name">
|
||||
<h1>Sam's Mart</h1>
|
||||
<img class="cart-img" src="images/logo.png" alt="mart-img">
|
||||
</div>
|
||||
|
||||
<!-- Tab links, each one with an onclick event associated with it -->
|
||||
<div class="tab">
|
||||
<button class="tablinks" onclick="openInfo(event, 'Client')">
|
||||
Client
|
||||
</button>
|
||||
<button class="tablinks" onclick="openInfo(event, 'Products')">
|
||||
Products
|
||||
</button>
|
||||
<button class="tablinks" onclick="openInfo(event, 'Cart')">Cart</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab content -->
|
||||
<div id="Client" class="tabcontent">
|
||||
<h3>Client Information</h3>
|
||||
<p>Tell us a bit about you.</p>
|
||||
<i><strong>Choose a Category:</strong></i>
|
||||
<select
|
||||
id="dietSelect"
|
||||
name="dietSelect"
|
||||
class="sumo"
|
||||
onchange="populateListProductChoices(this.id, 'displayProduct')"
|
||||
>
|
||||
<option value=""></option>
|
||||
|
||||
<option value="Vegetarian">Vegetarian</option>
|
||||
<option value="GlutenFree">Gluten Free</option>
|
||||
<option value="VegetarianANDGluten-Free">
|
||||
Vegetarian and Gluten-Free
|
||||
</option>
|
||||
<option value="Organic">Organic</option>
|
||||
<option value="Non-organic">Non-Organic</option>
|
||||
<option value="None">None</option>
|
||||
</select>
|
||||
<br>
|
||||
<i><strong>Choose a Characteristic:</strong></i>
|
||||
<select class="sumo" name="characterSelect">
|
||||
<option value=""></option>
|
||||
<option value="Diabetic">Diabetic</option>
|
||||
<option value="LactoseIntolerant">Lactose intolerant</option>
|
||||
</select>
|
||||
|
||||
<div class="footer">
|
||||
<p class="copyright">
|
||||
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="Products" class="tabcontent">
|
||||
<h3>Your targeted products</h3>
|
||||
<p>We preselected products based on your restrictions.</p>
|
||||
<i><strong>Choose items to buy:</strong></i>
|
||||
<div id="displayProduct"></div>
|
||||
<button
|
||||
id="addCart"
|
||||
type="button"
|
||||
class="block"
|
||||
onclick="selectedItems()"
|
||||
>
|
||||
Add selected items to cart.
|
||||
</button>
|
||||
<div class="footer">
|
||||
<p class="copyright">
|
||||
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="Cart" class="tabcontent">
|
||||
<h3>Cart</h3>
|
||||
<p>Here is your cart.</p>
|
||||
<div id="displayCart"></div>
|
||||
|
||||
<div class="footer">
|
||||
<p class="copyright">
|
||||
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="scripts/groceries.js"></script>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
144
scripts/groceries.js
Normal file
144
scripts/groceries.js
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
|
||||
// Array of products, each product is an object with different fieldset
|
||||
// A set of ingredients should be added to products
|
||||
|
||||
var products = [
|
||||
{
|
||||
name: "broccoli",
|
||||
vegetarian: true,
|
||||
glutenFree: true,
|
||||
organic: true,
|
||||
price: 1.99,
|
||||
productImg: "images/broccoli.png"
|
||||
},
|
||||
{
|
||||
name: "bread",
|
||||
vegetarian: true,
|
||||
glutenFree: false,
|
||||
organic: false,
|
||||
price: 2.35,
|
||||
productImg: "images/bread.png"
|
||||
},
|
||||
{
|
||||
name: "salmon",
|
||||
vegetarian: false,
|
||||
glutenFree: true,
|
||||
organic: false,
|
||||
price: 10.00,
|
||||
productImg: "images/salmon.png"
|
||||
},
|
||||
{
|
||||
name: "carrot",
|
||||
vegetarian: true,
|
||||
glutenFree: true,
|
||||
organic: true,
|
||||
price: 2.63,
|
||||
productImg: "images/carrot.png"
|
||||
},
|
||||
{
|
||||
name: "chicken",
|
||||
vegetarian: false,
|
||||
glutenFree: true,
|
||||
organic: false,
|
||||
price: 6.87,
|
||||
productImg: "images/chicken.png"
|
||||
},
|
||||
{
|
||||
name: "cereal",
|
||||
vegetarian: false,
|
||||
glutenFree: false,
|
||||
organic: false,
|
||||
price: 2.97,
|
||||
productImg: "images/cereal.png"
|
||||
},
|
||||
{
|
||||
name: "cheese",
|
||||
vegetarian: false,
|
||||
glutenFree: false,
|
||||
organic: false,
|
||||
price: 5.14,
|
||||
productImg: "images/cheese.png"
|
||||
},
|
||||
{
|
||||
name: "white fish",
|
||||
vegetarian: false,
|
||||
glutenFree: true,
|
||||
organic: false,
|
||||
price: 13.50,
|
||||
productImg: "images/white-fish.png"
|
||||
},
|
||||
{
|
||||
name: "honey",
|
||||
vegetarian: false,
|
||||
glutenFree: false,
|
||||
organic: true,
|
||||
price: 1.89,
|
||||
productImg: "images/honey.png"
|
||||
},
|
||||
{
|
||||
name: "onion",
|
||||
vegetarian: true,
|
||||
glutenFree: true,
|
||||
organic: true,
|
||||
price: 2.22,
|
||||
productImg: "images/onion.png"
|
||||
}
|
||||
];
|
||||
|
||||
products.sort(function(a, b) {
|
||||
return a.price - b.price;
|
||||
})
|
||||
|
||||
function getProductImg(productName) {
|
||||
var prodVal = products.find(prod => prod.name === productName);
|
||||
return prodVal.productImg;
|
||||
}
|
||||
|
||||
|
||||
// given restrictions provided, make a reduced list of products
|
||||
// prices should be included in this list, as well as a sort based on price
|
||||
|
||||
function restrictListProducts(prods, restriction) {
|
||||
let product_names = [];
|
||||
for (let i=0; i<prods.length; i+=1) {
|
||||
if ((restriction == "Vegetarian") && (prods[i].vegetarian == true)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if ((restriction == "GlutenFree") && (prods[i].glutenFree == true)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if ((restriction == "VegetarianANDGluten-Free") && (prods[i].glutenFree == true) && (prods[i].vegetarian == true)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if ((restriction == "Organic") && (prods[i].organic == true)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if ((restriction == "Non-Organic") && (prods[i].organic == false)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if ( restriction == "None") {
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
}
|
||||
return product_names;
|
||||
}
|
||||
|
||||
// Calculate the total price of items, with received parameter being a list of products
|
||||
function getTotalPrice(chosenProducts) {
|
||||
var totalPrice = 0;
|
||||
for (let i=0; i<products.length; i+=1) {
|
||||
if (chosenProducts.indexOf(products[i].name) > -1){
|
||||
totalPrice += products[i].price;
|
||||
}
|
||||
}
|
||||
return totalPrice;
|
||||
}
|
||||
|
||||
function getItemPrice(chosenProduct){
|
||||
for (let i=0; i<products.length; i+=1) {
|
||||
if (chosenProduct.indexOf(products[i].name) > -1){
|
||||
return products[i].price;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
124
scripts/main.js
Normal file
124
scripts/main.js
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
|
||||
// This function is called when any of the tab is clicked
|
||||
// It is adapted from https://www.w3schools.com/howto/howto_js_tabs.asp
|
||||
|
||||
function openInfo(evt, tabName) {
|
||||
|
||||
// Get all elements with class="tabcontent" and hide them
|
||||
tabcontent = document.getElementsByClassName("tabcontent");
|
||||
for (i = 0; i < tabcontent.length; i++) {
|
||||
tabcontent[i].style.display = "none";
|
||||
}
|
||||
|
||||
// Get all elements with class="tablinks" and remove the class "active"
|
||||
tablinks = document.getElementsByClassName("tablinks");
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
||||
}
|
||||
|
||||
// Show the current tab, and add an "active" class to the button that opened the tab
|
||||
document.getElementById(tabName).style.display = "block";
|
||||
evt.currentTarget.className += " active";
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// generate a checkbox list from a list of products
|
||||
// it makes each product name as the label for the checkbos
|
||||
|
||||
function populateListProductChoices(slct1, slct2) {
|
||||
var s1 = document.getElementById(slct1);
|
||||
var s2 = document.getElementById(slct2);
|
||||
|
||||
// s2 represents the <div> in the Products tab, which shows the product list, so we first set it empty
|
||||
s2.innerHTML = "";
|
||||
|
||||
// obtain a reduced list of products based on restrictions
|
||||
var optionArray = restrictListProducts(products, s1.value);
|
||||
|
||||
// for each item in the array, create a checkbox element, each containing information such as:
|
||||
// <input type="checkbox" name="product" value="Bread">
|
||||
// <label for="Bread">Bread/label><br>
|
||||
|
||||
for (i = 0; i < optionArray.length; i++) {
|
||||
|
||||
var productName = optionArray[i];
|
||||
// create the checkbox and add in HTML DOM
|
||||
var checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.name = "product";
|
||||
checkbox.value = productName;
|
||||
s2.appendChild(checkbox);
|
||||
|
||||
// create a label for the checkbox, and also add in HTML DOM
|
||||
var label = document.createElement('label')
|
||||
label.htmlFor = productName;
|
||||
var itemPrice = getItemPrice(productName);
|
||||
label.appendChild(document.createTextNode(productName + " $" + itemPrice));
|
||||
|
||||
// //get price of an item
|
||||
// var itemPrice = getItemPrice(productName);
|
||||
// label.appendChild(document.createTextNode(" $" + itemPrice));
|
||||
|
||||
|
||||
s2.appendChild(label);
|
||||
|
||||
// create a breakline node and add in HTML DOM
|
||||
s2.appendChild(document.createElement("br"));
|
||||
|
||||
//create <img src="">
|
||||
var prodImg = document.createElement("img");
|
||||
prodImg.src = getProductImg(productName);
|
||||
// prodImg = document.getElementById("displayProduct");
|
||||
// console.log("trial", prodImg.src);
|
||||
s2.appendChild(prodImg);
|
||||
|
||||
//use this to space the images
|
||||
s2.appendChild(document.createElement("br"));
|
||||
s2.appendChild(document.createElement("br"));
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// This function is called when the "Add selected items to cart" button in clicked
|
||||
// The purpose is to build the HTML to be displayed (a Paragraph)
|
||||
// We build a paragraph to contain the list of selected items, and the total price
|
||||
|
||||
function selectedItems(){
|
||||
|
||||
var ele = document.getElementsByName("product");
|
||||
var chosenProducts = [];
|
||||
|
||||
var c = document.getElementById('displayCart');
|
||||
c.innerHTML = "";
|
||||
|
||||
// build list of selected item
|
||||
var para = document.createElement("P");
|
||||
para.innerHTML = "You selected : ";
|
||||
para.appendChild(document.createElement("br"));
|
||||
|
||||
|
||||
|
||||
for (i = 0; i < ele.length; i++) {
|
||||
if (ele[i].checked) {
|
||||
para.appendChild(document.createTextNode(ele[i].value + " $" + getItemPrice(ele[i].value)));
|
||||
para.appendChild(document.createElement("br"));
|
||||
//adding the image
|
||||
console.log(getProductImg(ele[i].value));
|
||||
var cartImg = para.appendChild(document.createElement("img"));
|
||||
cartImg.src = getProductImg(ele[i].value);
|
||||
// para.appendChild(cartImg);
|
||||
para.appendChild(document.createElement("br"));
|
||||
chosenProducts.push(ele[i].value);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// add paragraph and total price
|
||||
c.appendChild(para);
|
||||
c.appendChild(document.createTextNode("Total Price is $" + getTotalPrice(chosenProducts)));
|
||||
|
||||
}
|
||||
|
||||
126
styles/style.css
Normal file
126
styles/style.css
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
/* This style sheet is taken from https://www.w3schools.com/howto/howto_js_tabs.asp> */
|
||||
|
||||
/* Style the tab */
|
||||
.tab {
|
||||
overflow: hidden;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Style the buttons that are used to open the tab content */
|
||||
.tab button {
|
||||
background-color: inherit;
|
||||
float: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
.tab button:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
/* Create an active/current tablink class */
|
||||
.tab button.active {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
/* Style the tab content */
|
||||
.tabcontent {
|
||||
display: none;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
background-color: rgb(222, 224, 228);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.tablinks {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* title/header */
|
||||
h1{
|
||||
font-family: "Britannic Bold ", sans-serif;
|
||||
font-weight: bolder;
|
||||
font-size: 50px;
|
||||
color: #f7fcfc;
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
/* margin-right: 15px; */
|
||||
|
||||
}
|
||||
/*footer with signatures */
|
||||
.footer {
|
||||
bottom: 0;
|
||||
left: a;
|
||||
width: 100%;
|
||||
color: rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.copyright{
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.logo{
|
||||
width: 5%;
|
||||
height:auto;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
background-color: #66BFBF;
|
||||
background-image: url("images/bg3.jpg");
|
||||
text-align: center;
|
||||
font-size : 20px;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 30%;
|
||||
padding: 3% 7%;
|
||||
|
||||
}
|
||||
|
||||
.company-name {
|
||||
text-align: left;
|
||||
}
|
||||
.cart-img {
|
||||
height: 5%;
|
||||
width: 5%;
|
||||
padding: 0;
|
||||
padding-left: 15px;
|
||||
margin-top: 20px;
|
||||
|
||||
/*
|
||||
position: relative;
|
||||
top: 40px;
|
||||
*/
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.block {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.sumo{
|
||||
font-size: 15px;
|
||||
}
|
||||
29
todo.txt
Normal file
29
todo.txt
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
Your website should contain:
|
||||
• The name of the grocery store (this is not present in the code provided) ####### DONE
|
||||
• At least 10 possible products in the product list. ####### DONE
|
||||
• Navigation between two or three zones depending on your information pooling. ####### DONE
|
||||
• A personal data entry area ####### DONE
|
||||
o Each user may be vegetarian and/or allergic to gluten. (The code provided does not
|
||||
considers the OR... change it). ####### DONE
|
||||
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). ####### DONE
|
||||
• An area for the choice of items ####### DONE
|
||||
o Items should be priced. (to add to the code provided) ####### DONE
|
||||
o Items should be in sorted by price. (to add to the code provided) ####### DONE
|
||||
• An area to view the cart. ####### DONE
|
||||
o The contents of the cart and its total. ####### DONE
|
||||
• Your signature (Website designed by ...) at the bottom of the page. ####### DONE
|
||||
• 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. ####### DONE
|
||||
• Using JavaScript (separate files) to contain the script associated with the site. ####### DONE
|
||||
|
||||
|
||||
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.
|
||||
Loading…
Reference in a new issue