From 66526df3ea3d724de92c1b83492e1b16eb33242e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Batuhan=20Berk=20Ba=C5=9Fo=C4=9Flu?= Date: Thu, 4 Feb 2021 17:23:04 -0500 Subject: [PATCH] first commit --- index.html | 50 +++++++++++++++++++++++ scripts/groceries.js | 56 ++++++++++++++++++++++++++ scripts/main.js | 94 ++++++++++++++++++++++++++++++++++++++++++++ styles/style.css | 37 +++++++++++++++++ 4 files changed, 237 insertions(+) create mode 100644 index.html create mode 100644 scripts/groceries.js create mode 100644 scripts/main.js create mode 100644 styles/style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..eb0376d --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + + + + + + + +
+ + + +
+ + +
+

Client Information

+

Tell us a bit about you.

+ Choose a Category: + +
+ +
+

Your targeted products

+

We preselected products based on your restrictions.

+ Choose items to buy: +
+ +
+ +
+

Cart

+

Here is your cart.

+
+
+ + + + + + \ No newline at end of file diff --git a/scripts/groceries.js b/scripts/groceries.js new file mode 100644 index 0000000..376e1b8 --- /dev/null +++ b/scripts/groceries.js @@ -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 -1){ + totalPrice += products[i].price; + } + } + return totalPrice; +} diff --git a/scripts/main.js b/scripts/main.js new file mode 100644 index 0000000..9e5c975 --- /dev/null +++ b/scripts/main.js @@ -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
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: + // + //