filter products
This commit is contained in:
soyed
parent
a153b0032b
commit
2d207f06b2
3 changed files with 287 additions and 137 deletions
69
index.html
69
index.html
|
|
@ -8,7 +8,7 @@
|
|||
<body>
|
||||
<div class="company-name">
|
||||
<h1>Sam's Mart</h1>
|
||||
<img class="cart-img" src="images/logo.png" alt="mart-img">
|
||||
<img class="cart-img" src="images/logo.png" alt="mart-img" />
|
||||
</div>
|
||||
|
||||
<!-- Tab links, each one with an onclick event associated with it -->
|
||||
|
|
@ -25,8 +25,11 @@
|
|||
<!-- 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 for your store.
|
||||
</p>
|
||||
<i><strong>Please Choose a Category:</strong></i>
|
||||
<select
|
||||
id="dietSelect"
|
||||
|
|
@ -45,7 +48,7 @@
|
|||
<option value="Non-organic">Non-Organic</option>
|
||||
<option value="None">None</option>
|
||||
</select>
|
||||
<br>
|
||||
<br />
|
||||
<i><strong>Please Choose a Characteristic:</strong></i>
|
||||
<select class="sumo" name="characterSelect">
|
||||
<option value=""></option>
|
||||
|
|
@ -54,17 +57,37 @@
|
|||
</select>
|
||||
|
||||
<div class="footer">
|
||||
<p class="copyright">
|
||||
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="copyright">
|
||||
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="Products" class="tabcontent">
|
||||
<h3>Your Products</h3>
|
||||
<p>The products according to the categories and characteristics you have chosen will appear here.</p>
|
||||
<i style="font-size:20px;"><strong>Please Choose the Items you are going to buy:</strong></i>
|
||||
<p>
|
||||
The products according to the categories and characteristics you have
|
||||
chosen will appear here.
|
||||
</p>
|
||||
<i style="font-size: 20px;">
|
||||
<strong>Please Choose the Items you are going to buy:</strong>
|
||||
</i>
|
||||
<br />
|
||||
<i><strong>Please Choose a filter:</strong></i>
|
||||
<select
|
||||
id="filterProduct"
|
||||
name="filterProduct"
|
||||
class="filter-section"
|
||||
onchange="filterProducts(this.id, 'displayProduct')"
|
||||
>
|
||||
<option value=""></option>
|
||||
<option value="Fruits">Fruits</option>
|
||||
<option value="Vegetables">Vegetables</option>
|
||||
<option value="Pantry">Pantry</option>
|
||||
<option value="Dairy">Dairy</option>
|
||||
<option value="Bakery">Bakery</option>
|
||||
<option value="Meat&Seafood">Meat&Seafood</option>
|
||||
</select>
|
||||
<div id="displayProduct"></div>
|
||||
<button
|
||||
id="addCart"
|
||||
|
|
@ -74,32 +97,26 @@
|
|||
>
|
||||
Click Here to Add Selected Items
|
||||
</button>
|
||||
<div class="footer">
|
||||
<p class="copyright">
|
||||
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<p class="copyright">
|
||||
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 class="footer">
|
||||
<p class="copyright">
|
||||
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||
</p>
|
||||
<p class="copyright">
|
||||
Website created by Ruchira, Sam, Batuhan, and Kene
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="scripts/groceries.js"></script>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
246
scripts/main.js
246
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 <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);
|
||||
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:
|
||||
// <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);
|
||||
|
||||
// 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 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'))
|
||||
|
||||
// //get price of an item
|
||||
// var itemPrice = getItemPrice(productName);
|
||||
// label.appendChild(document.createTextNode(" $" + itemPrice));
|
||||
// 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>
|
||||
|
||||
s2.appendChild(label);
|
||||
|
||||
// create a breakline node and add in HTML DOM
|
||||
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);
|
||||
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)
|
||||
|
||||
//use this to space the images
|
||||
s2.appendChild(document.createElement("br"));
|
||||
s2.appendChild(document.createElement("br"));
|
||||
// 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))
|
||||
|
||||
}
|
||||
// //get price of an item
|
||||
// var itemPrice = getItemPrice(productName);
|
||||
// label.appendChild(document.createTextNode(" $" + itemPrice));
|
||||
|
||||
s2.appendChild(label)
|
||||
|
||||
// create a breakline node and add in HTML DOM
|
||||
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)
|
||||
// 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
|
||||
|
||||
function selectedItems(){
|
||||
|
||||
var ele = document.getElementsByName("product");
|
||||
var chosenProducts = [];
|
||||
|
||||
var c = document.getElementById('displayCart');
|
||||
c.innerHTML = "";
|
||||
|
||||
// build list of selected item
|
||||
var para = document.createElement("P");
|
||||
para.innerHTML = "You have selected : ";
|
||||
para.appendChild(document.createElement("br"));
|
||||
para.appendChild(document.createElement("br"));
|
||||
function selectedItems() {
|
||||
var ele = document.getElementsByName('product')
|
||||
var chosenProducts = []
|
||||
|
||||
|
||||
var c = document.getElementById('displayCart')
|
||||
c.innerHTML = ''
|
||||
|
||||
for (i = 0; i < ele.length; i++) {
|
||||
if (ele[i].checked) {
|
||||
para.appendChild(document.createTextNode(ele[i].value + " $" + getItemPrice(ele[i].value)));
|
||||
para.appendChild(document.createElement("br"));
|
||||
//adding the image
|
||||
console.log(getProductImg(ele[i].value));
|
||||
var cartImg = para.appendChild(document.createElement("img"));
|
||||
cartImg.src = getProductImg(ele[i].value);
|
||||
// para.appendChild(cartImg);
|
||||
para.appendChild(document.createElement("br"));
|
||||
chosenProducts.push(ele[i].value);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// add paragraph and total price
|
||||
c.appendChild(para);
|
||||
c.appendChild(document.createTextNode("Total Price is $" + getTotalPrice(chosenProducts)));
|
||||
|
||||
// build list of selected item
|
||||
var para = document.createElement('P')
|
||||
para.innerHTML = 'You have selected : '
|
||||
para.appendChild(document.createElement('br'))
|
||||
para.appendChild(document.createElement('br'))
|
||||
|
||||
for (i = 0; i < ele.length; i++) {
|
||||
if (ele[i].checked) {
|
||||
para.appendChild(
|
||||
document.createTextNode(
|
||||
ele[i].value + ' $' + getItemPrice(ele[i].value),
|
||||
),
|
||||
)
|
||||
para.appendChild(document.createElement('br'))
|
||||
//adding the image
|
||||
console.log(getProductImg(ele[i].value))
|
||||
var cartImg = para.appendChild(document.createElement('img'))
|
||||
cartImg.src = getProductImg(ele[i].value)
|
||||
// para.appendChild(cartImg);
|
||||
para.appendChild(document.createElement('br'))
|
||||
chosenProducts.push(ele[i].value)
|
||||
}
|
||||
}
|
||||
|
||||
// add paragraph and total price
|
||||
c.appendChild(para)
|
||||
c.appendChild(
|
||||
document.createTextNode('Total Price is $' + getTotalPrice(chosenProducts)),
|
||||
)
|
||||
}
|
||||
|
||||
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'))
|
||||
|
||||
// obtain a reduced list of products based on restrictions
|
||||
var optionArray = filterProduct(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 (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)
|
||||
|
||||
// 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))
|
||||
|
||||
// //get price of an item
|
||||
// var itemPrice = getItemPrice(productName);
|
||||
// label.appendChild(document.createTextNode(" $" + itemPrice));
|
||||
|
||||
s2.appendChild(label)
|
||||
|
||||
// create a breakline node and add in HTML DOM
|
||||
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'))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue