diff --git a/project/js-files/cart.js b/project/js-files/cart.js
index 4cc6b0e89d6facb8c4e6fc60e68033af27f4acb4..a37335400440422dadeda216311cfb700d029522 100644
--- a/project/js-files/cart.js
+++ b/project/js-files/cart.js
@@ -1,92 +1,92 @@
-import { itemCollection } from './dataSet.js'
+// import { itemCollection } from './dataSet.js'
-let items_array = itemCollection;
-let cart = [];
+// let items_array = itemCollection;
+// let cart = [];
-function appendNode(parent, element) {
- parent.appendChild(element);
-};
+// function appendNode(parent, element) {
+// parent.appendChild(element);
+// };
-function getDiv(container) {
- return document.getElementById(container);
-};
+// function getDiv(container) {
+// return document.getElementById(container);
+// };
-function createNode(node) {
- let element = document.createElement(node);
- return element;
-};
+// function createNode(node) {
+// let element = document.createElement(node);
+// return element;
+// };
-function displayItems(items, container) {
- let items_container = getDiv(container);
- items_container.innerHTML = '';
+// function displayItems(items, container) {
+// let items_container = getDiv(container);
+// items_container.innerHTML = '';
- for (let i = 0; i < items.length; i++) {
- let item = items[i];
+// for (let i = 0; i < items.length; i++) {
+// let item = items[i];
- let item_node = createNode("li");
- item_node.setAttribute("id", item.id);
+// let item_node = createNode("li");
+// item_node.setAttribute("id", item.id);
- if (item.quantity > 0) {
- item_node.innerHTML = `${item.name}
- <span id="badge">${item.quantity}</span>`;
- appendNode(items_container, item_node);
- }
- }
-}
+// if (item.quantity > 0) {
+// item_node.innerHTML = `${item.name}
+// <span id="badge">${item.quantity}</span>`;
+// appendNode(items_container, item_node);
+// }
+// }
+// }
-function addOrRemoveItemsFromCart(action) {
- let container = '';
+// function addOrRemoveItemsFromCart(action) {
+// let container = '';
- if (action == "add") {
- container = getDiv("items");
+// if (action == "add") {
+// container = getDiv("items");
- takeAction(container)
- }
- else if (action == "remove") {
- container = getDiv("cart");
+// takeAction(container)
+// }
+// else if (action == "remove") {
+// container = getDiv("cart");
- takeAction(container)
- };
+// takeAction(container)
+// };
- function takeAction(container) {
- container.addEventListener("click", function (event) {
- let item_id = event.target.id;
+// function takeAction(container) {
+// container.addEventListener("click", function (event) {
+// let item_id = event.target.id;
- if (item_id !== "items" && item_id !== "badge") {
- let item = items_array.filter(function (item) {
- return item.id == item_id;
- })[0];
+// if (item_id !== "items" && item_id !== "badge") {
+// let item = items_array.filter(function (item) {
+// return item.id == item_id;
+// })[0];
- let item_in_cart = cart.filter(function (item) {
- return item.id == item_id;
- })[0];
+// let item_in_cart = cart.filter(function (item) {
+// return item.id == item_id;
+// })[0];
- if (item_in_cart == undefined) {
- cart.push(item);
- } else if (action == "add") {
+// if (item_in_cart == undefined) {
+// cart.push(item);
+// } else if (action == "add") {
- item_in_cart.count++;
- } else if (action == "remove") {
- cart.pop(item);
- item_in_cart.count--;
- }
-
- console.log(cart);
- displayItems(cart, "cart");
- };
- });
- };
+// item_in_cart.count++;
+// } else if (action == "remove") {
+// cart.pop(item);
+// item_in_cart.count--;
+// }
+
+// console.log(cart);
+// displayItems(cart, "cart");
+// };
+// });
+// };
-}
+// }
-displayItems(items_array, "items");
-addOrRemoveItemsFromCart('add');
-addOrRemoveItemsFromCart('remove');
+// displayItems(items_array, "items");
+// addOrRemoveItemsFromCart('add');
+// addOrRemoveItemsFromCart('remove');
diff --git a/project/js-files/collection.js b/project/js-files/collection.js
index 670dba398f468cfbc876cf6b900c1cfe91ec9d1e..db44d2022f92a5d090b404d7e6a2130ad4d6249c 100644
--- a/project/js-files/collection.js
+++ b/project/js-files/collection.js
@@ -6,6 +6,122 @@ import { itemCollection } from './dataSet.js'
document.addEventListener('DOMContentLoaded', () => {
+//Cart ---------------------------------------
+
+ let myCart = [];
+ let index;
+ let removePressed = false;
+
+ let rmvBtn = document.getElementById("remove");
+
+ rmvBtn.addEventListener("click", function (event) {
+
+ removePressed= true;
+
+});
+
+
+function appendNode(parent, element) {
+ parent.appendChild(element);
+};
+
+function getDiv(container) {
+ return document.getElementById(container);
+};
+
+function createNode(node) {
+ let element = document.createElement(node);
+ return element;
+};
+
+
+function displayItems(items, container) {
+ let items_container = getDiv(container);
+ items_container.innerHTML = '';
+
+ for (let i = 0; i < items.length; i++) {
+ let item = items[i];
+
+
+
+ let item_node = createNode("li");
+ item_node.setAttribute("id", item.id);
+
+
+ if (item.quantity > -1) {
+ item_node.innerHTML = `${item.name}
+ <span id="badge">${item.quantity}</span>`;
+ appendNode(items_container, item_node);
+ }
+
+ item_node.addEventListener("click", function (event) {
+
+ console.log("du klicka mig");
+
+ if(removePressed) {
+
+ myCart.splice(i, 1);
+ itemCollection[index].quantity += +1;
+ console.log(myCart);
+ displayItems(myCart, "items");
+ removePressed = false;
+ }
+
+
+ });
+
+
+
+
+ }
+}
+
+
+
+
+
+
+
+
+
+ // function takeAction(container) {
+ // container.addEventListener("click", function (event) {
+ // let item_id = event.target.id;
+
+ // if (item_id !== "items" && item_id !== "badge") {
+ // let item = items_array.filter(function (item) {
+ // return item.id == item_id;
+ // })[0];
+
+ // let item_in_cart = myCart.filter(function (item) {
+ // return item.id == item_id;
+ // })[0];
+
+ // if (item_in_cart == undefined) {
+ // myCart.push(item);
+ // } else if (action == "add") {
+
+ // item_in_cart.count++;
+ // } else if (action == "remove") {
+ // myCart.pop(item);
+ // item_in_cart.count--;
+ // }
+
+ // console.log(cart);
+ // displayItems(cart, "cart");
+ // };
+ // });
+ // };
+
+
+
+
+
+
+
+
+//---------------------------------------------//
+
@@ -21,6 +137,8 @@ let thumbnail3 = document.getElementById("thumbnail-3");
let thumbnail4 = document.getElementById("thumbnail-4");
let thumbnail5 = document.getElementById("thumbnail-5");
+let quantity = 0;
+
let mainImage = document.getElementById("mainItem");
let name = document.getElementById("itemName");
@@ -29,12 +147,58 @@ let price = document.getElementById("itemPrice");
let description = document.getElementById("itemDescription");
+let addBtn = document.getElementById("add");
+
+let higher = document.getElementById("plus");
+
+let lower = document.getElementById("minus");
+
+
+higher.addEventListener("click", function (event) {
+
+
+quantity++;
+ console.log(quantity);
+
+
+
+});
+
+lower.addEventListener("click", function (event) {
+
+ quantity--;
+ console.log(quantity);
+
+
+
+});
+
+addBtn.addEventListener("click", function (event) {
+
+ console.log("added to cart");
+
+ if(quantity > 0) {
+
+ for(var i = 0; i< quantity ; i++) {
+ if(itemCollection[index].quantity > 0) {
+
+
+ myCart.push(itemCollection[index]);
+ itemCollection[index].quantity += -1;
+
+
+
+ }
+ }
+ console.log(myCart);
+ }
+});
function showItem(currentItem) {
console.log("INDEXXXX I SHOWCASE: " + currentItem);
-
+ index = currentItem;
thumbnail1.src =(itemCollection[currentItem].image);
@@ -50,17 +214,18 @@ let description = document.getElementById("itemDescription");
price.innerHTML =(itemCollection[currentItem].price);
description.innerHTML =(itemCollection[currentItem].description);
-
+
+
+
+
}
+
-
-
-
-
+//----------------------------------//
@@ -107,6 +272,9 @@ let description = document.getElementById("itemDescription");
currentPage.style.display = "none";
currentPage = cartPage;
currentPage.style.display = "block";
+ displayItems(myCart, "items");
+
+
});
diff --git a/project/js-files/dataSet.js b/project/js-files/dataSet.js
index cf4cd80c4fedd755fb56d8c8acbdfa7a71416cf6..00311d25f2679366119d7ae150322cb45e1c5703 100644
--- a/project/js-files/dataSet.js
+++ b/project/js-files/dataSet.js
@@ -1,6 +1,6 @@
let itemCollection = [
{ name : "Soju", description: "nummer 0", price: 5.99, image: "images/soju.png" , image1: "images/drink1.jpeg", image2: "images/drink3.jpeg", image3: "images/GreenTea.jpg", image4: "images/heeeej.png", quantity: 2 , "id" : 0},
- { name : "Cola", description: "nummer 1", price: 20.00, image: "images/GreenTea.jpg" ,quantity: 3, "id" : 1 },
+ { name : "Cola", description: "nummer 1", price: 20.00, image: "images/GreenTea.jpg" , image1: "images/drink1.jpeg", image2: "images/drink3.jpeg", image3: "images/GreenTea.jpg", image4: "images/heeeej.png", quantity: 3, "id" : 1 },
{ name : "Fanta", description: "nummer 2", price: 20.00, image: "images/GreenTea.jpg" ,quantity: 2, "id": 2 },
{ name : "Sprite", description: "nummer 3", price: 20.00, image: "images/GreenTea.jpg" ,quantity: 3, "id": 3 },
{ name : "Monster", description: "nummer 4", price: 20.00, image: "images/GreenTea.jpg" ,quantity: 1, "id": 4 },
diff --git a/project/js-files/showCase.js b/project/js-files/showCase.js
index 2ecd7aeb80d26692f67bdc3f2a107a83f36da9b1..ba9b4258019d356c7653740ac48a8f2f7bc86c51 100644
--- a/project/js-files/showCase.js
+++ b/project/js-files/showCase.js
@@ -1,14 +1,21 @@
import {itemCollection} from './dataSet.js'
-
+
var index = sessionStorage.getItem("itemIndex");
console.log(index);
+let myCart = [
+
+];
+
+
+
document.addEventListener('DOMContentLoaded', () => {
+
// Establish the array which acts as a data source for the list
@@ -17,6 +24,7 @@ let elements = []
function showItem() {
+
// Make a container element for the list
let listContainer = document.createElement('div');
@@ -29,8 +37,6 @@ function showItem() {
let listItem4 = document.createElement('img');
-
- console.log("INDEXXXX I SHOWCASE: " + index);
listItem4.src =(itemCollection[index].image);
listItem4.className += "image";
@@ -46,9 +52,37 @@ function showItem() {
}
-//window.location.replace("http://www.w3schools.com");
+
+
+// function addItemstoCart(){
+
+
+// let addBtn = document.getElementById("add");
+// addBtn.addEventListener("click", function (event) {
+
+
+
+// myCart.push(itemCollection[index]);
+// console.log(myCart);
+
+
+
+// sessionStorage.setItem("addedItems", JSON.stringify(myCart));
+// sessionStorage.add.
+
+
+// });
+
+
+
+// }
+
+
showItem();
+//addItemstoCart();
+
+
+});
-});
\ No newline at end of file
diff --git a/project/testindex.html b/project/testindex.html
index 52b8799619677a4f3bb51cb6aa9feb17da723e0f..3501f67a6267cb944444be350487905dae7fd9a7 100644
--- a/project/testindex.html
+++ b/project/testindex.html
@@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="reset.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
- <script src="js-files/showCase.js" type="module"></script>
<script src="js-files/dataSet.js" type="module"></script>
<script src="js-files/collection.js" type="module"></script>
<script src="js-files/navigation.js" type="module"></script>
@@ -83,12 +82,12 @@
</div>
<div>
<div class="flex-h space-between padding-40">
- <h3>Add to cart</h3>
+ <h3 id="add">Add to cart</h3>
<div class="quantity-wrapper flex-h center">
<p>Quantity</p>
- <button class="quantity-button minus">-</button>
+ <button id="plus" class="quantity-button minus">-</button>
<p id="quantity-value">1</p>
- <button class="quantity-button plus">+</button>
+ <button id="minus" class="quantity-button plus">+</button>
</div>
</div>
</div>
@@ -110,6 +109,7 @@
<div id="container">
<div id="cart"></div>
</div>
+ <h3 id="remove">Remove</h3>
</div>
<script src="./js-files/cart.js" type="module" ></script>
</div>