batuhan-basoglu/Sam-s-Mart-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

changes to lab2 file

Browse source
This commit is contained in:
soyed 2021-02-10 20:22:59 -05:00
parent 5c99005ad2
commit 4917604c81
15 changed files with 205 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View file

Binary file not shown.

BIN
images/bread.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 292 KiB

BIN
images/broccoli.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
images/carrot.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
images/cereal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 528 KiB

BIN
images/cheese.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
images/chicken.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
images/honey.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
images/onion.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 435 KiB

BIN
images/salmon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 286 KiB

BIN
images/white-fish.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 163 KiB

72
index.html
View file

@ -1,24 +1,24 @@
<!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">
<div>
<h1>Sam's Mart</h1> <h1>Sam's Mart</h1>
<a href="https://samsmartinc.com/"> <img class="cart-img" src="images/logo.png" alt="mart-img">
<img src="images/logo.png" alt="Facebook" class = "logo">
</a>
</div> </div>
<!-- Tab links, each one with an onclick event associated with it --> <!-- Tab links, each one with an onclick event associated with it -->
<div class="tab"> <div class="tab">
<button class="tablinks" onclick="openInfo(event, 'Client')">Client</button> <button class="tablinks" onclick="openInfo(event, 'Client')">
<button class="tablinks" onclick="openInfo(event, 'Products')">Products</button> 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>
@ -26,40 +26,76 @@
<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>
<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>
<div id="Products" class="tabcontent"> <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 class="footer">
<p class="copyright">
Website created by Ruchira, Sam, Batuhan, and Kene
</p>
</div>
</div> </div>
<div id="Cart" class="tabcontent"> <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">
Website created by Ruchira, Sam, Batuhan, and Kene
</p>
</div> </div>
</div>
<script src="scripts/groceries.js"></script> <script src="scripts/groceries.js"></script>
<script src="scripts/main.js"></script> <script src="scripts/main.js"></script>

37
scripts/groceries.js
View file

@ -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
@ -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;

33
scripts/main.js
View file

@ -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

66
styles/style.css
View file

@ -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;
}