changes to lab2 file
This commit is contained in:
soyed
parent
5c99005ad2
commit
4917604c81
15 changed files with 205 additions and 81 deletions
BIN
.DS_Store
vendored
Normal file
BIN
.DS_Store
vendored
Normal file
Binary file not shown.
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/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 |
110
index.html
110
index.html
|
|
@ -1,68 +1,104 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<! This style sheet is taken from https://www.w3schools.com/howto/howto_js_tabs.asp>
|
<!--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">
|
<link href="styles/style.css" rel="stylesheet" type="text/css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="company-name">
|
||||||
|
<h1>Sam's Mart</h1>
|
||||||
|
<img class="cart-img" src="images/logo.png" alt="mart-img">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<!-- Tab links, each one with an onclick event associated with it -->
|
||||||
<h1> Sam's Mart </h1>
|
<div class="tab">
|
||||||
<a href="https://samsmartinc.com/">
|
<button class="tablinks" onclick="openInfo(event, 'Client')">
|
||||||
<img src="images/logo.png" alt="Facebook" class = "logo">
|
Client
|
||||||
</a>
|
</button>
|
||||||
|
<button class="tablinks" onclick="openInfo(event, 'Products')">
|
||||||
</div>
|
Products
|
||||||
|
</button>
|
||||||
<!-- 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>
|
<button class="tablinks" onclick="openInfo(event, 'Cart')">Cart</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tab content -->
|
<!-- Tab content -->
|
||||||
<div id="Client" class="tabcontent">
|
<div id="Client" class="tabcontent">
|
||||||
<h3>Client Information</h3>
|
<h3>Client Information</h3>
|
||||||
<p>Tell us a bit about you.</p>
|
<p>Tell us a bit about you.</p>
|
||||||
Choose a Category:
|
<i><strong>Choose a Category:</strong></i>
|
||||||
<select id="dietSelect" name="dietSelect" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
<select
|
||||||
|
id="dietSelect"
|
||||||
|
name="dietSelect"
|
||||||
|
class="sumo"
|
||||||
|
onchange="populateListProductChoices(this.id, 'displayProduct')"
|
||||||
|
>
|
||||||
<option value=""></option>
|
<option value=""></option>
|
||||||
|
|
||||||
<option value="Vegetarian">Vegetarian</option>
|
<option value="Vegetarian">Vegetarian</option>
|
||||||
<option value="GlutenFree">Gluten Free</option>
|
<option value="GlutenFree">Gluten Free</option>
|
||||||
<option value="VegetarianANDGluten-Free">Vegetarian and Gluten-Free</option>
|
<option value="VegetarianANDGluten-Free">
|
||||||
|
Vegetarian and Gluten-Free
|
||||||
|
</option>
|
||||||
<option value="Organic">Organic</option>
|
<option value="Organic">Organic</option>
|
||||||
<option value="Non-organic">Non-Organic</option>
|
<option value="Non-organic">Non-Organic</option>
|
||||||
<option value="None">None</option>
|
<option value="None">None</option>
|
||||||
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
<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 id="Products" class="tabcontent">
|
<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>
|
<h3>Your targeted products</h3>
|
||||||
<p>We preselected products based on your restrictions.</p>
|
<p>We preselected products based on your restrictions.</p>
|
||||||
Choose items to buy:
|
<i><strong>Choose items to buy:</strong></i>
|
||||||
<div id="displayProduct"></div>
|
<div id="displayProduct"></div>
|
||||||
<button id="addCart" type="button" class="block" onclick="selectedItems()">
|
<button
|
||||||
|
id="addCart"
|
||||||
|
type="button"
|
||||||
|
class="block"
|
||||||
|
onclick="selectedItems()"
|
||||||
|
>
|
||||||
Add selected items to cart.
|
Add selected items to cart.
|
||||||
</button>
|
</button>
|
||||||
</div>
|
<div class="footer">
|
||||||
|
<p class="copyright">
|
||||||
|
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="Cart" class="tabcontent">
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="Cart" class="tabcontent">
|
||||||
<h3>Cart</h3>
|
<h3>Cart</h3>
|
||||||
<p>Here is your cart.</p>
|
<p>Here is your cart.</p>
|
||||||
<div id="displayCart"></div>
|
<div id="displayCart"></div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<p class="copyright">Website created by Ruchira, Sam, Batuhan, and Kene</p>
|
<p class="copyright">
|
||||||
</div>
|
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="scripts/groceries.js"></script>
|
</div>
|
||||||
|
|
||||||
<script src="scripts/main.js"></script>
|
|
||||||
|
|
||||||
</body>
|
<script src="scripts/groceries.js"></script>
|
||||||
|
|
||||||
|
<script src="scripts/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -8,70 +8,80 @@ var products = [
|
||||||
vegetarian: true,
|
vegetarian: true,
|
||||||
glutenFree: true,
|
glutenFree: true,
|
||||||
organic: true,
|
organic: true,
|
||||||
price: 1.99
|
price: 1.99,
|
||||||
|
productImg: "images/broccoli.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "bread",
|
name: "bread",
|
||||||
vegetarian: true,
|
vegetarian: true,
|
||||||
glutenFree: false,
|
glutenFree: false,
|
||||||
organic: false,
|
organic: false,
|
||||||
price: 2.35
|
price: 2.35,
|
||||||
|
productImg: "images/bread.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "salmon",
|
name: "salmon",
|
||||||
vegetarian: false,
|
vegetarian: false,
|
||||||
glutenFree: true,
|
glutenFree: true,
|
||||||
organic: false,
|
organic: false,
|
||||||
price: 10.00
|
price: 10.00,
|
||||||
|
productImg: "images/salmon.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "carrot",
|
name: "carrot",
|
||||||
vegetarian: true,
|
vegetarian: true,
|
||||||
glutenFree: true,
|
glutenFree: true,
|
||||||
organic: true,
|
organic: true,
|
||||||
price: 2.63
|
price: 2.63,
|
||||||
|
productImg: "images/carrot.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "chicken",
|
name: "chicken",
|
||||||
vegetarian: false,
|
vegetarian: false,
|
||||||
glutenFree: true,
|
glutenFree: true,
|
||||||
organic: false,
|
organic: false,
|
||||||
price: 6.87
|
price: 6.87,
|
||||||
|
productImg: "images/chicken.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "cereal",
|
name: "cereal",
|
||||||
vegetarian: false,
|
vegetarian: false,
|
||||||
glutenFree: false,
|
glutenFree: false,
|
||||||
organic: false,
|
organic: false,
|
||||||
price: 2.97
|
price: 2.97,
|
||||||
|
productImg: "images/cereal.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "cheese",
|
name: "cheese",
|
||||||
vegetarian: false,
|
vegetarian: false,
|
||||||
glutenFree: false,
|
glutenFree: false,
|
||||||
organic: false,
|
organic: false,
|
||||||
price: 5.14
|
price: 5.14,
|
||||||
|
productImg: "images/cheese.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "white fish",
|
name: "white fish",
|
||||||
vegetarian: false,
|
vegetarian: false,
|
||||||
glutenFree: true,
|
glutenFree: true,
|
||||||
organic: false,
|
organic: false,
|
||||||
price: 13.50
|
price: 13.50,
|
||||||
|
productImg: "images/white-fish.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "honey",
|
name: "honey",
|
||||||
vegetarian: false,
|
vegetarian: false,
|
||||||
glutenFree: false,
|
glutenFree: false,
|
||||||
organic: true,
|
organic: true,
|
||||||
price: 1.89
|
price: 1.89,
|
||||||
|
productImg: "images/honey.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "onion",
|
name: "onion",
|
||||||
vegetarian: true,
|
vegetarian: true,
|
||||||
glutenFree: true,
|
glutenFree: true,
|
||||||
organic: true,
|
organic: true,
|
||||||
price: 2.22
|
price: 2.22,
|
||||||
|
productImg: "images/onion.png"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -79,6 +89,11 @@ products.sort(function(a, b) {
|
||||||
return a.price - b.price;
|
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
|
// given restrictions provided, make a reduced list of products
|
||||||
// prices should be included in this list, as well as a sort based on price
|
// prices should be included in this list, as well as a sort based on price
|
||||||
|
|
@ -101,7 +116,7 @@ function restrictListProducts(prods, restriction) {
|
||||||
else if ((restriction == "Non-Organic") && (prods[i].organic == false)){
|
else if ((restriction == "Non-Organic") && (prods[i].organic == false)){
|
||||||
product_names.push(prods[i].name);
|
product_names.push(prods[i].name);
|
||||||
}
|
}
|
||||||
else if (restriction == "None"){
|
else if ( restriction == "None") {
|
||||||
product_names.push(prods[i].name);
|
product_names.push(prods[i].name);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -110,7 +125,7 @@ function restrictListProducts(prods, restriction) {
|
||||||
|
|
||||||
// Calculate the total price of items, with received parameter being a list of products
|
// Calculate the total price of items, with received parameter being a list of products
|
||||||
function getTotalPrice(chosenProducts) {
|
function getTotalPrice(chosenProducts) {
|
||||||
totalPrice = 0;
|
var totalPrice = 0;
|
||||||
for (let i=0; i<products.length; i+=1) {
|
for (let i=0; i<products.length; i+=1) {
|
||||||
if (chosenProducts.indexOf(products[i].name) > -1){
|
if (chosenProducts.indexOf(products[i].name) > -1){
|
||||||
totalPrice += products[i].price;
|
totalPrice += products[i].price;
|
||||||
|
|
|
||||||
|
|
@ -54,16 +54,30 @@ function populateListProductChoices(slct1, slct2) {
|
||||||
// create a label for the checkbox, and also add in HTML DOM
|
// create a label for the checkbox, and also add in HTML DOM
|
||||||
var label = document.createElement('label')
|
var label = document.createElement('label')
|
||||||
label.htmlFor = productName;
|
label.htmlFor = productName;
|
||||||
label.appendChild(document.createTextNode(productName));
|
|
||||||
|
|
||||||
//get price of an item
|
|
||||||
var itemPrice = getItemPrice(productName);
|
var itemPrice = getItemPrice(productName);
|
||||||
label.appendChild(document.createTextNode(" $" + itemPrice));
|
label.appendChild(document.createTextNode(productName + " $" + itemPrice));
|
||||||
|
|
||||||
|
// //get price of an item
|
||||||
|
// var itemPrice = getItemPrice(productName);
|
||||||
|
// label.appendChild(document.createTextNode(" $" + itemPrice));
|
||||||
|
|
||||||
|
|
||||||
s2.appendChild(label);
|
s2.appendChild(label);
|
||||||
|
|
||||||
// create a breakline node and add in HTML DOM
|
// create a breakline node and add in HTML DOM
|
||||||
s2.appendChild(document.createElement("br"));
|
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"));
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -83,12 +97,23 @@ function selectedItems(){
|
||||||
var para = document.createElement("P");
|
var para = document.createElement("P");
|
||||||
para.innerHTML = "You selected : ";
|
para.innerHTML = "You selected : ";
|
||||||
para.appendChild(document.createElement("br"));
|
para.appendChild(document.createElement("br"));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
for (i = 0; i < ele.length; i++) {
|
for (i = 0; i < ele.length; i++) {
|
||||||
if (ele[i].checked) {
|
if (ele[i].checked) {
|
||||||
para.appendChild(document.createTextNode(ele[i].value + " $" + getItemPrice(ele[i].value)));
|
para.appendChild(document.createTextNode(ele[i].value + " $" + getItemPrice(ele[i].value)));
|
||||||
para.appendChild(document.createElement("br"));
|
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);
|
chosenProducts.push(ele[i].value);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// add paragraph and total price
|
// add paragraph and total price
|
||||||
|
|
|
||||||
|
|
@ -36,28 +36,36 @@
|
||||||
border-top: none;
|
border-top: none;
|
||||||
background-color: rgb(222, 224, 228);
|
background-color: rgb(222, 224, 228);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablinks {
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* title/header */
|
/* title/header */
|
||||||
h1{
|
h1{
|
||||||
font-family: "Britannic Bold ", sans-serif;
|
font-family: "Britannic Bold ", sans-serif;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
font-size: 40px;
|
font-size: 50px;
|
||||||
color: #f7fcfc;
|
color: #f7fcfc;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: inline;
|
display: inline;
|
||||||
margin-right: 15px;
|
/* margin-right: 15px; */
|
||||||
|
|
||||||
}
|
}
|
||||||
/*footer with signatures */
|
/*footer with signatures */
|
||||||
.footer {
|
.footer {
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
left: a;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: rgb(87, 139, 216);
|
color: rgb(0, 0, 0);
|
||||||
color: rgb(255, 255, 255);
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.copyright{
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo{
|
.logo{
|
||||||
|
|
@ -65,14 +73,54 @@ h1{
|
||||||
height:auto;
|
height:auto;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
margin: 0px;
|
||||||
background-color: #66BFBF;
|
background-color: #66BFBF;
|
||||||
background-image: url("images/bg3.jpg");
|
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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue