diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..ade3054 Binary files /dev/null and b/.DS_Store differ diff --git a/images/bread.png b/images/bread.png new file mode 100644 index 0000000..bacda6d Binary files /dev/null and b/images/bread.png differ diff --git a/images/broccoli.png b/images/broccoli.png new file mode 100644 index 0000000..8dfc4f9 Binary files /dev/null and b/images/broccoli.png differ diff --git a/images/carrot.png b/images/carrot.png new file mode 100644 index 0000000..573c8ca Binary files /dev/null and b/images/carrot.png differ diff --git a/images/cereal.png b/images/cereal.png new file mode 100644 index 0000000..3b96eb5 Binary files /dev/null and b/images/cereal.png differ diff --git a/images/cheese.png b/images/cheese.png new file mode 100644 index 0000000..12ee91e Binary files /dev/null and b/images/cheese.png differ diff --git a/images/chicken.png b/images/chicken.png new file mode 100644 index 0000000..6028861 Binary files /dev/null and b/images/chicken.png differ diff --git a/images/honey.png b/images/honey.png new file mode 100644 index 0000000..c5c41b8 Binary files /dev/null and b/images/honey.png differ diff --git a/images/onion.png b/images/onion.png new file mode 100644 index 0000000..cec7089 Binary files /dev/null and b/images/onion.png differ diff --git a/images/salmon.png b/images/salmon.png new file mode 100644 index 0000000..f2dfc74 Binary files /dev/null and b/images/salmon.png differ diff --git a/images/white-fish.png b/images/white-fish.png new file mode 100644 index 0000000..5cac5ab Binary files /dev/null and b/images/white-fish.png differ diff --git a/index.html b/index.html index 5db8388..1274b4c 100644 --- a/index.html +++ b/index.html @@ -1,68 +1,104 @@ - - - - + + + + - + +
+

Sam's Mart

+ mart-img +
-
-

Sam's Mart

- - - + +
+ + + +
-
+ +
+

Client Information

+

Tell us a bit about you.

+ Choose a Category: + +
+ Choose a Characteristic: + - -
-

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: +
+ +
+

+ Website created by Ruchira, Sam, Batuhan, and Kene +

+
-
-

Your targeted products

-

We preselected products based on your restrictions.

- Choose items to buy: -
- -
-
-

Cart

-

Here is your cart.

-
-
+
-
-

Website created by Ruchira, Sam, Batuhan, and Kene

-
+
+

Cart

+

Here is your cart.

+
- +
+

+ Website created by Ruchira, Sam, Batuhan, and Kene +

+
- +
- - \ No newline at end of file + + + + + + + diff --git a/scripts/groceries.js b/scripts/groceries.js index 45e1c7d..88ed0b4 100644 --- a/scripts/groceries.js +++ b/scripts/groceries.js @@ -8,70 +8,80 @@ var products = [ vegetarian: true, glutenFree: true, organic: true, - price: 1.99 + price: 1.99, + productImg: "images/broccoli.png" }, { name: "bread", vegetarian: true, glutenFree: false, organic: false, - price: 2.35 + price: 2.35, + productImg: "images/bread.png" }, { name: "salmon", vegetarian: false, glutenFree: true, organic: false, - price: 10.00 + price: 10.00, + productImg: "images/salmon.png" }, { name: "carrot", vegetarian: true, glutenFree: true, organic: true, - price: 2.63 + price: 2.63, + productImg: "images/carrot.png" }, { name: "chicken", vegetarian: false, glutenFree: true, organic: false, - price: 6.87 + price: 6.87, + productImg: "images/chicken.png" }, { name: "cereal", vegetarian: false, glutenFree: false, organic: false, - price: 2.97 + price: 2.97, + productImg: "images/cereal.png" }, { name: "cheese", vegetarian: false, glutenFree: false, organic: false, - price: 5.14 + price: 5.14, + productImg: "images/cheese.png" }, { name: "white fish", vegetarian: false, glutenFree: true, organic: false, - price: 13.50 + price: 13.50, + productImg: "images/white-fish.png" }, { name: "honey", vegetarian: false, glutenFree: false, organic: true, - price: 1.89 + price: 1.89, + productImg: "images/honey.png" }, { name: "onion", vegetarian: true, glutenFree: true, organic: true, - price: 2.22 + price: 2.22, + productImg: "images/onion.png" } ]; @@ -79,6 +89,11 @@ products.sort(function(a, b) { return a.price - b.price; }) +function getProductImg(productName) { + var prodVal = products.find(prod => prod.name === productName); + return prodVal.productImg; +} + // given restrictions provided, make a reduced list of products // prices should be included in this list, as well as a sort based on price @@ -101,7 +116,7 @@ function restrictListProducts(prods, restriction) { else if ((restriction == "Non-Organic") && (prods[i].organic == false)){ product_names.push(prods[i].name); } - else if (restriction == "None"){ + else if ( restriction == "None") { product_names.push(prods[i].name); } } @@ -110,7 +125,7 @@ function restrictListProducts(prods, restriction) { // Calculate the total price of items, with received parameter being a list of products function getTotalPrice(chosenProducts) { - totalPrice = 0; + var totalPrice = 0; for (let i=0; i -1){ totalPrice += products[i].price; diff --git a/scripts/main.js b/scripts/main.js index 55a13a1..a941a3a 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -54,16 +54,30 @@ function populateListProductChoices(slct1, slct2) { // 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)); - - //get price of an item var itemPrice = getItemPrice(productName); - label.appendChild(document.createTextNode(" $" + itemPrice)); + 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")); + s2.appendChild(document.createElement("br")); + + //create + 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")); + } } @@ -83,12 +97,23 @@ function selectedItems(){ 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 + " $" + getItemPrice(ele[i].value))); para.appendChild(document.createElement("br")); + //adding the image + console.log(getProductImg(ele[i].value)); + var cartImg = para.appendChild(document.createElement("img")); + cartImg.src = getProductImg(ele[i].value); + // para.appendChild(cartImg); + para.appendChild(document.createElement("br")); chosenProducts.push(ele[i].value); + } + } // add paragraph and total price diff --git a/styles/style.css b/styles/style.css index 9d1f2a7..ebbe183 100644 --- a/styles/style.css +++ b/styles/style.css @@ -35,29 +35,37 @@ border: 1px solid #ccc; border-top: none; background-color: rgb(222, 224, 228); + } +.tablinks { + font-size: 20px; +} + /* title/header */ h1{ font-family: "Britannic Bold ", sans-serif; font-weight: bolder; - font-size: 40px; + font-size: 50px; color: #f7fcfc; vertical-align: middle; display: inline; - margin-right: 15px; + /* margin-right: 15px; */ } /*footer with signatures */ -.footer { - position: fixed; - left: 0; +.footer { bottom: 0; + left: a; width: 100%; - background-color: rgb(87, 139, 216); - color: rgb(255, 255, 255); + color: rgb(0, 0, 0); text-align: center; + +} +.copyright{ + font-size: 15px; + } .logo{ @@ -65,14 +73,54 @@ h1{ height:auto; vertical-align: middle; margin-bottom: 10px; - - - } body { + margin: 0px; background-color: #66BFBF; background-image: url("images/bg3.jpg"); - + text-align: center; + font-size : 20px; } +img{ + width: 30%; + padding: 3% 7%; + +} + +.company-name { + text-align: left; +} +.cart-img { + height: 5%; + width: 5%; + padding: 0; + padding-left: 15px; + margin-top: 20px; + + /* + position: relative; + top: 40px; + */ +} + +h3 { + font-size: 30px; +} + +p { + font-size: 25px; +} + +i { + font-size: 15px; +} + +.block { + font-size: 15px; +} + +.sumo{ + font-size: 15px; +} \ No newline at end of file