finished
This commit is contained in:
ruchi
parent
f992656570
commit
a08ef5fcb0
4 changed files with 113 additions and 29 deletions
23
index.html
23
index.html
|
|
@ -3,23 +3,35 @@
|
|||
<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" />
|
||||
<!-- 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>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div class="navbar">
|
||||
|
||||
<div class="company-name">
|
||||
<h1>Sam's Mart</h1>
|
||||
<img class="cart-img" src="images/logo.png" alt="mart-img" />
|
||||
<h1 >Sam's Mart</h1>
|
||||
</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 -->
|
||||
<div class="tab">
|
||||
<button class="tablinks" onclick="openInfo(event, 'Client')">
|
||||
<button class="tablinks" id="client" onclick="openInfo(event, 'Client')">
|
||||
Client
|
||||
</button>
|
||||
<button class="tablinks" onclick="openInfo(event, 'Products')">
|
||||
<button class="tablinks" id="products" onclick="openInfo(event, 'Products')">
|
||||
Products
|
||||
</button>
|
||||
<button class="tablinks" onclick="openInfo(event, 'Cart')">Cart</button>
|
||||
<button class="tablinks" id="cart" onclick="openInfo(event, 'Cart')">Cart</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab content -->
|
||||
|
|
@ -33,7 +45,6 @@
|
|||
<label for="category-foods1"> Vegetarian</label>
|
||||
<input type="checkbox" id ="Vegetarian" value="Vegetarian" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
||||
<br>
|
||||
|
||||
<label for="category-foods1"> Gluten-Free</label>
|
||||
<input type="checkbox" id="GlutenFree" value="GlutenFree" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
||||
<br>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
// Array of products, each product is an object with different fieldset
|
||||
// A set of ingredients should be added to products
|
||||
|
||||
var filtered = [];
|
||||
var products = [
|
||||
{
|
||||
name: "broccoli",
|
||||
|
|
@ -89,7 +89,7 @@ var products = [
|
|||
},
|
||||
{
|
||||
name: "cheese",
|
||||
vegetarian: false,
|
||||
vegetarian: true,
|
||||
glutenFree: false,
|
||||
organic: false,
|
||||
price: 5.14,
|
||||
|
|
@ -154,7 +154,6 @@ function getProductImg(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
|
||||
|
||||
|
|
@ -184,29 +183,36 @@ function restrictListProducts(prods, restriction) {
|
|||
}
|
||||
|
||||
function filterProduct(prod, filter) {
|
||||
|
||||
let prod_filter = [];
|
||||
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 ) {
|
||||
prod_filter.push(prod[i].name);
|
||||
else if ( filter === "Vegetables" && prodVal.Vegetables === true ) {
|
||||
prod_filter.push(prodVal.name);
|
||||
}
|
||||
else if ( filter === "Pantry" && prod[i].Pantry === true ) {
|
||||
prod_filter.push(prod[i].name);
|
||||
else if ( filter === "Pantry" && prodVal.Pantry === true ) {
|
||||
prod_filter.push(prodVal.name);
|
||||
}
|
||||
else if ( filter === "Dairy" && prod[i].Dairy === true) {
|
||||
prod_filter.push(prod[i].name);
|
||||
else if ( filter === "Dairy" && prodVal.Dairy === true) {
|
||||
prod_filter.push(prodVal.name);
|
||||
}
|
||||
else if ( filter === "Meat&Seafood" && prod[i].MeatandSeafood === true) {
|
||||
prod_filter.push(prod[i].name);
|
||||
else if ( filter === "Meat&Seafood" && prodVal.MeatandSeafood === true) {
|
||||
prod_filter.push(prodVal.name);
|
||||
}
|
||||
else if ( filter === "Bakery" && prod[i].Bakery === true) {
|
||||
prod_filter.push(prod[i].name);
|
||||
else if ( filter === "Bakery" && prodVal.Bakery === true) {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,9 +23,11 @@ function openInfo(evt, tabName) {
|
|||
// 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 = "";
|
||||
s2.appendChild(document.createElement("br"));
|
||||
|
|
@ -34,6 +36,10 @@ function populateListProductChoices(slct1, slct2) {
|
|||
// obtain a reduced list of products based on restrictions
|
||||
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:
|
||||
// <input type="checkbox" name="product" value="Bread">
|
||||
// <label for="Bread">Bread/label><br>
|
||||
|
|
@ -124,13 +130,23 @@ function filterProducts(sel1, sel2) {
|
|||
var s1 = document.getElementById(sel1)
|
||||
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.innerHTML = ''
|
||||
s2.appendChild(document.createElement('br'))
|
||||
s2.appendChild(document.createElement('br'))
|
||||
|
||||
|
||||
//var restrictProd = restrictListProducts(filtered, );
|
||||
|
||||
// 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:
|
||||
// <input type="checkbox" name="product" value="Bread">
|
||||
|
|
|
|||
|
|
@ -47,10 +47,10 @@
|
|||
h1{
|
||||
font-family: "Britannic Bold ", sans-serif;
|
||||
font-weight: bolder;
|
||||
font-size: 50px;
|
||||
color: #f7fcfc;
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
color: #ffffff;
|
||||
display:inline;
|
||||
font-size: 3rem;
|
||||
|
||||
/* margin-right: 15px; */
|
||||
|
||||
}
|
||||
|
|
@ -91,6 +91,10 @@ img{
|
|||
|
||||
.company-name {
|
||||
text-align: left;
|
||||
float: left;
|
||||
display:inline;
|
||||
padding-left: 10px;
|
||||
|
||||
}
|
||||
.cart-img {
|
||||
height: 5%;
|
||||
|
|
@ -124,3 +128,50 @@ i {
|
|||
.sumo{
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue