batuhan-basoglu/Sam-s-Mart-Website-Alternative
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

filter products

Browse source
This commit is contained in:
soyed 2021-02-17 15:18:57 -05:00
parent a153b0032b
commit 2d207f06b2
3 changed files with 287 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
index.html
View file

@ -8,7 +8,7 @@
<body> <body>
<div class="company-name"> <div class="company-name">
<h1>Sam's Mart</h1> <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> </div>
<!-- Tab links, each one with an onclick event associated with it --> <!-- Tab links, each one with an onclick event associated with it -->
@ -25,8 +25,11 @@
<!-- Tab content --> <!-- Tab content -->
<div id="Client" class="tabcontent"> <div id="Client" class="tabcontent">
<h3>Client Information</h3> <h3>Client Information</h3>
<p>Hello, welcome to our grocery store. <br> <p>
We are here to help you choose the perfect groceries for your store.</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> <i><strong>Please Choose a Category:</strong></i>
<select <select
id="dietSelect" id="dietSelect"
@ -45,7 +48,7 @@
<option value="Non-organic">Non-Organic</option> <option value="Non-organic">Non-Organic</option>
<option value="None">None</option> <option value="None">None</option>
</select> </select>
<br> <br />
<i><strong>Please Choose a Characteristic:</strong></i> <i><strong>Please Choose a Characteristic:</strong></i>
<select class="sumo" name="characterSelect"> <select class="sumo" name="characterSelect">
<option value=""></option> <option value=""></option>
@ -54,17 +57,37 @@
</select> </select>
<div class="footer"> <div class="footer">
<p class="copyright"> <p class="copyright">
Website created by Ruchira, Sam, Batuhan, and Kene Website created by Ruchira, Sam, Batuhan, and Kene
</p> </p>
</div> </div>
</div> </div>
<div id="Products" class="tabcontent"> <div id="Products" class="tabcontent">
<h3>Your Products</h3> <h3>Your Products</h3>
<p>The products according to the categories and characteristics you have chosen will appear here.</p> <p>
<i style="font-size:20px;"><strong>Please Choose the Items you are going to buy:</strong></i> 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> <div id="displayProduct"></div>
<button <button
id="addCart" id="addCart"
@ -74,32 +97,26 @@
> >
Click Here to Add Selected Items Click Here to Add Selected Items
</button> </button>
<div class="footer"> <div class="footer">
<p class="copyright"> <p class="copyright">
Website created by Ruchira, Sam, Batuhan, and Kene Website created by Ruchira, Sam, Batuhan, and Kene
</p> </p>
</div> </div>
</div> </div>
<div id="Cart" class="tabcontent"> <div id="Cart" class="tabcontent">
<h3>Shopping Cart</h3> <h3>Shopping Cart</h3>
<p>The items you have added to your list will appear here.</p> <p>The items you have added to your list will appear here.</p>
<div id="displayCart"></div> <div id="displayCart"></div>
<div class="footer"> <div class="footer">
<p class="copyright"> <p class="copyright">
Website created by Ruchira, Sam, Batuhan, and Kene Website created by Ruchira, Sam, Batuhan, and Kene
</p> </p>
</div>
</div> </div>
</div>
<script src="scripts/groceries.js"></script> <script src="scripts/groceries.js"></script>
<script src="scripts/main.js"></script> <script src="scripts/main.js"></script>
</body> </body>
</html> </html>

109
scripts/groceries.js
View file

@ -9,7 +9,13 @@ var products = [
glutenFree: true, glutenFree: true,
organic: true, organic: true,
price: 1.99, 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", name: "bread",
@ -17,7 +23,13 @@ var products = [
glutenFree: false, glutenFree: false,
organic: false, organic: false,
price: 2.35, 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", name: "salmon",
@ -25,7 +37,13 @@ var products = [
glutenFree: true, glutenFree: true,
organic: false, organic: false,
price: 10.00, 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", name: "carrot",
@ -33,7 +51,13 @@ var products = [
glutenFree: true, glutenFree: true,
organic: true, organic: true,
price: 2.63, 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", name: "chicken",
@ -41,7 +65,13 @@ var products = [
glutenFree: true, glutenFree: true,
organic: false, organic: false,
price: 6.87, 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", name: "cereal",
@ -49,7 +79,13 @@ var products = [
glutenFree: false, glutenFree: false,
organic: false, organic: false,
price: 2.97, 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", name: "cheese",
@ -57,7 +93,13 @@ var products = [
glutenFree: false, glutenFree: false,
organic: false, organic: false,
price: 5.14, 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", name: "white fish",
@ -65,7 +107,13 @@ var products = [
glutenFree: true, glutenFree: true,
organic: false, organic: false,
price: 13.50, 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", name: "honey",
@ -73,7 +121,13 @@ var products = [
glutenFree: false, glutenFree: false,
organic: true, organic: true,
price: 1.89, 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", name: "onion",
@ -81,7 +135,13 @@ var products = [
glutenFree: true, glutenFree: true,
organic: true, organic: true,
price: 2.22, 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; 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 // Calculate the total price of items, with received parameter being a list of products
function getTotalPrice(chosenProducts) { function getTotalPrice(chosenProducts) {
var totalPrice = 0; var totalPrice = 0;

246
scripts/main.js
View file

@ -1,127 +1,171 @@
// This function is called when any of the tab is clicked // This function is called when any of the tab is clicked
// It is adapted from https://www.w3schools.com/howto/howto_js_tabs.asp // It is adapted from https://www.w3schools.com/howto/howto_js_tabs.asp
function openInfo(evt, tabName) { 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 // Get all elements with class="tablinks" and remove the class "active"
tabcontent = document.getElementsByClassName("tabcontent"); tablinks = document.getElementsByClassName('tablinks')
for (i = 0; i < tabcontent.length; i++) { for (i = 0; i < tablinks.length; i++) {
tabcontent[i].style.display = "none"; tablinks[i].className = tablinks[i].className.replace(' 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";
// 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 // generate a checkbox list from a list of products
// it makes each product name as the label for the checkbos // it makes each product name as the label for the checkbos
function populateListProductChoices(slct1, slct2) { function populateListProductChoices(slct1, slct2) {
var s1 = document.getElementById(slct1); var s1 = document.getElementById(slct1)
var s2 = document.getElementById(slct2); 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);
// for each item in the array, create a checkbox element, each containing information such as: // s2 represents the <div> in the Products tab, which shows the product list, so we first set it empty
// <input type="checkbox" name="product" value="Bread"> s2.innerHTML = ''
// <label for="Bread">Bread/label><br> s2.appendChild(document.createElement('br'))
s2.appendChild(document.createElement('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 // obtain a reduced list of products based on restrictions
// var itemPrice = getItemPrice(productName); var optionArray = restrictListProducts(products, s1.value)
// label.appendChild(document.createTextNode(" $" + itemPrice));
// 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); for (i = 0; i < optionArray.length; i++) {
var productName = optionArray[i]
// create a breakline node and add in HTML DOM // create the checkbox and add in HTML DOM
s2.appendChild(document.createElement("br")); var checkbox = document.createElement('input')
checkbox.type = 'checkbox'
//create <img src=""> checkbox.name = 'product'
var prodImg = document.createElement("img"); checkbox.value = productName
prodImg.src = getProductImg(productName); s2.appendChild(checkbox)
// prodImg = document.getElementById("displayProduct");
// console.log("trial", prodImg.src);
s2.appendChild(prodImg);
//use this to space the images // create a label for the checkbox, and also add in HTML DOM
s2.appendChild(document.createElement("br")); var label = document.createElement('label')
s2.appendChild(document.createElement("br")); 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 // 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 // We build a paragraph to contain the list of selected items, and the total price
function selectedItems(){ function selectedItems() {
var ele = document.getElementsByName('product')
var ele = document.getElementsByName("product"); var chosenProducts = []
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"));
var c = document.getElementById('displayCart')
c.innerHTML = ''
for (i = 0; i < ele.length; i++) { // build list of selected item
if (ele[i].checked) { var para = document.createElement('P')
para.appendChild(document.createTextNode(ele[i].value + " $" + getItemPrice(ele[i].value))); para.innerHTML = 'You have selected : '
para.appendChild(document.createElement("br")); para.appendChild(document.createElement('br'))
//adding the image para.appendChild(document.createElement('br'))
console.log(getProductImg(ele[i].value));
var cartImg = para.appendChild(document.createElement("img")); for (i = 0; i < ele.length; i++) {
cartImg.src = getProductImg(ele[i].value); if (ele[i].checked) {
// para.appendChild(cartImg); para.appendChild(
para.appendChild(document.createElement("br")); document.createTextNode(
chosenProducts.push(ele[i].value); ele[i].value + ' $' + getItemPrice(ele[i].value),
),
} )
para.appendChild(document.createElement('br'))
} //adding the image
console.log(getProductImg(ele[i].value))
// add paragraph and total price var cartImg = para.appendChild(document.createElement('img'))
c.appendChild(para); cartImg.src = getProductImg(ele[i].value)
c.appendChild(document.createTextNode("Total Price is $" + getTotalPrice(chosenProducts))); // 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'))
}
}