From a08ef5fcb043a09f6e1e806f751712ec1ffe1804 Mon Sep 17 00:00:00 2001 From: ruchi Date: Wed, 17 Feb 2021 22:33:47 -0500 Subject: [PATCH] finished --- index.html | 23 ++++++++++++----- scripts/groceries.js | 42 +++++++++++++++++-------------- scripts/main.js | 18 +++++++++++++- styles/style.css | 59 +++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 113 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index 93dd101..fd32e17 100644 --- a/index.html +++ b/index.html @@ -3,23 +3,35 @@ + + + + + + + +
- - - +
@@ -33,7 +45,6 @@
-
diff --git a/scripts/groceries.js b/scripts/groceries.js index 50659f9..38ef60e 100644 --- a/scripts/groceries.js +++ b/scripts/groceries.js @@ -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; } diff --git a/scripts/main.js b/scripts/main.js index bc06a48..daae6ff 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -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
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: // //