added checklist
This commit is contained in:
parent
a153b0032b
commit
7e0ac0f93b
3 changed files with 25 additions and 22 deletions
39
index.html
39
index.html
|
@ -26,26 +26,27 @@
|
||||||
<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>Hello, welcome to our grocery store. <br>
|
||||||
We are here to help you choose the perfect groceries for your store.</p>
|
We are here to help you choose the perfect groceries.</p>
|
||||||
<i><strong>Please Choose a Category:</strong></i>
|
<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>
|
<i><strong>Please Choose a Characteristic:</strong></i>
|
||||||
<select class="sumo" name="characterSelect">
|
<select class="sumo" name="characterSelect">
|
||||||
<option value=""></option>
|
<option value=""></option>
|
||||||
|
@ -86,7 +87,9 @@
|
||||||
<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">
|
||||||
|
|
|
@ -101,13 +101,13 @@ function getProductImg(productName) {
|
||||||
function restrictListProducts(prods, restriction) {
|
function restrictListProducts(prods, restriction) {
|
||||||
let product_names = [];
|
let product_names = [];
|
||||||
for (let i=0; i<prods.length; i+=1) {
|
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);
|
product_names.push(prods[i].name);
|
||||||
}
|
}
|
||||||
else if ((restriction == "GlutenFree") && (prods[i].glutenFree == true)){
|
else if ((restriction == "GlutenFree") && (prods[i].glutenFree == true)){
|
||||||
product_names.push(prods[i].name);
|
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);
|
product_names.push(prods[i].name);
|
||||||
}
|
}
|
||||||
else if ((restriction == "Organic") && (prods[i].organic == true)){
|
else if ((restriction == "Organic") && (prods[i].organic == true)){
|
||||||
|
|
|
@ -63,7 +63,6 @@ function populateListProductChoices(slct1, slct2) {
|
||||||
// var itemPrice = getItemPrice(productName);
|
// var itemPrice = getItemPrice(productName);
|
||||||
// label.appendChild(document.createTextNode(" $" + itemPrice));
|
// label.appendChild(document.createTextNode(" $" + itemPrice));
|
||||||
|
|
||||||
|
|
||||||
s2.appendChild(label);
|
s2.appendChild(label);
|
||||||
|
|
||||||
// create a breakline node and add in HTML DOM
|
// create a breakline node and add in HTML DOM
|
||||||
|
@ -83,6 +82,7 @@ function populateListProductChoices(slct1, slct2) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 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
|
||||||
|
|
Loading…
Reference in a new issue