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

finished

Browse source
This commit is contained in:
ruchi 2021-02-17 22:33:47 -05:00
parent f992656570
commit a08ef5fcb0
4 changed files with 113 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
index.html
View file

@ -3,23 +3,35 @@
<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" />
<!-- Load an icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head> </head>
<body> <body>
<div class="navbar">
<div class="company-name"> <div class="company-name">
<h1>Sam's Mart</h1> <h1 >Sam's Mart</h1>
<img class="cart-img" src="images/logo.png" alt="mart-img" />
</div> </div>
<a onclick="openInfo(event, 'Cart')" class ="icon"><i class="fa fa-shopping-cart"></i> Cart</a>
<a onclick="openInfo(event, 'Products')" class ="icon"><i class="fa fa-list-ul icon"></i> Product</a>
<a onclick="openInfo(event, 'Client')" class ="icon"><i class="fa fa-fw fa-user icon"></i> Client</a>
</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')"> <button class="tablinks" id="client" onclick="openInfo(event, 'Client')">
Client Client
</button> </button>
<button class="tablinks" onclick="openInfo(event, 'Products')"> <button class="tablinks" id="products" onclick="openInfo(event, 'Products')">
Products Products
</button> </button>
<button class="tablinks" onclick="openInfo(event, 'Cart')">Cart</button> <button class="tablinks" id="cart" onclick="openInfo(event, 'Cart')">Cart</button>
</div> </div>
<!-- Tab content --> <!-- Tab content -->
@ -33,7 +45,6 @@
<label for="category-foods1"> Vegetarian</label> <label for="category-foods1"> Vegetarian</label>
<input type="checkbox" id ="Vegetarian" value="Vegetarian" onchange="populateListProductChoices(this.id, 'displayProduct')"> <input type="checkbox" id ="Vegetarian" value="Vegetarian" onchange="populateListProductChoices(this.id, 'displayProduct')">
<br> <br>
<label for="category-foods1"> Gluten-Free</label> <label for="category-foods1"> Gluten-Free</label>
<input type="checkbox" id="GlutenFree" value="GlutenFree" onchange="populateListProductChoices(this.id, 'displayProduct')"> <input type="checkbox" id="GlutenFree" value="GlutenFree" onchange="populateListProductChoices(this.id, 'displayProduct')">
<br> <br>

42
scripts/groceries.js
View file

@ -1,7 +1,7 @@
// Array of products, each product is an object with different fieldset // Array of products, each product is an object with different fieldset
// A set of ingredients should be added to products // A set of ingredients should be added to products
var filtered = [];
var products = [ var products = [
{ {
name: "broccoli", name: "broccoli",
@ -89,7 +89,7 @@ var products = [
}, },
{ {
name: "cheese", name: "cheese",
vegetarian: false, vegetarian: true,
glutenFree: false, glutenFree: false,
organic: false, organic: false,
price: 5.14, price: 5.14,
@ -154,7 +154,6 @@ function getProductImg(productName) {
return prodVal.productImg; 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
@ -184,29 +183,36 @@ function restrictListProducts(prods, restriction) {
} }
function filterProduct(prod, filter) { function filterProduct(prod, filter) {
let prod_filter = []; let prod_filter = [];
for(let i=0; i < prod.length; i++) { for(let i=0; i < prod.length; i++) {
if ( filter === "Fruits" && prod[i].Fruits === true ) {
prod_filter.push(prod[i].name); //filteredArray = prod.find();
var prodVal = products.find(prod1 => prod1.name === prod[i]);
console.log("test", prodVal);
if ( filter === "Fruits" && prodVal.Fruits === true ) {
prod_filter.push(prodVal.name);
} }
else if ( filter === "Vegetables" && prod[i].Vegetables === true ) { else if ( filter === "Vegetables" && prodVal.Vegetables === true ) {
prod_filter.push(prod[i].name); prod_filter.push(prodVal.name);
} }
else if ( filter === "Pantry" && prod[i].Pantry === true ) { else if ( filter === "Pantry" && prodVal.Pantry === true ) {
prod_filter.push(prod[i].name); prod_filter.push(prodVal.name);
} }
else if ( filter === "Dairy" && prod[i].Dairy === true) { else if ( filter === "Dairy" && prodVal.Dairy === true) {
prod_filter.push(prod[i].name); prod_filter.push(prodVal.name);
} }
else if ( filter === "Meat&Seafood" && prod[i].MeatandSeafood === true) { else if ( filter === "Meat&Seafood" && prodVal.MeatandSeafood === true) {
prod_filter.push(prod[i].name); prod_filter.push(prodVal.name);
} }
else if ( filter === "Bakery" && prod[i].Bakery === true) { else if ( filter === "Bakery" && prodVal.Bakery === true) {
prod_filter.push(prod[i].name); prod_filter.push(prodVal.name);
}
else if ( filter === "" ){
prod_filter.push(prodVal.name);
} }
// else if ( filter === "None" ){
// prod_filter.push(prod[i].name);
// }
} }
return prod_filter; return prod_filter;
} }

18
scripts/main.js
View file

@ -23,9 +23,11 @@ function openInfo(evt, tabName) {
// it makes each product name as the label for the checkbos // it makes each product name as the label for the checkbos
function populateListProductChoices(slct1, slct2) { function populateListProductChoices(slct1, slct2) {
var s1 = document.getElementById(slct1); var s1 = document.getElementById(slct1);
var s2 = document.getElementById(slct2); 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 represents the <div> in the Products tab, which shows the product list, so we first set it empty
s2.innerHTML = ""; s2.innerHTML = "";
s2.appendChild(document.createElement("br")); s2.appendChild(document.createElement("br"));
@ -34,6 +36,10 @@ function populateListProductChoices(slct1, slct2) {
// obtain a reduced list of products based on restrictions // obtain a reduced list of products based on restrictions
var optionArray = restrictListProducts(products, s1.value); var optionArray = restrictListProducts(products, s1.value);
//add to the filtered array
filtered = optionArray;
console.log("hello", filtered);
// for each item in the array, create a checkbox element, each containing information such as: // for each item in the array, create a checkbox element, each containing information such as:
// <input type="checkbox" name="product" value="Bread"> // <input type="checkbox" name="product" value="Bread">
// <label for="Bread">Bread/label><br> // <label for="Bread">Bread/label><br>
@ -124,13 +130,23 @@ function filterProducts(sel1, sel2) {
var s1 = document.getElementById(sel1) var s1 = document.getElementById(sel1)
var s2 = document.getElementById(sel2) var s2 = document.getElementById(sel2)
// s2 represents the <div> in the Products tab, which shows the product list, so we first set it empty // s2 represents the <div> in the Products tab, which shows the product list, so we first set it empty
s2.innerHTML = '' s2.innerHTML = ''
s2.appendChild(document.createElement('br')) s2.appendChild(document.createElement('br'))
s2.appendChild(document.createElement('br')) s2.appendChild(document.createElement('br'))
//var restrictProd = restrictListProducts(filtered, );
// obtain a reduced list of products based on restrictions // obtain a reduced list of products based on restrictions
var optionArray = filterProduct(products, s1.value);
var optionArray = filterProduct(filtered, s1.value);
//var optionArray = filterProduct()
// for each item in the array, create a checkbox element, each containing information such as: // for each item in the array, create a checkbox element, each containing information such as:
// <input type="checkbox" name="product" value="Bread"> // <input type="checkbox" name="product" value="Bread">

59
styles/style.css
View file

@ -47,10 +47,10 @@
h1{ h1{
font-family: "Britannic Bold ", sans-serif; font-family: "Britannic Bold ", sans-serif;
font-weight: bolder; font-weight: bolder;
font-size: 50px; color: #ffffff;
color: #f7fcfc; display:inline;
vertical-align: middle; font-size: 3rem;
display: inline;
/* margin-right: 15px; */ /* margin-right: 15px; */
} }
@ -91,6 +91,10 @@ img{
.company-name { .company-name {
text-align: left; text-align: left;
float: left;
display:inline;
padding-left: 10px;
} }
.cart-img { .cart-img {
height: 5%; height: 5%;
@ -123,4 +127,51 @@ i {
.sumo{ .sumo{
font-size: 15px; font-size: 15px;
}
/*
source:
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
*/
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: rgb(212, 100, 100);
overflow: auto;
}
/* Navbar links */
.navbar a {
float: right;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
/* Navbar links on mouse-over */
.navbar a:hover {
background-color: rgb(53, 172, 166);
}
/* Current/active navbar link */
.active {
}
a.icon{
font-size: 25px;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
} }