From 2d207f06b2684a3988e14c8e77b3eb8b19297644 Mon Sep 17 00:00:00 2001 From: soyed Date: Wed, 17 Feb 2021 15:18:57 -0500 Subject: [PATCH] filter products --- index.html | 69 +++++++----- scripts/groceries.js | 109 +++++++++++++++++-- scripts/main.js | 246 +++++++++++++++++++++++++------------------ 3 files changed, 287 insertions(+), 137 deletions(-) diff --git a/index.html b/index.html index be4f6f4..1e35981 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@

Sam's Mart

- mart-img + mart-img
@@ -25,8 +25,11 @@

Client Information

-

Hello, welcome to our grocery store.
- We are here to help you choose the perfect groceries for your store.

+

+ Hello, welcome to our grocery store. +
+ We are here to help you choose the perfect groceries for your store. +

Please Choose a Category: -
+
Please Choose a Characteristic:
-

- Website created by Ruchira, Sam, Batuhan, and Kene -

-
- +

+ Website created by Ruchira, Sam, Batuhan, and Kene +

+

Your Products

-

The products according to the categories and characteristics you have chosen will appear here.

- Please Choose the Items you are going to buy: +

+ The products according to the categories and characteristics you have + chosen will appear here. +

+ + Please Choose the Items you are going to buy: + +
+ Please Choose a filter: +
-
-

- Website created by Ruchira, Sam, Batuhan, and Kene -

-
- - +
+

+ Website created by Ruchira, Sam, Batuhan, and Kene +

+

Shopping Cart

The items you have added to your list will appear here.

-
-

- Website created by Ruchira, Sam, Batuhan, and Kene -

+

+ Website created by Ruchira, Sam, Batuhan, and Kene +

+
- - - - diff --git a/scripts/groceries.js b/scripts/groceries.js index 88ed0b4..360a6b1 100644 --- a/scripts/groceries.js +++ b/scripts/groceries.js @@ -9,7 +9,13 @@ var products = [ glutenFree: true, organic: true, price: 1.99, - productImg: "images/broccoli.png" + productImg: "images/broccoli.png", + Fruits: false, + Dairy: false, + Vegetables: true, + Pantry: false, + Bakery: false, + MeatandSeafood: false }, { name: "bread", @@ -17,7 +23,13 @@ var products = [ glutenFree: false, organic: false, price: 2.35, - productImg: "images/bread.png" + productImg: "images/bread.png", + Fruits: false, + Dairy: false, + Vegetables: false, + Pantry: false, + Bakery: true, + MeatandSeafood: false }, { name: "salmon", @@ -25,7 +37,13 @@ var products = [ glutenFree: true, organic: false, price: 10.00, - productImg: "images/salmon.png" + productImg: "images/salmon.png", + Fruits: false, + Dairy: false, + Vegetables: false, + Pantry: false, + Bakery: false, + MeatandSeafood: true }, { name: "carrot", @@ -33,7 +51,13 @@ var products = [ glutenFree: true, organic: true, price: 2.63, - productImg: "images/carrot.png" + productImg: "images/carrot.png", + Fruits: false, + Dairy: false, + Vegetables: true, + Pantry: false, + Bakery: false, + MeatandSeafood: false }, { name: "chicken", @@ -41,7 +65,13 @@ var products = [ glutenFree: true, organic: false, price: 6.87, - productImg: "images/chicken.png" + productImg: "images/chicken.png", + Fruits: false, + Dairy: false, + Vegetables: false, + Pantry: false, + Bakery: false, + MeatandSeafood: true }, { name: "cereal", @@ -49,7 +79,13 @@ var products = [ glutenFree: false, organic: false, price: 2.97, - productImg: "images/cereal.png" + productImg: "images/cereal.png", + Fruits: false, + Dairy: false, + Vegetables: false, + Pantry: true, + Bakery: false, + MeatandSeafood: false }, { name: "cheese", @@ -57,7 +93,13 @@ var products = [ glutenFree: false, organic: false, price: 5.14, - productImg: "images/cheese.png" + productImg: "images/cheese.png", + Fruits: false, + Dairy: true, + Vegetables: false, + Pantry: false, + Bakery: false, + MeatandSeafood: false }, { name: "white fish", @@ -65,7 +107,13 @@ var products = [ glutenFree: true, organic: false, price: 13.50, - productImg: "images/white-fish.png" + productImg: "images/white-fish.png", + Fruits: false, + Dairy: false, + Vegetables: false, + Pantry: false, + Bakery: false, + MeatandSeafood: true }, { name: "honey", @@ -73,7 +121,13 @@ var products = [ glutenFree: false, organic: true, price: 1.89, - productImg: "images/honey.png" + productImg: "images/honey.png", + Fruits: false, + Dairy: false, + Vegetables: false, + Pantry: true, + Bakery: false, + MeatandSeafood: false }, { name: "onion", @@ -81,7 +135,13 @@ var products = [ glutenFree: true, organic: true, price: 2.22, - productImg: "images/onion.png" + productImg: "images/onion.png", + Fruits: false, + Dairy: false, + Vegetables: true, + Pantry: false, + Bakery: false, + MeatandSeafood: false } ]; @@ -123,6 +183,35 @@ function restrictListProducts(prods, restriction) { return product_names; } +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); + } + else if ( filter === "Vegetables" && prod[i].Vegetables === true ) { + prod_filter.push(prod[i].name); + } + else if ( filter === "Pantry" && prod[i].Pantry === true ) { + prod_filter.push(prod[i].name); + } + else if ( filter === "Dairy" && prod[i].Dairy === true) { + prod_filter.push(prod[i].name); + } + else if ( filter === "Meat&SeaFood" && prod[i].MeatandSeafood === true) { + prod_filter.push(prod[i].name); + } + else if ( filter === "Bakery" && prod[i].Bakery === true) { + prod_filter.push(prod[i].name); + } + // else if ( filter === "None" ){ + // prod_filter.push(prod[i].name); + // } + } + return prod_filter; +} + + // Calculate the total price of items, with received parameter being a list of products function getTotalPrice(chosenProducts) { var totalPrice = 0; diff --git a/scripts/main.js b/scripts/main.js index 4035776..f916b15 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,127 +1,171 @@ - // This function is called when any of the tab is clicked // It is adapted from https://www.w3schools.com/howto/howto_js_tabs.asp function openInfo(evt, tabName) { + // Get all elements with class="tabcontent" and hide them + tabcontent = document.getElementsByClassName('tabcontent') + for (i = 0; i < tabcontent.length; i++) { + tabcontent[i].style.display = 'none' + } - // Get all elements with class="tabcontent" and hide them - tabcontent = document.getElementsByClassName("tabcontent"); - for (i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; - } - - // Get all elements with class="tablinks" and remove the class "active" - tablinks = document.getElementsByClassName("tablinks"); - for (i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" active", ""); - } - - // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tabName).style.display = "block"; - evt.currentTarget.className += " active"; + // Get all elements with class="tablinks" and remove the class "active" + tablinks = document.getElementsByClassName('tablinks') + for (i = 0; i < tablinks.length; i++) { + tablinks[i].className = tablinks[i].className.replace(' active', '') + } + // Show the current tab, and add an "active" class to the button that opened the tab + document.getElementById(tabName).style.display = 'block' + evt.currentTarget.className += ' active' } - - // generate a checkbox list from a list of products // 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")); - s2.appendChild(document.createElement("br")); - - // obtain a reduced list of products based on restrictions - var optionArray = restrictListProducts(products, s1.value); + var s1 = document.getElementById(slct1) + var s2 = document.getElementById(slct2) - // for each item in the array, create a checkbox element, each containing information such as: - // - //