first commit
This commit is contained in:
commit
66526df3ea
4 changed files with 237 additions and 0 deletions
50
index.html
Normal file
50
index.html
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<! This style sheet is taken from https://www.w3schools.com/howto/howto_js_tabs.asp>
|
||||||
|
<link href="styles/style.css" rel="stylesheet" type="text/css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Tab links, each one with an onclick event associated with it -->
|
||||||
|
<div class="tab">
|
||||||
|
<button class="tablinks" onclick="openInfo(event, 'Client')">Client</button>
|
||||||
|
<button class="tablinks" onclick="openInfo(event, 'Products')">Products</button>
|
||||||
|
<button class="tablinks" onclick="openInfo(event, 'Cart')">Cart</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab content -->
|
||||||
|
<div id="Client" class="tabcontent">
|
||||||
|
<h3>Client Information</h3>
|
||||||
|
<p>Tell us a bit about you.</p>
|
||||||
|
Choose a Category:
|
||||||
|
<select id="dietSelect" name="dietSelect" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
||||||
|
<option value=""></option>
|
||||||
|
<option value="Vegetarian">Vegetarian</option>
|
||||||
|
<option value="GlutenFree">GlutenFree</option>
|
||||||
|
<option value="None">None</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="Products" class="tabcontent">
|
||||||
|
<h3>Your targeted products</h3>
|
||||||
|
<p>We preselected products based on your restrictions.</p>
|
||||||
|
Choose items to buy:
|
||||||
|
<div id="displayProduct"></div>
|
||||||
|
<button id="addCart" type="button" class="block" onclick="selectedItems()">
|
||||||
|
Add selected items to cart.
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="Cart" class="tabcontent">
|
||||||
|
<h3>Cart</h3>
|
||||||
|
<p>Here is your cart.</p>
|
||||||
|
<div id="displayCart"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="scripts/groceries.js"></script>
|
||||||
|
<script src="scripts/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
56
scripts/groceries.js
Normal file
56
scripts/groceries.js
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
|
||||||
|
// Array of products, each product is an object with different fieldset
|
||||||
|
// A set of ingredients should be added to products
|
||||||
|
|
||||||
|
var products = [
|
||||||
|
{
|
||||||
|
name: "brocoli",
|
||||||
|
vegetarian: true,
|
||||||
|
glutenFree: true,
|
||||||
|
price: 1.99
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "bread",
|
||||||
|
vegetarian: true,
|
||||||
|
glutenFree: false,
|
||||||
|
price: 2.35
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "salmon",
|
||||||
|
vegetarian: false,
|
||||||
|
glutenFree: true,
|
||||||
|
price: 10.00
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// given restrictions provided, make a reduced list of products
|
||||||
|
// prices should be included in this list, as well as a sort based on price
|
||||||
|
|
||||||
|
function restrictListProducts(prods, restriction) {
|
||||||
|
let product_names = [];
|
||||||
|
for (let i=0; i<prods.length; i+=1) {
|
||||||
|
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 == "None"){
|
||||||
|
product_names.push(prods[i].name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return product_names;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate the total price of items, with received parameter being a list of products
|
||||||
|
function getTotalPrice(chosenProducts) {
|
||||||
|
totalPrice = 0;
|
||||||
|
for (let i=0; i<products.length; i+=1) {
|
||||||
|
if (chosenProducts.indexOf(products[i].name) > -1){
|
||||||
|
totalPrice += products[i].price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return totalPrice;
|
||||||
|
}
|
||||||
94
scripts/main.js
Normal file
94
scripts/main.js
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
|
||||||
|
// 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="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 = "";
|
||||||
|
|
||||||
|
// 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 (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;
|
||||||
|
label.appendChild(document.createTextNode(productName));
|
||||||
|
s2.appendChild(label);
|
||||||
|
|
||||||
|
// create a breakline node and add in HTML DOM
|
||||||
|
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
|
||||||
|
|
||||||
|
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 selected : ";
|
||||||
|
para.appendChild(document.createElement("br"));
|
||||||
|
for (i = 0; i < ele.length; i++) {
|
||||||
|
if (ele[i].checked) {
|
||||||
|
para.appendChild(document.createTextNode(ele[i].value));
|
||||||
|
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)));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
37
styles/style.css
Normal file
37
styles/style.css
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
/* This style sheet is taken from https://www.w3schools.com/howto/howto_js_tabs.asp> */
|
||||||
|
|
||||||
|
/* Style the tab */
|
||||||
|
.tab {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the buttons that are used to open the tab content */
|
||||||
|
.tab button {
|
||||||
|
background-color: inherit;
|
||||||
|
float: left;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 14px 16px;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change background color of buttons on hover */
|
||||||
|
.tab button:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create an active/current tablink class */
|
||||||
|
.tab button.active {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the tab content */
|
||||||
|
.tabcontent {
|
||||||
|
display: none;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue