filter products
This commit is contained in:
soyed
commit
f992656570
3 changed files with 75 additions and 71 deletions
47
index.html
47
index.html
|
|
@ -25,30 +25,28 @@
|
|||
<!-- Tab content -->
|
||||
<div id="Client" class="tabcontent">
|
||||
<h3>Client Information</h3>
|
||||
<p>
|
||||
Hello, welcome to our grocery store.
|
||||
<br />
|
||||
We are here to help you choose the perfect groceries for your store.
|
||||
</p>
|
||||
<p>Hello, welcome to our grocery store. <br>
|
||||
We are here to help you choose the perfect groceries.</p>
|
||||
<i><strong>Please Choose a Category:</strong></i>
|
||||
<select
|
||||
id="dietSelect"
|
||||
name="dietSelect"
|
||||
class="sumo"
|
||||
onchange="populateListProductChoices(this.id, 'displayProduct')"
|
||||
>
|
||||
<option value=""></option>
|
||||
|
||||
<option value="Vegetarian">Vegetarian</option>
|
||||
<option value="GlutenFree">Gluten Free</option>
|
||||
<option value="VegetarianANDGluten-Free">
|
||||
Vegetarian and Gluten-Free
|
||||
</option>
|
||||
<option value="Organic">Organic</option>
|
||||
<option value="Non-organic">Non-Organic</option>
|
||||
<option value="None">None</option>
|
||||
</select>
|
||||
<br />
|
||||
<br>
|
||||
<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>
|
||||
<label for="category-foods1"> Organic</label>
|
||||
<input type="checkbox" id="Organic" value="Organic" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
||||
<br>
|
||||
<label for="category-foods1"> Non-Organic</label>
|
||||
<input type="checkbox" id="Non-Organic" value="Non-Organic" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
||||
<br>
|
||||
<label for="category-foods1"> None</label>
|
||||
<input type="checkbox" id="None" value="None" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
||||
<br>
|
||||
|
||||
<i><strong>Please Choose a Characteristic:</strong></i>
|
||||
<select class="sumo" name="characterSelect">
|
||||
<option value=""></option>
|
||||
|
|
@ -107,7 +105,10 @@
|
|||
<div id="Cart" class="tabcontent">
|
||||
<h3>Shopping Cart</h3>
|
||||
<p>The items you have added to your list will appear here.</p>
|
||||
<div id="displayCart"></div>
|
||||
<div id="displayCart">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p class="copyright">
|
||||
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||
|
|
|
|||
|
|
@ -161,13 +161,13 @@ function getProductImg(productName) {
|
|||
function restrictListProducts(prods, restriction) {
|
||||
let product_names = [];
|
||||
for (let i=0; i<prods.length; i+=1) {
|
||||
if ((restriction == "Vegetarian") && (prods[i].vegetarian == true)){
|
||||
if ((restriction === "Vegetarian") && (prods[i].vegetarian == true)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if ((restriction == "GlutenFree") && (prods[i].glutenFree == true)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if ((restriction == "VegetarianANDGluten-Free") && (prods[i].glutenFree == true) && (prods[i].vegetarian == true)){
|
||||
else if ((restriction == "Vegetarian" && restriction == "GlutenFree") && (prods[i].glutenFree == true) && (prods[i].vegetarian == true)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if ((restriction == "Organic") && (prods[i].organic == true)){
|
||||
|
|
@ -198,7 +198,7 @@ function filterProduct(prod, filter) {
|
|||
else if ( filter === "Dairy" && prod[i].Dairy === true) {
|
||||
prod_filter.push(prod[i].name);
|
||||
}
|
||||
else if ( filter === "Meat&SeaFood" && prod[i].MeatandSeafood === true) {
|
||||
else if ( filter === "Meat&Seafood" && prod[i].MeatandSeafood === true) {
|
||||
prod_filter.push(prod[i].name);
|
||||
}
|
||||
else if ( filter === "Bakery" && prod[i].Bakery === true) {
|
||||
|
|
|
|||
|
|
@ -23,58 +23,61 @@ 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)
|
||||
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'))
|
||||
s2.appendChild(document.createElement('br'))
|
||||
// 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"));
|
||||
|
||||
// obtain a reduced list of products based on restrictions
|
||||
var optionArray = restrictListProducts(products, s1.value)
|
||||
// obtain a reduced list of products based on restrictions
|
||||
var optionArray = restrictListProducts(products, s1.value);
|
||||
|
||||
// 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>
|
||||
// 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>
|
||||
|
||||
for (i = 0; i < optionArray.length; i++) {
|
||||
var productName = optionArray[i]
|
||||
// create the checkbox and add in HTML DOM
|
||||
var checkbox = document.createElement('input')
|
||||
checkbox.type = 'checkbox'
|
||||
checkbox.name = 'product'
|
||||
checkbox.value = productName
|
||||
s2.appendChild(checkbox)
|
||||
for (i = 0; i < optionArray.length; i++) {
|
||||
|
||||
// create a label for the checkbox, and also add in HTML DOM
|
||||
var label = document.createElement('label')
|
||||
label.htmlFor = productName
|
||||
var itemPrice = getItemPrice(productName)
|
||||
label.appendChild(document.createTextNode(productName + ' $' + itemPrice))
|
||||
var productName = optionArray[i];
|
||||
// create the checkbox and add in HTML DOM
|
||||
var checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.name = "product";
|
||||
checkbox.value = productName;
|
||||
s2.appendChild(checkbox);
|
||||
|
||||
// //get price of an item
|
||||
// var itemPrice = getItemPrice(productName);
|
||||
// label.appendChild(document.createTextNode(" $" + itemPrice));
|
||||
// create a label for the checkbox, and also add in HTML DOM
|
||||
var label = document.createElement('label')
|
||||
label.htmlFor = productName;
|
||||
var itemPrice = getItemPrice(productName);
|
||||
label.appendChild(document.createTextNode(productName + " $" + itemPrice));
|
||||
|
||||
s2.appendChild(label)
|
||||
// //get price of an item
|
||||
// var itemPrice = getItemPrice(productName);
|
||||
// label.appendChild(document.createTextNode(" $" + itemPrice));
|
||||
|
||||
// create a breakline node and add in HTML DOM
|
||||
s2.appendChild(document.createElement('br'))
|
||||
s2.appendChild(label);
|
||||
|
||||
//create <img src="">
|
||||
var prodImg = document.createElement('img')
|
||||
prodImg.src = getProductImg(productName)
|
||||
// prodImg = document.getElementById("displayProduct");
|
||||
// console.log("trial", prodImg.src);
|
||||
s2.appendChild(prodImg)
|
||||
// create a breakline node and add in HTML DOM
|
||||
s2.appendChild(document.createElement("br"));
|
||||
|
||||
//use this to space the images
|
||||
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"));
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// This function is called when the "Add selected items to cart" button in clicked
|
||||
// The purpose is to build the HTML to be displayed (a Paragraph)
|
||||
// We build a paragraph to contain the list of selected items, and the total price
|
||||
|
|
|
|||
Loading…
Reference in a new issue