Shopping Cart
+Total
-$500
+$500
- - View all products + Profile + +
- + View Cart
-
@@ -87,35 +91,32 @@
Shop With Us
-- ---POPULAR PRODUCTS
-Our Products
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nostrum natus excepturi fuga ullam accusantium vel - ut eveniet aut consequatur laboriosam ipsam.
--- - --- - --- - + ++ ++++-++Trusted Merchant
+FOR 28 YEARS
- - +- - +++MERCHANT COMPANY
+About Us
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui fuga + ipsa, repellat blanditiis nihil, consectetur. + Consequuntur eum inventore, rem maxime, nisi excepturi ipsam libero ratione adipisci alias eius + vero vel!
+ +@@ -140,7 +141,7 @@Get notified on every update.
-+-AWESOME PRODUCTS
Featured Products
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nostrum natus excepturi fuga ullam accusantium vel @@ -186,26 +187,36 @@
Price:
- -----Trusted Merchant
-FOR 28 YEARS
-
+ + +++POPULAR PRODUCTS
+Our Products
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nostrum natus excepturi fuga ullam + accusantium vel + ut eveniet aut consequatur laboriosam ipsam.
++@@ -218,41 +229,47 @@+ +--+-+MERCHANT COMPANY
-About Us
-Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui fuga ipsa, repellat blanditiis nihil, consectetur. - Consequuntur eum inventore, rem maxime, nisi excepturi ipsam libero ratione adipisci alias eius vero vel!
- -+ + +++ ++ + +Leadership
diff --git a/js/cart.js b/js/cart.js index eead5ad..257fd5e 100644 --- a/js/cart.js +++ b/js/cart.js @@ -1,46 +1,53 @@ const productsContainer = document.getElementById("productsContainer") let products +let total = document.getElementById("total") + function getData() { products = JSON.parse(localStorage.getItem("data")) renderProducts() } function renderProducts() { - productsContainer.textContent = "" + productsContainer.innerHTML = `-
- John Rooster
-CO-FOUNDER, PRESIDENT
-Nisi at consequatur unde molestiae quidem provident voluptatum deleniti quo iste error eos est praesentium distinctio - cupiditate tempore suscipit inventore deserunt tenetur.
- - - - +
+ +John Rooster
+CO-FOUNDER, PRESIDENT
+Nisi at consequatur unde molestiae quidem provident voluptatum deleniti quo iste error eos est praesentium distinctio + cupiditate tempore suscipit inventore deserunt tenetur.
+ + + + +-
- John Rooster
-CO-FOUNDER, PRESIDENT
-Nisi at consequatur unde molestiae quidem provident voluptatum deleniti quo iste error eos est praesentium distinctio - cupiditate tempore suscipit inventore deserunt tenetur.
- - - - +
+ +Mark Ethan
+MARKETING, HR
+Nisi at consequatur unde molestiae quidem provident voluptatum deleniti quo iste error eos est praesentium distinctio + cupiditate tempore suscipit inventore deserunt tenetur.
+ + + + +-
- John Rooster
-CO-FOUNDER, PRESIDENT
-Nisi at consequatur unde molestiae quidem provident voluptatum deleniti quo iste error eos est praesentium distinctio - cupiditate tempore suscipit inventore deserunt tenetur.
- - - - +
+ +Harry Paul
+DESIGNER, ARTIST
+Nisi at consequatur unde molestiae quidem provident voluptatum deleniti quo iste error eos est praesentium distinctio + cupiditate tempore suscipit inventore deserunt tenetur.
+ + + + +++Shopping + Cart
+
` for (let i = 0; i < products.length; i++) { productsContainer.innerHTML += ` --+ ++--++-${products[i].name}
-${products[i].price}
+Price: ${products[i].price}
Catagory: ${products[i].catagory}
---
++- + +${products[i].amount}
-+
+- -+
` } + caluclateTotal() if (products.length == 0) { let h2 = document.createElement("h2") h2.textContent = "You haven't added any items to the cart" @@ -48,5 +55,50 @@ function renderProducts() { productsContainer.appendChild(h2) } } +function caluclateTotal() { + let cost = products.reduce((tot, ele) => { + let price = +ele.price.replace("$", "") + return tot + (price * ele.amount) + + }, 0) + + total.textContent = `$${cost}` +} + +function add(event, id) { + // products[id].amount += 1 + let index = products.findIndex((ele) => ele.id === id) + products[index].amount += 1 + event["target"].previousElementSibling.textContent = products[index].amount + caluclateTotal() + +} + +function remove(event, id) { + let index = products.findIndex((ele) => ele.id === id) + products[index].amount -= 1 + if (products[index].amount == 0) { + products.splice(index, 1) + renderProducts() + } + else { + caluclateTotal() + event["target"].nextElementSibling.textContent = products[index].amount + } +} + +function removeFromCart(id) { + let index = products.findIndex((ele) => ele.id === id) + products[index].amount = 0 + products.splice(index, 1) + renderProducts() +} +function loadHome() { + location.assign("index.html") +} window.onload = getData + +window.addEventListener("beforeunload", function () { + localStorage.setItem("data", JSON.stringify(products)) +}) \ No newline at end of file diff --git a/js/login.js b/js/login.js index 3d33b9d..cce24c2 100644 --- a/js/login.js +++ b/js/login.js @@ -13,6 +13,7 @@ function checkData(event) { if (storedEmail === email.value && storedPassword === password.value) { localStorage.setItem("signed", "true") location.assign("index.html") + localStorage.setItem("data", JSON.stringify([])) } else { err.style.display = "block" diff --git a/js/profile.js b/js/profile.js new file mode 100644 index 0000000..c8c5121 --- /dev/null +++ b/js/profile.js @@ -0,0 +1,83 @@ +let profileImage = document.getElementById("profileImage") +const productsContainer = document.getElementById("productsContainer") +let products +let user = document.getElementById("name") +let email = document.getElementById("email") + + +function getData() { + + products = JSON.parse(localStorage.getItem("favs")) + if (!products) { + products = [] + } + console.log(products) + renderProducts() +} + + + + +function renderProducts() { + productsContainer.innerHTML = `++Favourites
+
` + for (let i = 0; i < products.length; i++) { + + + productsContainer.innerHTML += ` + +++ ++++
++${products[i].name}
+Price: ${products[i].price}
+ + + + + +Catagory: ${products[i].catagory}
+ + + +
+ ` + } + if (products.length == 0) { + let h2 = document.createElement("h2") + h2.textContent = "You haven't added items to your favourite" + h2.style.textAlign = "center" + productsContainer.appendChild(h2) + } +} + +function favourite(id) { + let index = products.findIndex((ele) => ele.id === id) + products[index].fav = false + products.splice(index, 1) + renderProducts() + +} +window.onload = function () { + getData() + user.textContent = `${localStorage.getItem("firstName")} ${ localStorage.getItem("lastName") }` + email.textContent = `${localStorage.getItem("email")}` + // let image = (localStorage.getItem("image")) + // console.log(image) + // let url = URL.createObjectURL(image) + // profileImage.src = url + // console.log(profileImage) +} +window.addEventListener("beforeunload", function () { + localStorage.setItem("favs", JSON.stringify(products)) +}) \ No newline at end of file diff --git a/js/register.js b/js/register.js index 553393d..ae6b53c 100644 --- a/js/register.js +++ b/js/register.js @@ -5,9 +5,19 @@ const password = document.getElementById("password") const form = document.getElementById("regForm") let profileImage -form.addEventListener('submit',saveData ) +form.addEventListener('submit', saveData) + function loadImage(event) { - profileImage = URL.createObjectURL(event.target.files[0]) + // console.log(event.target.files) + + // profileImage = URL.createObjectURL(event.target.files[0]) + // console.log(profileImage) + // let ima = document.getElementById("img") + // ima.src = profileImage + // console.log(img) + + // localStorage.setItem("image", ((event.target.files[0]))) + // console.log(JSON.stringify(profileImage)) } function saveData(event) { diff --git a/js/script.js b/js/script.js index c25bc9e..b93b732 100644 --- a/js/script.js +++ b/js/script.js @@ -10,7 +10,8 @@ let itemCon = document.getElementById("items-con") let opened = false let fav = false let num = document.getElementById("productsNum") -let data = [] + + logoutLink.addEventListener('click', ()=> localStorage.setItem("signed", "false")) cart.addEventListener("click", showItems) @@ -38,19 +39,26 @@ window.onload = function () { } // btns = document.getElementsByClassName("cartBtn") - storedData.forEach((ele) => { - itemsInCart.push({ - name: ele.name, - amount: ele.amount, - id: ele.id + if (localStorage.getItem("signed") === "true") { + storedData.forEach((ele) => { + itemsInCart.push({ + name: ele.name, + amount: ele.amount, + id: ele.id + }) }) - }) + } draw() } +window.onbeforeunload = storeData function storeData() { + let data = [] data = JSON.stringify(products.filter((ele) => ele.amount != 0)) + + favourites = JSON.stringify(products.filter((ele) => ele.fav)) localStorage.setItem("data", data) + localStorage.setItem("favs", favourites) } diff --git a/js/search.js b/js/search.js index 350aee6..0e1953e 100644 --- a/js/search.js +++ b/js/search.js @@ -128,6 +128,8 @@ let products = [ ] let productsToDraw = [...products] +let favourites = JSON.parse(localStorage.getItem("favs")) + Pname.addEventListener("keyup", filterInput) catagory.addEventListener("keyup", filterInput) budget.addEventListener("keyup", filterInput) @@ -182,6 +184,10 @@ function renderProducts() { btn.setAttribute("onclick", `removeFromCart(${i})`) btn.textContent = "Remove From Cart" } + if (products[i].fav) { + let heart = document.querySelector(`.fav${i}`) + heart.style.color = "red" + } } } @@ -223,12 +229,19 @@ function renderProducts() { } function getStoredData() { - products.forEach((ele, index) => { - let i = storedData.findIndex((x) => x.id == ele.id) - if ( i != -1) { - products[index].amount = storedData[i].amount - } - }) + if (localStorage.getItem("signed") === "true") { + products.forEach((ele, index) => { + let i = storedData.findIndex((x) => x.id == ele.id) + if (i != -1) { + products[index].amount = storedData[i].amount + } + }) + favourites.forEach((ele) => { + let i = ele.id + products[i].fav = true + }) + } + } getStoredData() renderProducts() diff --git a/login.html b/login.html index 2cb6e6b..ce19da0 100644 --- a/login.html +++ b/login.html @@ -7,14 +7,15 @@Login + - +-