@@ -43,7 +56,12 @@
+
+
+
diff --git a/scripts/groceries.js b/scripts/groceries.js
index 376e1b8..b921eae 100644
--- a/scripts/groceries.js
+++ b/scripts/groceries.js
@@ -4,25 +4,77 @@
var products = [
{
- name: "brocoli",
+ name: "broccoli",
vegetarian: true,
glutenFree: true,
+ organic: true,
price: 1.99
},
{
name: "bread",
vegetarian: true,
glutenFree: false,
+ organic: false,
price: 2.35
},
{
name: "salmon",
vegetarian: false,
glutenFree: true,
+ organic: false,
price: 10.00
+ },
+ {
+ name: "carrot",
+ vegetarian: true,
+ glutenFree: true,
+ organic: true,
+ price: 2.63
+ },
+ {
+ name: "chicken",
+ vegetarian: false,
+ glutenFree: true,
+ organic: false,
+ price: 6.87
+ },
+ {
+ name: "cereal",
+ vegetarian: false,
+ glutenFree: false,
+ organic: false,
+ price: 2.97
+ },
+ {
+ name: "cheese",
+ vegetarian: false,
+ glutenFree: false,
+ organic: false,
+ price: 5.14
+ },
+ {
+ name: "white fish",
+ vegetarian: false,
+ glutenFree: true,
+ organic: false,
+ price: 13.50
+ },
+ {
+ name: "honey",
+ vegetarian: false,
+ glutenFree: false,
+ organic: true,
+ price: 1.89
+ },
+ {
+ name: "onion",
+ vegetarian: true,
+ glutenFree: true,
+ organic: true,
+ price: 2.22
}
];
-
+
// given restrictions provided, make a reduced list of products
@@ -37,6 +89,15 @@ function restrictListProducts(prods, restriction) {
else if ((restriction == "GlutenFree") && (prods[i].glutenFree == true)){
product_names.push(prods[i].name);
}
+ else if ((restriction == "VegetarianANDGluten-Free") && (prods[i].glutenFree == true) && (prods[i].vegetarian == true)){
+ product_names.push(prods[i].name);
+ }
+ else if ((restriction == "Organic") && (prods[i].organic == true)){
+ product_names.push(prods[i].name);
+ }
+ else if ((restriction == "Non-Organic") && (prods[i].organic == false)){
+ product_names.push(prods[i].name);
+ }
else if (restriction == "None"){
product_names.push(prods[i].name);
}
@@ -54,3 +115,12 @@ function getTotalPrice(chosenProducts) {
}
return totalPrice;
}
+
+function getItemPrice(chosenProduct){
+ for (let i=0; i -1){
+ return products[i].price;
+ }
+ }
+
+}
diff --git a/scripts/main.js b/scripts/main.js
index 9e5c975..55a13a1 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -35,7 +35,7 @@ function populateListProductChoices(slct1, slct2) {
s2.innerHTML = "";
// obtain a reduced list of products based on restrictions
- var optionArray = restrictListProducts(products, s1.value);
+ var optionArray = restrictListProducts(products, s1.value);
// for each item in the array, create a checkbox element, each containing information such as:
//
@@ -55,6 +55,11 @@ function populateListProductChoices(slct1, slct2) {
var label = document.createElement('label')
label.htmlFor = productName;
label.appendChild(document.createTextNode(productName));
+
+ //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
@@ -80,7 +85,7 @@ function selectedItems(){
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.createTextNode(ele[i].value + " $" + getItemPrice(ele[i].value)));
para.appendChild(document.createElement("br"));
chosenProducts.push(ele[i].value);
}
@@ -88,7 +93,7 @@ function selectedItems(){
// add paragraph and total price
c.appendChild(para);
- c.appendChild(document.createTextNode("Total Price is " + getTotalPrice(chosenProducts)));
+ c.appendChild(document.createTextNode("Total Price is $" + getTotalPrice(chosenProducts)));
}
diff --git a/styles/style.css b/styles/style.css
index bd6bbfb..5c1a80b 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -34,4 +34,45 @@
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
-}
\ No newline at end of file
+ background-color: rgb(222, 224, 228);
+
+}
+
+/* title/header */
+h1{
+ font-family: "Britannic Bold ", sans-serif;
+ font-weight: bolder;
+ font-size: 40px;
+ color: #f7fcfc;
+ vertical-align: middle;
+ display: inline;
+ margin-right: 15px;
+
+}
+/*footer with signatures */
+.footer {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ background-color: rgb(87, 139, 216);
+ color: rgb(255, 255, 255);
+ text-align: center;
+}
+
+.logo{
+ width: 10%;
+ height:auto;
+ vertical-align: middle;
+ margin-bottom: 10px;
+
+
+
+}
+
+body {
+ background-color: #66BFBF;
+ background-image: url("images/bg3.jpg");
+
+}
+
diff --git a/todo.txt b/todo.txt
new file mode 100644
index 0000000..209bd95
--- /dev/null
+++ b/todo.txt
@@ -0,0 +1,29 @@
+Your website should contain:
+• The name of the grocery store (this is not present in the code provided) ####### DONE
+• At least 10 possible products in the product list. ####### DONE
+• Navigation between two or three zones depending on your information pooling. ####### DONE
+• A personal data entry area ####### DONE
+o Each user may be vegetarian and/or allergic to gluten. (The code provided does not
+considers the OR... change it). ####### DONE
+o Each user can indicate a preference for organic or non-organic products. ####### DONE
+(This is not considered in the code provided, it needs to be added in the ####### DONE
+Options section, and add it as a variable in the list of products). ####### DONE
+• An area for the choice of items ####### DONE
+o Items should be priced. (to add to the code provided) ####### DONE
+o Items should be in sorted by price. (to add to the code provided)
+• An area to view the cart. ####### DONE
+o The contents of the cart and its total. ####### DONE
+• Your signature (Website designed by ...) at the bottom of the page. ####### DONE
+• The use of external CSS (separate file) to set styles for titles, divisions, your signature at the
+bottom of the site. Explore font changes, colors, alignment, etc., to make the site a little
+prettier. For this lab, your rating will be on the feature, so don't waste too much time here if
+you're just starting out.
+• Using JavaScript (separate files) to contain the script associated with the site.
+
+
+Additional possibilities (Optional)
+• Add user characteristics (e.g., diabetic, lactose intolerant)
+• Use photos to show which items to choose from
+• Change the size of the characters for Lucie.
+• Allow the addition of quantities.
+• Add any other HTML/CSS elements to improve site rendering.
\ No newline at end of file
+
+
+