From b36ad9433fa93254cec5facc046e281262f8de7b Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Wed, 26 Jun 2019 15:08:41 -0500 Subject: [PATCH 01/20] search function --- public/index.html | 13 +++++++++++-- public/index.js | 24 +++++++++++++++++++++++- public/styles.css | 24 ++++++++++++++++++++++++ 3 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 public/styles.css diff --git a/public/index.html b/public/index.html index 138da963..88a48e7d 100644 --- a/public/index.html +++ b/public/index.html @@ -5,10 +5,19 @@ My Store + - - +
+

search

+
+
+ +
+ +
+ + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 034dbd5e..a2e9870d 100644 --- a/public/index.js +++ b/public/index.js @@ -1 +1,23 @@ -//stuff \ No newline at end of file +var myProducts = products; +let productsDiv = document.getElementById("products"); +let newProdName = ""; + + +myProducts.map(product =>{ + newProdName += `

${product.name}

${product.description}
`; +}) +productsDiv.innerHTML = newProdName; + + +function searchFunc(){ + newProdName = "" + let searchText = document.getElementById("searchText").value; + myProducts.map(product =>{ + let name = product.name.toLowerCase(); + let desc = product.description; + if(name.includes(searchText) || desc.includes(searchText)){ + newProdName += `

${product.name}

${product.description}
`; + } + }) + productsDiv.innerHTML = newProdName; +} diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 00000000..37125a7a --- /dev/null +++ b/public/styles.css @@ -0,0 +1,24 @@ +*{ + box-sizing: border-box; +} + +#products{ + display: flex; + flex-wrap:wrap; + +} + +#products > div{ + border: 1px solid black; + width: 250px; + height: 380px; + text-align:center; +} + +#products div div:first-child{ + height: 250px; +} + +.input div{ + display:inline-block; +} \ No newline at end of file From de7633b3e447e323194d9e7baa5bb8b42d46de1e Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Thu, 27 Jun 2019 13:36:13 -0500 Subject: [PATCH 02/20] more efficient filter --- public/index.js | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/public/index.js b/public/index.js index a2e9870d..b1385964 100644 --- a/public/index.js +++ b/public/index.js @@ -1,23 +1,17 @@ -var myProducts = products; -let productsDiv = document.getElementById("products"); -let newProdName = ""; - - -myProducts.map(product =>{ - newProdName += `

${product.name}

${product.description}
`; -}) -productsDiv.innerHTML = newProdName; +function listProducts(products){ + let productsDiv = document.getElementById("products"); + let newProdName = ""; + products.map(product =>{ + newProdName += `

${product.name}

${product.description}
`; + }) + productsDiv.innerHTML = newProdName; +} +listProducts(products); function searchFunc(){ - newProdName = "" let searchText = document.getElementById("searchText").value; - myProducts.map(product =>{ - let name = product.name.toLowerCase(); - let desc = product.description; - if(name.includes(searchText) || desc.includes(searchText)){ - newProdName += `

${product.name}

${product.description}
`; - } - }) - productsDiv.innerHTML = newProdName; + let filteredProducts = products.filter(prod => + prod.name.toLowerCase().includes(searchText) || prod.description.toLowerCase().includes(searchText)); + listProducts(filteredProducts) } From c8c7677377599daddeb610e2f0545c75bd48ad59 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Sun, 30 Jun 2019 18:13:47 -0500 Subject: [PATCH 03/20] more info and session storage --- db.json | 3 +-- public/cart.png | Bin 0 -> 1550 bytes public/index.html | 4 +++- public/index.js | 60 +++++++++++++++++++++++++++++++++++++++++++--- public/styles.css | 17 +++++++++---- 5 files changed, 74 insertions(+), 10 deletions(-) create mode 100644 public/cart.png diff --git a/db.json b/db.json index 5d309aa3..abcdf6f1 100644 --- a/db.json +++ b/db.json @@ -1,6 +1,5 @@ - { - "products": [{ + "products" : [{ "_id": 1, "name": "Body Luxuries Sweet Lavender Hand Sanitizer", "description": "Makes your hands clean", diff --git a/public/cart.png b/public/cart.png new file mode 100644 index 0000000000000000000000000000000000000000..026f3d7680d7fd505238dbfd46d46fc9442be4a7 GIT binary patch literal 1550 zcmV+p2J!icP)O!>|ZgL>6UO1O(JT6KWGbHL-Q67)5DpD;RCsT7inG48uTFVERdm zb--Gqv1v6n*3u=~$_LvN1;hb?K|rhsl+9u3?DKB(9zv)E27}Q1W%AD4d(ZEk^FQZ2 zg8zAuasRvbAC6!hh{yOd!wRV0VANhXdF;u2GV%bsG7p6diLj9nG6BTdDWx~dRLbOe z2gu0C5K_tFg9Mm}0Htgy2qa}Lj2jdRcD^9~^~RH(q-W)QO$fG{jJ9QGj~BKrJV0iy zoG?tjjnX$xtCUw49w1x(CIPubDa|QUDT@{yAR|)|4u&>SO3#(4ly5CKKte`_Fu~n# zgaVE)+BqT6u|{J|`SIe;X+_96P0yBV2uQTImlqg@;W-8d2f?x|e7wB?j2*XFEO?^R z!C5SZtE=k-@9@Ylj7AeYrBXOJIPi9zP6xBa0+!lB%2kCAW(LU0`-%{3+p_U>{t|9| zSMd{idVBHq&g~Eig}jY>=Iqf?kw{vzY69TLYro)8=VPR8OMzG{=I!5Hz5<ec;|KG&l&sK}*N-Iy8jp+ByUV1R!jAC~q_94fw6<7JL`^@TuWech6tA z*VGJvJ*X}zD7Fibl9D2j21Sf`NIb+_H*erC>Fe*uw^x5age(lnFDFi`fyZ6lsQCFB zVxl6E_*56SYwK|5t_C(r*Pm7?E9?Sr8`87$?hs(5v-6mUC`B!m$c4o6WFTtkeiL^qi{j!7Ksf=LyITkw^rAV5}4k1|ugV zj6+QYz&W#8ZEzBaz&t&t*BbzeQMHOlfUyBLqX_v3WXTT^LXNC^^%Xwv+`4?_dkpGy zcqc8D?+;Uz;k6r;c+l}Dwr|-4H#axfY&M)Ze*spOtu8N7@)a;EfZdsgw=j(0VrWP( zf|myJhwj!lps#-b$w`S2IfjH=V$sNx&hF&Iz8ilu~aeVw|{(&9I1fWX0l8%#PYVOD%mtmvAt52WVgNL{Rs*^k;=-+kDoUBoq`B}s}-{7 zxNaZ6m-vo0d6|p`NnO>=D2v&IfPerP3B#b$g6QkWm1V9iT z8{gyR>gIjovr_o^`Qd&`3-<5-kZZSfO`4jxX8~lze7(1CFIrn$&CQxx(X#;IF$ot4!S*v} zzJ&kc#r)sbuV06%q?nr}?>E=io|rWNkRS|?MZc$1>i+pDH6#)Vy1TouCu0vxCR0nZ zrbhOk2&{-NWCY}sz5DiI!-kFg+$cJB6qS{gfDP-L8fy4SXtxuNZwil&%O?yY_mD~< zlgZFfUysqzQA$~wu5Gw;`dNUG$b>*gAv6pjl9vI7B zV8UbKKS&H6H~;_u07*qoM6N<$g2RQ> AAOHXW literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html index 88a48e7d..ecc8a47d 100644 --- a/public/index.html +++ b/public/index.html @@ -13,11 +13,13 @@

search

+
- + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index b1385964..397bdf4c 100644 --- a/public/index.js +++ b/public/index.js @@ -1,10 +1,31 @@ + +let cartItems = []; +let sessionCartItems = sessionStorage.getItem("cart"); +if(sessionCartItems){ + cartItems = JSON.parse(sessionCartItems); +} + function listProducts(products){ + let cartDiv = document.getElementById("cart"); let productsDiv = document.getElementById("products"); - let newProdName = ""; + let newProd = ''; products.map(product =>{ - newProdName += `

${product.name}

${product.description}
`; + newProd += `
+
+ +
${product.description}
+
${product.price}
+
rating: ${product.rating}
+
+
+
+
`; }) - productsDiv.innerHTML = newProdName; + + if (productsDiv){ + productsDiv.innerHTML = newProd; + } + cartDiv.innerHTML = JSON.parse(sessionStorage.getItem("cart")).length; } listProducts(products); @@ -15,3 +36,36 @@ function searchFunc(){ prod.name.toLowerCase().includes(searchText) || prod.description.toLowerCase().includes(searchText)); listProducts(filteredProducts) } + + +function addToCart(prodId){ + products.map(product => { + if(product.id === prodId){ + cartItems.push(product); + } + }) + console.log(cartItems); + sessionStorage.setItem("cart", JSON.stringify(cartItems)); + listProducts(products); +} + + +function moreInfo(prodId){ + let moreInfoDiv = ''; + let viewProd = products.filter(prod => + prod.id === prodId + ) + listProducts(viewProd); + let productDiv = document.getElementById(`moreInfo${prodId}`); + viewProd[0].reviews.map(review => + moreInfoDiv += `
${review.description}
+
${review.rating}
+
` + ) + productDiv.innerHTML = moreInfoDiv; + + + +} + + diff --git a/public/styles.css b/public/styles.css index 37125a7a..550815c4 100644 --- a/public/styles.css +++ b/public/styles.css @@ -2,6 +2,10 @@ box-sizing: border-box; } +.input div{ + display:inline-block; +} + #products{ display: flex; flex-wrap:wrap; @@ -11,14 +15,19 @@ #products > div{ border: 1px solid black; width: 250px; - height: 380px; + height: auto; text-align:center; } -#products div div:first-child{ +#product a div{ height: 250px; } -.input div{ - display:inline-block; +#product { + padding: +} + +div.review{ + height: auto; + border: 1px solid black; } \ No newline at end of file From 597f8ab3a27cbd9a9db44e84ba0751c6dde79df4 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Sun, 30 Jun 2019 18:19:50 -0500 Subject: [PATCH 04/20] view cart items --- public/index.html | 2 +- public/index.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index ecc8a47d..63a8bf2c 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,7 @@

search

-
+
diff --git a/public/index.js b/public/index.js index 397bdf4c..674c3960 100644 --- a/public/index.js +++ b/public/index.js @@ -63,9 +63,10 @@ function moreInfo(prodId){
` ) productDiv.innerHTML = moreInfoDiv; +} - - +function viewCart(){ + listProducts(cartItems); } From 6204a0db8d50caa99279f259a619957ba0a0b0fb Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Mon, 1 Jul 2019 01:09:52 -0500 Subject: [PATCH 05/20] corrected error --- db.json | 1 + public/index.js | 11 ++++++++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/db.json b/db.json index abcdf6f1..4d3c43c9 100644 --- a/db.json +++ b/db.json @@ -1,3 +1,4 @@ + { "products" : [{ "_id": 1, diff --git a/public/index.js b/public/index.js index 674c3960..ca82d3d3 100644 --- a/public/index.js +++ b/public/index.js @@ -1,6 +1,8 @@ let cartItems = []; +//checks if items are in session storage let sessionCartItems = sessionStorage.getItem("cart"); +//if there are items in session storage assigns the to cart array if(sessionCartItems){ cartItems = JSON.parse(sessionCartItems); } @@ -25,26 +27,29 @@ function listProducts(products){ if (productsDiv){ productsDiv.innerHTML = newProd; } + //counts items in cart session storage cartDiv.innerHTML = JSON.parse(sessionStorage.getItem("cart")).length; } listProducts(products); - +//function filters using search text box function searchFunc(){ let searchText = document.getElementById("searchText").value; + //shows only products matching search let filteredProducts = products.filter(prod => prod.name.toLowerCase().includes(searchText) || prod.description.toLowerCase().includes(searchText)); listProducts(filteredProducts) } - +//adds items to cart array using id as parameter function addToCart(prodId){ + //maps through products to find correct product with matching id products.map(product => { if(product.id === prodId){ cartItems.push(product); } }) - console.log(cartItems); + //sets items in session storage sessionStorage.setItem("cart", JSON.stringify(cartItems)); listProducts(products); } From 8c9ff7c34b5e3c5a065cfb8325553a85d99c0ba2 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Mon, 1 Jul 2019 01:12:41 -0500 Subject: [PATCH 06/20] corrected error --- db.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/db.json b/db.json index 4d3c43c9..5d309aa3 100644 --- a/db.json +++ b/db.json @@ -1,6 +1,6 @@ { - "products" : [{ + "products": [{ "_id": 1, "name": "Body Luxuries Sweet Lavender Hand Sanitizer", "description": "Makes your hands clean", From 9be80d5e343fb01042d72eb80a797d2535ac2052 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Mon, 1 Jul 2019 11:07:13 -0500 Subject: [PATCH 07/20] create quantity attribute for cart --- public/index.js | 60 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 44 insertions(+), 16 deletions(-) diff --git a/public/index.js b/public/index.js index ca82d3d3..09ca23d9 100644 --- a/public/index.js +++ b/public/index.js @@ -1,12 +1,3 @@ - -let cartItems = []; -//checks if items are in session storage -let sessionCartItems = sessionStorage.getItem("cart"); -//if there are items in session storage assigns the to cart array -if(sessionCartItems){ - cartItems = JSON.parse(sessionCartItems); -} - function listProducts(products){ let cartDiv = document.getElementById("cart"); let productsDiv = document.getElementById("products"); @@ -19,16 +10,26 @@ function listProducts(products){
${product.price}
rating: ${product.rating}
-
+
`; }) - + //checks if items are in session storage + let sessionCartItems = sessionStorage.getItem("cart"); + //if there are items in session storage assigns the to cart array + sessionCartItems ? ( + cartItems = JSON.parse(sessionCartItems), + counter = 0, + cartItems.map(prod => { + counter = counter + prod.quantity; + }), + cartDiv.innerHTML = counter + ) : ( + cartItems = [] + ); if (productsDiv){ productsDiv.innerHTML = newProd; } - //counts items in cart session storage - cartDiv.innerHTML = JSON.parse(sessionStorage.getItem("cart")).length; } listProducts(products); @@ -46,11 +47,26 @@ function addToCart(prodId){ //maps through products to find correct product with matching id products.map(product => { if(product.id === prodId){ - cartItems.push(product); + let inCart = false; + cartItems.map(prod =>{ + if(prod.id === prodId){ + inCart = true; + prod.quantity = prod.quantity + 1; + } + }) + if(!inCart){ + cartItems.push(product); + product.quantity = 1; + } + } + }); + cartItems.map(product =>{ + }) - //sets items in session storage + // //sets items in session storage sessionStorage.setItem("cart", JSON.stringify(cartItems)); + console.log(cartItems); listProducts(products); } @@ -72,6 +88,18 @@ function moreInfo(prodId){ function viewCart(){ listProducts(cartItems); + cartItems.map(product => { + let cartButton = document.getElementById(`cartButton${product.id}`); + cartButton.setAttribute('onClick', `removeCartItem(${product.id});`); + cartButton.innerHTML = "REMOVE ITEM" + document.getElementById(`moreInfo${product.id}`).innerHTML = `QTY: ${product.quantity}`; + }); } - +function removeCartItem(prodId){ + let removeProdIdx = cartItems.map(prod =>{return prod.id}).indexOf(prodId); + cartItems.splice(removeProdIdx, 1); + //updates session storage + sessionStorage.setItem("cart", JSON.stringify(cartItems)); + viewCart(); +} \ No newline at end of file From 4d7dc3aaf24d1c1cbbccb66aef58c7c852d20a67 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Mon, 1 Jul 2019 19:52:46 -0500 Subject: [PATCH 08/20] quantity drop down menu --- public/index.js | 62 +++++++++++++++++++++++++++++-------------------- 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/public/index.js b/public/index.js index 09ca23d9..1a318cdc 100644 --- a/public/index.js +++ b/public/index.js @@ -21,7 +21,7 @@ function listProducts(products){ cartItems = JSON.parse(sessionCartItems), counter = 0, cartItems.map(prod => { - counter = counter + prod.quantity; + counter = counter + Number(prod.quantity); }), cartDiv.innerHTML = counter ) : ( @@ -44,26 +44,15 @@ function searchFunc(){ //adds items to cart array using id as parameter function addToCart(prodId){ - //maps through products to find correct product with matching id - products.map(product => { - if(product.id === prodId){ - let inCart = false; - cartItems.map(prod =>{ - if(prod.id === prodId){ - inCart = true; - prod.quantity = prod.quantity + 1; - } - }) - if(!inCart){ - cartItems.push(product); - product.quantity = 1; - } - - } - }); - cartItems.map(product =>{ - - }) + let foundProd = products.find(p => p.id === prodId); + let foundInCart = cartItems.find(p => p.id === prodId); + if (!foundInCart){ + cartItems.push(foundProd); + cartItems.find(p => p.id === prodId).quantity = 1; + } + else{ + foundInCart.quantity += 1; + } // //sets items in session storage sessionStorage.setItem("cart", JSON.stringify(cartItems)); console.log(cartItems); @@ -73,9 +62,7 @@ function addToCart(prodId){ function moreInfo(prodId){ let moreInfoDiv = ''; - let viewProd = products.filter(prod => - prod.id === prodId - ) + let viewProd = products.filter(prod =>prod.id === prodId) listProducts(viewProd); let productDiv = document.getElementById(`moreInfo${prodId}`); viewProd[0].reviews.map(review => @@ -88,14 +75,39 @@ function moreInfo(prodId){ function viewCart(){ listProducts(cartItems); + cartDiv = document.getElementById("cart"); cartItems.map(product => { let cartButton = document.getElementById(`cartButton${product.id}`); cartButton.setAttribute('onClick', `removeCartItem(${product.id});`); cartButton.innerHTML = "REMOVE ITEM" - document.getElementById(`moreInfo${product.id}`).innerHTML = `QTY: ${product.quantity}`; + moreInfoDiv = document.getElementById(`moreInfo${product.id}`) + moreInfoDiv.innerHTML = ` + + `; + document.getElementById(`qty${product.id}`).value = product.quantity; + document.getElementById(`qty${product.id}`).options[product.quantity - 1].selected = true; + console.log(cartItems); }); } +function changeQuantity(prodId, qty){ + let product = cartItems.find(p => p.id === prodId); + product.quantity = Number(qty); + sessionStorage.setItem("cart", JSON.stringify(cartItems)); + viewCart(); +} + function removeCartItem(prodId){ let removeProdIdx = cartItems.map(prod =>{return prod.id}).indexOf(prodId); cartItems.splice(removeProdIdx, 1); From 823e1f120340f36ac51d50a77bdddfa636205be9 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Tue, 2 Jul 2019 00:03:16 -0500 Subject: [PATCH 09/20] banner color and filter drop down --- public/index.html | 8 +++++++- public/index.js | 16 ++++++++++++++-- public/styles.css | 11 ++++++++++- 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/public/index.html b/public/index.html index 63a8bf2c..ee21acae 100644 --- a/public/index.html +++ b/public/index.html @@ -11,7 +11,13 @@

search

-
+
+
diff --git a/public/index.js b/public/index.js index 1a318cdc..1d2270c5 100644 --- a/public/index.js +++ b/public/index.js @@ -1,3 +1,5 @@ + +//lists products function listProducts(products){ let cartDiv = document.getElementById("cart"); let productsDiv = document.getElementById("products"); @@ -55,7 +57,6 @@ function addToCart(prodId){ } // //sets items in session storage sessionStorage.setItem("cart", JSON.stringify(cartItems)); - console.log(cartItems); listProducts(products); } @@ -97,7 +98,6 @@ function viewCart(){ `; document.getElementById(`qty${product.id}`).value = product.quantity; document.getElementById(`qty${product.id}`).options[product.quantity - 1].selected = true; - console.log(cartItems); }); } @@ -114,4 +114,16 @@ function removeCartItem(prodId){ //updates session storage sessionStorage.setItem("cart", JSON.stringify(cartItems)); viewCart(); +} + +function filterCategory(cat){ + if (cat === 'all'){ + listProducts(products); + } + else{ + let filteredProducts = products.filter(prod => + prod.category === cat); + listProducts(filteredProducts); + } + } \ No newline at end of file diff --git a/public/styles.css b/public/styles.css index 550815c4..7a521fd1 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,10 +1,19 @@ *{ box-sizing: border-box; } - +.input{ + background-color: #8a065e; + text-align: center; +} .input div{ display:inline-block; } +input{ + width: 500px; +} +.textBox{ + float: center; +} #products{ display: flex; From c887fe69cc4abeab05b7f5171709594692df8f8e Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Tue, 2 Jul 2019 01:03:36 -0500 Subject: [PATCH 10/20] align header and create reset on click --- public/index.html | 30 ++++++++++++++++----------- public/index.js | 1 + public/styles.css | 52 ++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 61 insertions(+), 22 deletions(-) diff --git a/public/index.html b/public/index.html index ee21acae..10e3a424 100644 --- a/public/index.html +++ b/public/index.html @@ -9,18 +9,24 @@ -
-

search

-
-
-
-
- +
+
+

ACA Store

+
+

search

+
+
+ +
+
+
+
+
diff --git a/public/index.js b/public/index.js index 1d2270c5..21bbedcb 100644 --- a/public/index.js +++ b/public/index.js @@ -117,6 +117,7 @@ function removeCartItem(prodId){ } function filterCategory(cat){ + console.log(cat); if (cat === 'all'){ listProducts(products); } diff --git a/public/styles.css b/public/styles.css index 7a521fd1..5d9d5510 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,19 +1,39 @@ *{ box-sizing: border-box; } -.input{ + +header{ background-color: #8a065e; + height:85px; +} + +.title:hover{ + cursor: pointer; +} + +.header{ text-align: center; + height:85px; + display:flex; + flex-direction:row; + justify-content: space-between; + align-items: stretch; } -.input div{ - display:inline-block; + +.centerHeader{ + display:flex; + justify-content: space-around; + align-items: center; +} + +.centerHeader div{ + align-items: center; } + input{ width: 500px; } -.textBox{ - float: center; -} + #products{ display: flex; @@ -32,11 +52,23 @@ input{ height: 250px; } -#product { - padding: -} - div.review{ height: auto; border: 1px solid black; +} + +.cart{ + margin:0px 30px; + display:flex; + align-items: center; +} + +.cart img:hover{ + background-color: #c71c8e; + cursor: pointer; +} + +#cart{ + font-family: 'Times New Roman', Times, serif; + font-size:20px; } \ No newline at end of file From 7df7362b66276c02e0dea1aa666e28f543da7009 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Tue, 2 Jul 2019 22:17:33 -0500 Subject: [PATCH 11/20] reviews on hover feature --- public/index.js | 32 ++++++++++++++++++++++++++++++-- public/styles.css | 44 +++++++++++++++++++++++++++++++++++++++----- 2 files changed, 69 insertions(+), 7 deletions(-) diff --git a/public/index.js b/public/index.js index 21bbedcb..e3c01e82 100644 --- a/public/index.js +++ b/public/index.js @@ -8,11 +8,14 @@ function listProducts(products){ newProd += `
 +

${product.description}
${product.price}
-
rating: ${product.rating}
+
+ rating: ${product.rating} +
+
-
`; }) @@ -32,6 +35,7 @@ function listProducts(products){ if (productsDiv){ productsDiv.innerHTML = newProd; } + } listProducts(products); @@ -48,10 +52,12 @@ function searchFunc(){ function addToCart(prodId){ let foundProd = products.find(p => p.id === prodId); let foundInCart = cartItems.find(p => p.id === prodId); + //if items is in not in cart push to cart array if (!foundInCart){ cartItems.push(foundProd); cartItems.find(p => p.id === prodId).quantity = 1; } + // if items is in cart, adjust quantity else{ foundInCart.quantity += 1; } @@ -127,4 +133,26 @@ function filterCategory(cat){ listProducts(filteredProducts); } +} + +function displayReviews(prodId){ + product = products.find(p => p.id === prodId); + let reviewDiv = document.getElementById(`hiddenReviews ${prodId}`); + let ratingDiv = document.getElementById(`rating ${prodId}`) + let newRev = ''; + + for(i=0; i<3; i++){ + if(product.reviews[i]){ + newRev += `
${product.reviews[i].description}
+
${product.reviews[i].rating}
+
` + } + } + reviewDiv.innerHTML = newRev; +} + +function hideReviews(prodId){ + let reviewDiv = document.getElementById(`hiddenReviews ${prodId}`); + let newRev = `
`; + reviewDiv.innerHTML = newRev; } \ No newline at end of file diff --git a/public/styles.css b/public/styles.css index 5d9d5510..4d301b15 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,9 +1,12 @@ *{ box-sizing: border-box; } +#products{ + background-color: rgb(238, 223, 228); +} header{ - background-color: #8a065e; + background-color: #9e5887; height:85px; } @@ -42,7 +45,7 @@ input{ } #products > div{ - border: 1px solid black; + border: 1px solid rgb(148, 148, 148); width: 250px; height: auto; text-align:center; @@ -54,7 +57,8 @@ input{ div.review{ height: auto; - border: 1px solid black; + border: 1px solid rgb(148, 148, 148); + background-color:white; } .cart{ @@ -63,12 +67,42 @@ div.review{ align-items: center; } +.cart img{ + border: 1px solid #9e5887; +} + .cart img:hover{ - background-color: #c71c8e; + border: 1px solid #66114a; cursor: pointer; } +#categories{ + margin: 0 10px; + width: 150px; +} + #cart{ font-family: 'Times New Roman', Times, serif; font-size:20px; -} \ No newline at end of file +} + +.cartButton { + background-color:#6b2f5c; + border: 1px solid #a04288; + border-radius:12px; + /* display:inline-block; */ + cursor:pointer; + color:#ffffff; + font-family:Verdana; + font-size:12px; + padding:3px 25px; +} +.cartButton:hover { + background-color:#7e4d71; +} + +.hiddenReviews{ + position: absolute; + margin: 0px 0px 600px 200px; + max-height:300px; +} From abf4f5e996904c21efe94770a93721c6f5b51b68 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Wed, 3 Jul 2019 19:21:16 -0500 Subject: [PATCH 12/20] comments added --- public/index.html | 5 ++- public/index.js | 87 ++++++++++++++++++++++++++++++++++++++++------- public/styles.css | 18 +++++++++- 3 files changed, 94 insertions(+), 16 deletions(-) diff --git a/public/index.html b/public/index.html index 10e3a424..f224d10b 100644 --- a/public/index.html +++ b/public/index.html @@ -27,11 +27,10 @@
-
- -
+
+ \ No newline at end of file diff --git a/public/index.js b/public/index.js index e3c01e82..61e4b8b2 100644 --- a/public/index.js +++ b/public/index.js @@ -4,6 +4,7 @@ function listProducts(products){ let cartDiv = document.getElementById("cart"); let productsDiv = document.getElementById("products"); let newProd = ''; + //maps through products and creates a div for each product products.map(product =>{ newProd += ``; }) - //checks if items are in session storage + //checks if there are items in session storage let sessionCartItems = sessionStorage.getItem("cart"); - //if there are items in session storage assigns the to cart array + //if there are items in session storage, assigns the to cart array sessionCartItems ? ( cartItems = JSON.parse(sessionCartItems), counter = 0, @@ -33,44 +34,53 @@ function listProducts(products){ cartItems = [] ); if (productsDiv){ - productsDiv.innerHTML = newProd; + productsDiv.innerHTML = newProd + '
'; } } +//calls function to list all products listProducts(products); //function filters using search text box function searchFunc(){ + //assigns search text to variable let searchText = document.getElementById("searchText").value; //shows only products matching search let filteredProducts = products.filter(prod => prod.name.toLowerCase().includes(searchText) || prod.description.toLowerCase().includes(searchText)); + //lists only filtered products listProducts(filteredProducts) } //adds items to cart array using id as parameter function addToCart(prodId){ + //finds the requested product in the products array and assigns to variable let foundProd = products.find(p => p.id === prodId); + //finds product object in cart let foundInCart = cartItems.find(p => p.id === prodId); //if items is in not in cart push to cart array if (!foundInCart){ cartItems.push(foundProd); cartItems.find(p => p.id === prodId).quantity = 1; } - // if items is in cart, adjust quantity + // if item is in cart, adjust quantity else{ foundInCart.quantity += 1; } // //sets items in session storage sessionStorage.setItem("cart", JSON.stringify(cartItems)); + //lists all products listProducts(products); } - +//function to display more information on a product function moreInfo(prodId){ + //assigns empty string let moreInfoDiv = ''; + //filters array to only the product requested let viewProd = products.filter(prod =>prod.id === prodId) listProducts(viewProd); + //allows access to the moreInfo div to display all reviews and ratings let productDiv = document.getElementById(`moreInfo${prodId}`); viewProd[0].reviews.map(review => moreInfoDiv += `
${review.description}
@@ -80,13 +90,20 @@ function moreInfo(prodId){ productDiv.innerHTML = moreInfoDiv; } +//function displays cart items and quantities function viewCart(){ listProducts(cartItems); - cartDiv = document.getElementById("cart"); + //variable declaration for total cost + let subtotal = 0; + //variable declaration for total item count + let itemCounter = 0; + //maps through items in cart cartItems.map(product => { + //changes functionality of the cart button to remove from cart let cartButton = document.getElementById(`cartButton${product.id}`); cartButton.setAttribute('onClick', `removeCartItem(${product.id});`); cartButton.innerHTML = "REMOVE ITEM" + //more info div to contain drop down for quantity of a particular item moreInfoDiv = document.getElementById(`moreInfo${product.id}`) moreInfoDiv.innerHTML = ` `; - document.getElementById(`qty${product.id}`).value = product.quantity; + //sets default selected value in drop down menu to the current quantity document.getElementById(`qty${product.id}`).options[product.quantity - 1].selected = true; + //variable stores the price as a float + let priceFloat = Number(product.price.slice(1, product.price.length)); + //updates total item count variable + itemCounter += Number(product.quantity); + //updates subtotal variable + subtotal += priceFloat * Number(product.quantity); }); + //changes style of subtotal div to display current total + let subtotalDiv = document.getElementById('subtotal'); + subtotalDiv.style.border = '1px solid black'; + subtotalDiv.style.height = '100px' + subtotalDiv.style.width = '250px' + subtotalDiv.innerHTML = `subtotal (${itemCounter} items): $${subtotal} +
+ `; } +//function called when quantity is changed via the drop down menu function changeQuantity(prodId, qty){ let product = cartItems.find(p => p.id === prodId); product.quantity = Number(qty); + //updates session storage if items are added sessionStorage.setItem("cart", JSON.stringify(cartItems)); viewCart(); } +//function called in cart view +//function removes item from cart function removeCartItem(prodId){ let removeProdIdx = cartItems.map(prod =>{return prod.id}).indexOf(prodId); cartItems.splice(removeProdIdx, 1); - //updates session storage + //updates session storage if item is removed sessionStorage.setItem("cart", JSON.stringify(cartItems)); viewCart(); } +//function called when category is changed via dropdown menu on homepage function filterCategory(cat){ - console.log(cat); + //if all is selected, displays all products if (cat === 'all'){ listProducts(products); } + //filters products depending on category selected else{ let filteredProducts = products.filter(prod => prod.category === cat); listProducts(filteredProducts); } - } +//function called on mouse over of ratings div +//dislays first 3 reviews for each product function displayReviews(prodId){ product = products.find(p => p.id === prodId); let reviewDiv = document.getElementById(`hiddenReviews ${prodId}`); - let ratingDiv = document.getElementById(`rating ${prodId}`) let newRev = ''; - for(i=0; i<3; i++){ if(product.reviews[i]){ newRev += `
${product.reviews[i].description}
@@ -151,8 +187,35 @@ function displayReviews(prodId){ reviewDiv.innerHTML = newRev; } +//functon called on mouse out of ratings div +//hides reviews function hideReviews(prodId){ let reviewDiv = document.getElementById(`hiddenReviews ${prodId}`); let newRev = `
`; reviewDiv.innerHTML = newRev; +} + +//function called on submit of checkout information +//displays alert that purchase was successful +function submitFunc(){ + alert("We have received your order!"); +} + +//function called when customer clicks checkout button +//displays form for data entry +function checkoutForm(){ + let productsDiv = document.getElementById("products"); + let form = `
+ First name:
+ +
+ Last name:
+ +
+ Email:
+ +
+ +
` + productsDiv.innerHTML = form; } \ No newline at end of file diff --git a/public/styles.css b/public/styles.css index 4d301b15..984bfcd4 100644 --- a/public/styles.css +++ b/public/styles.css @@ -44,7 +44,7 @@ input{ } -#products > div{ +#products > #product{ border: 1px solid rgb(148, 148, 148); width: 250px; height: auto; @@ -106,3 +106,19 @@ div.review{ margin: 0px 0px 600px 200px; max-height:300px; } + +#subtotal{ + /* border: 2px solid black; + height: 100px; + width:250px; */ + float: right; + font-family: 'Times New Roman', Times, serif; + font-size: 20px; + text-align: center; +} + +#checkoutButton{ + width: 200px; + text-align: center; + margin: 20px 0px; +} From 5d5fdb6b8fbb0707898f293fb9709ae52115980c Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Mon, 8 Jul 2019 16:43:37 -0500 Subject: [PATCH 13/20] style changes --- public/index.html | 2 +- public/index.js | 3 +++ public/styles.css | 14 ++++++++------ 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/public/index.html b/public/index.html index f224d10b..31b6ee33 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@
-
+
diff --git a/public/index.js b/public/index.js index 61e4b8b2..69ae9e54 100644 --- a/public/index.js +++ b/public/index.js @@ -45,6 +45,7 @@ listProducts(products); function searchFunc(){ //assigns search text to variable let searchText = document.getElementById("searchText").value; + searchText.toLowerCase(); //shows only products matching search let filteredProducts = products.filter(prod => prod.name.toLowerCase().includes(searchText) || prod.description.toLowerCase().includes(searchText)); @@ -128,6 +129,8 @@ function viewCart(){ //updates subtotal variable subtotal += priceFloat * Number(product.quantity); }); + //make sure subtotal is displayed in correct $ format + subtotal = subtotal.toFixed(2); //changes style of subtotal div to display current total let subtotalDiv = document.getElementById('subtotal'); subtotalDiv.style.border = '1px solid black'; diff --git a/public/styles.css b/public/styles.css index 984bfcd4..3aca4bdb 100644 --- a/public/styles.css +++ b/public/styles.css @@ -6,7 +6,7 @@ } header{ - background-color: #9e5887; + background-color: #b3759e; height:85px; } @@ -68,7 +68,7 @@ div.review{ } .cart img{ - border: 1px solid #9e5887; + border: 1px solid #b3759e; } .cart img:hover{ @@ -82,15 +82,20 @@ div.review{ } #cart{ + position: absolute; font-family: 'Times New Roman', Times, serif; font-size:20px; + background-color: rgb(192, 161, 190); + border-radius: 100%; + padding: 0 5px; + top:25px; + right:30px; } .cartButton { background-color:#6b2f5c; border: 1px solid #a04288; border-radius:12px; - /* display:inline-block; */ cursor:pointer; color:#ffffff; font-family:Verdana; @@ -108,9 +113,6 @@ div.review{ } #subtotal{ - /* border: 2px solid black; - height: 100px; - width:250px; */ float: right; font-family: 'Times New Roman', Times, serif; font-size: 20px; From 0e4ff7925a6eac3aea8ee5d09a1c94125887a14f Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Sat, 13 Jul 2019 17:30:54 -0500 Subject: [PATCH 14/20] log in and sign up functionality --- public/index.html | 13 +++++-- public/index.js | 86 ++++++++++++++++++++++++++++++++++++++++++++--- public/styles.css | 22 +++++++++++- 3 files changed, 113 insertions(+), 8 deletions(-) diff --git a/public/index.html b/public/index.html index 31b6ee33..64e3d89e 100644 --- a/public/index.html +++ b/public/index.html @@ -11,7 +11,10 @@
-

ACA Store

+
+

ACA Store

+

+

search

@@ -27,8 +30,14 @@
+
+ Email
+ Password
+ + +
- + diff --git a/public/index.js b/public/index.js index 69ae9e54..b34ad222 100644 --- a/public/index.js +++ b/public/index.js @@ -1,3 +1,67 @@ +let products = []; + +let detailsButton = (document.createElement("button").value = "More Details!"); +let itemQuantity = 1; +let txtEmail = document.getElementById("email"); +let txtPassword = document.getElementById("password"); +let btnSignUp = document.getElementById("btnSignUp"); +btnSignUp.onclick = signUp; + +window.onload = function(){ + fetch("https://acastore.herokuapp.com/products") + .then (response => response.json()) + .then (data => products = data) + .then (products => { + listProducts(products) + let storage = localStorage.getItem('user'); + let signUpDiv = document.getElementById('signUp'); + let welcomeDiv = document.getElementById('welcome'); + if(storage){ + signUpDiv.style.display = 'none'; + storage = JSON.parse(storage) + let name = storage.email.split('@')[0]; + name = name.toUpperCase() + welcomeDiv.innerHTML = `Hello, ${name}` + } + }) +} + +class User { + constructor(email, password, cartId) { + this.email = email; + this.password = password; + this.cartId = cartId; + } +} + +function logIn(){ + console.log("hello"); + fetch("https://acastore.herokuapp.com/users") + .then(response => response.json()) + .then(data => { + let user = data.find(user => user.email === txtEmail.value) + if (user.password ===txtPassword.value){ + let signUpDiv = document.getElementById('signUp'); + signUpDiv.style.display = 'none'; + localStorage.setItem("user", JSON.stringify(user)) + } + }) +} + +function signUp() { + console.log(new User(txtEmail.value, txtPassword.value, null)); + let newUser = new User(txtEmail.value, txtPassword.value, null); + localStorage.setItem("user", JSON.stringify(newUser)); + + + fetch("https://acastore.herokuapp.com/users", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(newUser) + }).then(response => response.json()); +} //lists products function listProducts(products){ @@ -38,8 +102,7 @@ function listProducts(products){ } } -//calls function to list all products -listProducts(products); + //function filters using search text box function searchFunc(){ @@ -53,16 +116,28 @@ function searchFunc(){ listProducts(filteredProducts) } +class CartItem{ + constructor(id, price, quantity, imgUrl, name, description) { + this.id = id; + this.price = price; + this.quantity = quantity; + this.imgUrl = imgUrl; + this.name = name; + this.description = description; + } +} + + //adds items to cart array using id as parameter function addToCart(prodId){ //finds the requested product in the products array and assigns to variable let foundProd = products.find(p => p.id === prodId); //finds product object in cart let foundInCart = cartItems.find(p => p.id === prodId); - //if items is in not in cart push to cart array + //if items is in not in cart push new CartItem to cart array if (!foundInCart){ - cartItems.push(foundProd); - cartItems.find(p => p.id === prodId).quantity = 1; + let cartItem = new CartItem(foundProd.id, foundProd.price, 1, foundProd.imgUrl, foundProd.name, foundProd.description) + cartItems.push(cartItem); } // if item is in cart, adjust quantity else{ @@ -93,6 +168,7 @@ function moreInfo(prodId){ //function displays cart items and quantities function viewCart(){ + console.log(cartItems); listProducts(cartItems); //variable declaration for total cost let subtotal = 0; diff --git a/public/styles.css b/public/styles.css index 3aca4bdb..c8d6fbb5 100644 --- a/public/styles.css +++ b/public/styles.css @@ -14,6 +14,14 @@ header{ cursor: pointer; } +.title h1{ + margin: 7px auto; +} + +.title h4{ + margin: auto; +} + .header{ text-align: center; height:85px; @@ -37,6 +45,14 @@ input{ width: 500px; } +#signUp{ + text-Align:center; + height:200px; + display:flex; + flex-direction: column; + align-items: center; +} + #products{ display: flex; @@ -72,10 +88,14 @@ div.review{ } .cart img:hover{ - border: 1px solid #66114a; + opacity: .6; cursor: pointer; } +/* #product a:hover{ + opacity: .1; +} */ + #categories{ margin: 0 10px; width: 150px; From 2ae847e28825513aa78973fb90db79f0389885c5 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Sun, 14 Jul 2019 20:59:47 -0500 Subject: [PATCH 15/20] server --- public/index.html | 2 +- public/index.js | 151 +++++++++++++++++++++++++++++++--------------- 2 files changed, 104 insertions(+), 49 deletions(-) diff --git a/public/index.html b/public/index.html index 64e3d89e..f6911990 100644 --- a/public/index.html +++ b/public/index.html @@ -33,7 +33,7 @@

Email
Password
- +
diff --git a/public/index.js b/public/index.js index b34ad222..2f29f033 100644 --- a/public/index.js +++ b/public/index.js @@ -1,14 +1,15 @@ let products = []; +let cartItems = []; +let cart; let detailsButton = (document.createElement("button").value = "More Details!"); let itemQuantity = 1; let txtEmail = document.getElementById("email"); let txtPassword = document.getElementById("password"); let btnSignUp = document.getElementById("btnSignUp"); -btnSignUp.onclick = signUp; window.onload = function(){ - fetch("https://acastore.herokuapp.com/products") + fetch('https://acastore.herokuapp.com/products') .then (response => response.json()) .then (data => products = data) .then (products => { @@ -17,15 +18,42 @@ window.onload = function(){ let signUpDiv = document.getElementById('signUp'); let welcomeDiv = document.getElementById('welcome'); if(storage){ + storage = JSON.parse(storage); + console.log(storage); signUpDiv.style.display = 'none'; - storage = JSON.parse(storage) let name = storage.email.split('@')[0]; name = name.toUpperCase() welcomeDiv.innerHTML = `Hello, ${name}` + if(storage.cartId){ + getCartFetch(storage.id) + } } }) } +function getCartFetch(userId){ + fetch('https://acastore.herokuapp.com/carts') + .then(response => response.json()) + .then(data => { + cart = data.find(cart => cart.userId === userId) + localStorage.setItem("cart", JSON.stringify(cart)) + }) +} + +function getUserFetch(email,password){ + fetch("https://acastore.herokuapp.com/users") + .then(response => response.json()) + .then(data => { + let user = data.find(user => user.email === email) + if (user.password ===password){ + let signUpDiv = document.getElementById('signUp'); + signUpDiv.style.display = 'none'; + localStorage.setItem("user", JSON.stringify(user)) + } + }) +} + + class User { constructor(email, password, cartId) { this.email = email; @@ -35,32 +63,21 @@ class User { } function logIn(){ - console.log("hello"); - fetch("https://acastore.herokuapp.com/users") - .then(response => response.json()) - .then(data => { - let user = data.find(user => user.email === txtEmail.value) - if (user.password ===txtPassword.value){ - let signUpDiv = document.getElementById('signUp'); - signUpDiv.style.display = 'none'; - localStorage.setItem("user", JSON.stringify(user)) - } - }) + getUserFetch(txtEmail.value, txtPassword.value); } function signUp() { - console.log(new User(txtEmail.value, txtPassword.value, null)); + let email = txtEmail.value; + let password = txtPassword.value; let newUser = new User(txtEmail.value, txtPassword.value, null); - localStorage.setItem("user", JSON.stringify(newUser)); - - + fetch("https://acastore.herokuapp.com/users", { method: "POST", - headers: { - "Content-Type": "application/json" - }, + headers: {"Content-Type": "application/json"}, body: JSON.stringify(newUser) - }).then(response => response.json()); + }) + getUserFetch(email, password) + listProducts(products); } //lists products @@ -84,23 +101,22 @@ function listProducts(products){
`; }) - //checks if there are items in session storage - let sessionCartItems = sessionStorage.getItem("cart"); - //if there are items in session storage, assigns the to cart array - sessionCartItems ? ( - cartItems = JSON.parse(sessionCartItems), - counter = 0, - cartItems.map(prod => { - counter = counter + Number(prod.quantity); - }), - cartDiv.innerHTML = counter - ) : ( - cartItems = [] - ); + // //checks if there are items in session storage + // let sessionCartItems = sessionStorage.getItem("cart"); + // //if there are items in session storage, assigns the to cart array + // sessionCartItems ? ( + // cartItems = JSON.parse(sessionCartItems), + // counter = 0, + // cartItems.map(prod => { + // counter = counter + Number(prod.quantity); + // }), + // cartDiv.innerHTML = counter + // ) : ( + // cartItems = [] + // ); if (productsDiv){ productsDiv.innerHTML = newProd + '
'; - } - + } } @@ -130,22 +146,62 @@ class CartItem{ //adds items to cart array using id as parameter function addToCart(prodId){ + let userStorage = localStorage.getItem('user'); + userStorage = JSON.parse(userStorage) + console.log(userStorage) + if(!userStorage.cartId){ + fetch("https://acastore.herokuapp.com/carts",{ + method: "POST", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify({userId: userStorage.id, products: []}) + }) + .then(response => response.json()) + .then(data => console.log(data)) + } + + getCartFetch(userStorage.id) + let cartStorage = localStorage.getItem('cart'); + cartStorage = JSON.parse(cartStorage) + console.log(cartStorage) + + if(!userStorage.cartId){ + fetch(`https://acastore.herokuapp.com/users/${userStorage.id}`,{ + method: "PUT", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify({email: userStorage.email, password: userStorage.password, cartId: cartStorage.id}) + }) + .then(response =>response.json()) + .then(data => localStorage.setItem("user", JSON.stringify(data))) + } + //finds the requested product in the products array and assigns to variable let foundProd = products.find(p => p.id === prodId); + + let cart = cartStorage.products; + //finds product object in cart - let foundInCart = cartItems.find(p => p.id === prodId); + let foundInCart = cart.find(p => p.id === prodId); + + //if items is in not in cart push new CartItem to cart array if (!foundInCart){ let cartItem = new CartItem(foundProd.id, foundProd.price, 1, foundProd.imgUrl, foundProd.name, foundProd.description) - cartItems.push(cartItem); + cart.push(cartItem); + } // if item is in cart, adjust quantity else{ - foundInCart.quantity += 1; + let quantity = Number(foundInCart.quantity); + foundInCart.quantity = quantity + 1; } - // //sets items in session storage - sessionStorage.setItem("cart", JSON.stringify(cartItems)); - //lists all products + + fetch(`https://acastore.herokuapp.com/carts/${cartStorage.id}`,{ + method: "PUT", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify({ userId: userStorage.id, products: cart}) + }) + .then(response =>response.json()) + .then(data => localStorage.setItem("cart", JSON.stringify(data))) listProducts(products); } @@ -168,7 +224,6 @@ function moreInfo(prodId){ //function displays cart items and quantities function viewCart(){ - console.log(cartItems); listProducts(cartItems); //variable declaration for total cost let subtotal = 0; @@ -221,8 +276,8 @@ function viewCart(){ function changeQuantity(prodId, qty){ let product = cartItems.find(p => p.id === prodId); product.quantity = Number(qty); - //updates session storage if items are added - sessionStorage.setItem("cart", JSON.stringify(cartItems)); + // //updates session storage if items are added + // sessionStorage.setItem("cart", JSON.stringify(cartItems)); viewCart(); } @@ -231,8 +286,8 @@ function changeQuantity(prodId, qty){ function removeCartItem(prodId){ let removeProdIdx = cartItems.map(prod =>{return prod.id}).indexOf(prodId); cartItems.splice(removeProdIdx, 1); - //updates session storage if item is removed - sessionStorage.setItem("cart", JSON.stringify(cartItems)); + // //updates session storage if item is removed + // sessionStorage.setItem("cart", JSON.stringify(cartItems)); viewCart(); } From b1da132543be7ad00d1fc1bf5a8326069e7fc424 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Tue, 16 Jul 2019 03:44:40 -0500 Subject: [PATCH 16/20] separate files --- public/cart.js | 167 ++++++++++++++++++++ public/index.html | 4 +- public/index.js | 378 ++++++++++++++++------------------------------ public/index2.js | 243 +++++++++++++++++++++++++++++ 4 files changed, 546 insertions(+), 246 deletions(-) create mode 100644 public/cart.js create mode 100644 public/index2.js diff --git a/public/cart.js b/public/cart.js new file mode 100644 index 00000000..d4265b31 --- /dev/null +++ b/public/cart.js @@ -0,0 +1,167 @@ +function getCartFetch(cartId){ + fetch(`https://acastore.herokuapp.com/carts/${cartId}`) + .then(response => response.json()) + .then(data => { + asyncLocalStorage.setItem("cart", JSON.stringify(data)) + .then(function(){ + return asyncLocalStorage.getItem('cart'); + }) + }) +} + +function addToCart(prodId){ + let userStorage = JSON.parse(localStorage.getItem('user')) + if(!userStorage.cartId){ + fetch("https://acastore.herokuapp.com/carts",{ + method: "POST", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify({userId: userStorage.id, products: []}) + }) + .then(response => response.json()) + .then(data => { + asyncLocalStorage.setItem("cart", JSON.stringify(data)) + .then(function(){ + return asyncLocalStorage.getItem("cart"); + }) + fetch(`https://acastore.herokuapp.com/users/${userStorage.id}`,{ + method: "PUT", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify({email: userStorage.email, password: userStorage.password, cartId: data.id}) + }) + .then(response => response.json()) + .then(data => getUserFetch(data.email)) + }) + + } + class CartItem{ + constructor(id, price, quantity, imgUrl, name, description) { + this.id = id; + this.price = price; + this.quantity = quantity; + this.imgUrl = imgUrl; + this.name = name; + this.description = description; + } + } + + let cartStorage = JSON.parse(localStorage.getItem('cart')) + let cartProducts = cartStorage.products; + let foundProd = products.find(p => p.id === prodId); + let foundInCart = cartProducts.find(p => p.id === prodId); + if (!foundInCart){ + let cartItem = new CartItem(foundProd.id, foundProd.price, 1, foundProd.imgUrl, foundProd.name, foundProd.description) + cartProducts.push(cartItem); + } + else{ + let quantity = Number(foundInCart.quantity); + foundInCart.quantity = quantity + 1; + } + fetch(`https://acastore.herokuapp.com/carts/${cartStorage.id}`,{ + method: "PUT", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify({ userId: userStorage.id, products: cartProducts}) + }) + .then(response =>response.json()) + .then(data => { + asyncLocalStorage.setItem("cart", JSON.stringify(data)) + .then(function(){ + listProducts(products); + getCartFetch(data.id); + }) + }) +} + +function viewCart(){ + let cartStorage = localStorage.getItem("cart"); + if(cartStorage){ + cartStorage = JSON.parse(cartStorage) + cartProducts = cartStorage.products; + } + else{ + cartProducts = []; + } + listProducts(cartProducts); + //variable declaration for total cost + let subtotal = 0; + //variable declaration for total item count + let itemCounter = 0; + //maps through items in cart + cartProducts.map(product => { + //changes functionality of the cart button to remove from cart + let cartButton = document.getElementById(`cartButton${product.id}`); + cartButton.setAttribute('onClick', `removeCartItem(${product.id});`); + cartButton.innerHTML = "REMOVE ITEM" + //more info div to contain drop down for quantity of a particular item + moreInfoDiv = document.getElementById(`moreInfo${product.id}`) + moreInfoDiv.innerHTML = ` + + `; + //sets default selected value in drop down menu to the current quantity + document.getElementById(`qty${product.id}`).options[product.quantity - 1].selected = true; + //variable stores the price as a float + let priceFloat = Number(product.price.slice(1, product.price.length)); + //updates total item count variable + itemCounter += Number(product.quantity); + //updates subtotal variable + subtotal += priceFloat * Number(product.quantity); + }); + //make sure subtotal is displayed in correct $ format + subtotal = subtotal.toFixed(2); + //changes style of subtotal div to display current total + let subtotalDiv = document.getElementById('subtotal'); + subtotalDiv.style.border = '1px solid black'; + subtotalDiv.style.height = '100px' + subtotalDiv.style.width = '250px' + subtotalDiv.innerHTML = `subtotal (${itemCounter} items): $${subtotal} +
+ `; +} + +function changeQuantity(prodId, qty){ + let cartStorage = JSON.parse(localStorage.getItem("cart")); + let cartItems = cartStorage.products + let product = cartItems.find(p => p.id === prodId); + product.quantity = Number(qty); + fetch(`https://acastore.herokuapp.com/carts/${cartStorage.id}`,{ + method: "PUT", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify({ userId: cartStorage.userId, products: cartItems}) + }) + .then(response => response.json()) + .then(data => { + asyncLocalStorage.setItem("cart", JSON.stringify(data)) + .then(function(){ + viewCart(); + }) + }) +} + +function removeCartItem(prodId){ + let cartStorage = JSON.parse(localStorage.getItem("cart")); + let cartProducts = cartStorage.products + let productIdx = cartProducts.map(p => p.id).indexOf(prodId); + cartProducts.splice(productIdx, 1); + fetch(`https://acastore.herokuapp.com/carts/${cartStorage.id}`,{ + method: "PUT", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify({ userId: cartStorage.userId, products: cartProducts}) + }) + .then(response => response.json()) + .then(data => { + asyncLocalStorage.setItem("cart", JSON.stringify(data)) + .then(function(){ + viewCart(); + }) + }) +} diff --git a/public/index.html b/public/index.html index f6911990..005c9419 100644 --- a/public/index.html +++ b/public/index.html @@ -38,7 +38,9 @@

- + + + diff --git a/public/index.js b/public/index.js index 2f29f033..49396a4e 100644 --- a/public/index.js +++ b/public/index.js @@ -1,89 +1,60 @@ let products = []; -let cartItems = []; -let cart; - -let detailsButton = (document.createElement("button").value = "More Details!"); -let itemQuantity = 1; -let txtEmail = document.getElementById("email"); -let txtPassword = document.getElementById("password"); -let btnSignUp = document.getElementById("btnSignUp"); - -window.onload = function(){ - fetch('https://acastore.herokuapp.com/products') - .then (response => response.json()) - .then (data => products = data) - .then (products => { - listProducts(products) - let storage = localStorage.getItem('user'); - let signUpDiv = document.getElementById('signUp'); - let welcomeDiv = document.getElementById('welcome'); - if(storage){ - storage = JSON.parse(storage); - console.log(storage); - signUpDiv.style.display = 'none'; - let name = storage.email.split('@')[0]; - name = name.toUpperCase() - welcomeDiv.innerHTML = `Hello, ${name}` - if(storage.cartId){ - getCartFetch(storage.id) - } - } - }) -} +let loggedIn; +if(loggedIn != 'undefined'){ + loggedIn = true; +} + +function loggedInView(){ + let user = JSON.parse(localStorage.getItem('user')); + let welcomeDiv = document.getElementById('welcome'); + let signUpDiv = document.getElementById('signUp'); + let name = user.email.split('@')[0]; + name = name.toUpperCase() + welcomeDiv.innerHTML = `Hello, ${name}` + signUpDiv.style.display = 'none'; +} + + +const asyncLocalStorage = { + setItem: async function (key, value) { + await null; + return localStorage.setItem(key, value); + }, + getItem: async function (key) { + await null; + return localStorage.getItem(key); + } +}; -function getCartFetch(userId){ - fetch('https://acastore.herokuapp.com/carts') +function getUserFetch(email){ + fetch("https://acastore.herokuapp.com/users") .then(response => response.json()) - .then(data => { - cart = data.find(cart => cart.userId === userId) - localStorage.setItem("cart", JSON.stringify(cart)) + .then(data => user = data.find(user => user.email == email)) + .then(user => { + asyncLocalStorage.setItem("user", JSON.stringify(user)) + .then(function(){ + return asyncLocalStorage.getItem('user'); }) + }) } -function getUserFetch(email,password){ - fetch("https://acastore.herokuapp.com/users") +function getProductsFetch(){ + fetch("https://acastore.herokuapp.com/products") .then(response => response.json()) - .then(data => { - let user = data.find(user => user.email === email) - if (user.password ===password){ - let signUpDiv = document.getElementById('signUp'); - signUpDiv.style.display = 'none'; - localStorage.setItem("user", JSON.stringify(user)) - } - }) + .then(data => products = data) + .then(products => listProducts(products)) } - -class User { - constructor(email, password, cartId) { - this.email = email; - this.password = password; - this.cartId = cartId; +window.onload = function(){ + getProductsFetch() + if(localStorage.getItem('user') && loggedIn == true){ + loggedInView(); } } -function logIn(){ - getUserFetch(txtEmail.value, txtPassword.value); -} - -function signUp() { - let email = txtEmail.value; - let password = txtPassword.value; - let newUser = new User(txtEmail.value, txtPassword.value, null); - - fetch("https://acastore.herokuapp.com/users", { - method: "POST", - headers: {"Content-Type": "application/json"}, - body: JSON.stringify(newUser) - }) - getUserFetch(email, password) - listProducts(products); -} - -//lists products function listProducts(products){ - let cartDiv = document.getElementById("cart"); let productsDiv = document.getElementById("products"); + let cartDiv = document.getElementById("cart"); let newProd = ''; //maps through products and creates a div for each product products.map(product =>{ @@ -100,112 +71,118 @@ function listProducts(products){
`; - }) - // //checks if there are items in session storage - // let sessionCartItems = sessionStorage.getItem("cart"); - // //if there are items in session storage, assigns the to cart array - // sessionCartItems ? ( - // cartItems = JSON.parse(sessionCartItems), - // counter = 0, - // cartItems.map(prod => { - // counter = counter + Number(prod.quantity); - // }), - // cartDiv.innerHTML = counter - // ) : ( - // cartItems = [] - // ); - if (productsDiv){ - productsDiv.innerHTML = newProd + '
'; - } + }) + productsDiv.innerHTML = newProd + '
' + + if(localStorage.getItem("user") != null){ + userStorage = JSON.parse(localStorage.getItem("user")) + if(userStorage.cartId != null){ + getCartFetch(userStorage.id) + let cartStorage = JSON.parse(localStorage.getItem("cart")); + let itemsCounter = 0; + cartStorage.products.map(p => itemsCounter = itemsCounter + Number(p.quantity)); + cartDiv.innerHTML = itemsCounter + } + + } + else{ + cartDiv.innerHTML = 0; + } } +function filterCategory(cat){ + //if all is selected, displays all products + if (cat === 'all'){ + listProducts(products); + return products; + } + //filters products depending on category selected + else{ + let filteredProducts = products.filter(prod => + prod.category === cat); + listProducts(filteredProducts); + return filteredProducts; + } +} -//function filters using search text box function searchFunc(){ + let category = document.getElementById('categories').value; + //assigns search text to variable let searchText = document.getElementById("searchText").value; searchText.toLowerCase(); //shows only products matching search - let filteredProducts = products.filter(prod => + let filteredProducts = filterCategory(category).filter(prod => prod.name.toLowerCase().includes(searchText) || prod.description.toLowerCase().includes(searchText)); //lists only filtered products listProducts(filteredProducts) } -class CartItem{ - constructor(id, price, quantity, imgUrl, name, description) { - this.id = id; - this.price = price; - this.quantity = quantity; - this.imgUrl = imgUrl; - this.name = name; - this.description = description; - } -} - - -//adds items to cart array using id as parameter -function addToCart(prodId){ - let userStorage = localStorage.getItem('user'); - userStorage = JSON.parse(userStorage) - console.log(userStorage) - if(!userStorage.cartId){ - fetch("https://acastore.herokuapp.com/carts",{ - method: "POST", - headers: {"Content-Type": "application/json"}, - body: JSON.stringify({userId: userStorage.id, products: []}) - }) - .then(response => response.json()) - .then(data => console.log(data)) - } - - getCartFetch(userStorage.id) - let cartStorage = localStorage.getItem('cart'); - cartStorage = JSON.parse(cartStorage) - console.log(cartStorage) +function logIn(){ + let txtEmail = document.getElementById("email"); + let txtPassword = document.getElementById("password"); - if(!userStorage.cartId){ - fetch(`https://acastore.herokuapp.com/users/${userStorage.id}`,{ - method: "PUT", - headers: {"Content-Type": "application/json"}, - body: JSON.stringify({email: userStorage.email, password: userStorage.password, cartId: cartStorage.id}) + fetch("https://acastore.herokuapp.com/users") + .then(response => response.json()) + .then(data => user = data.find(user => user.email === txtEmail.value)) + .then(user => { + if(user.password == txtPassword.value){ + asyncLocalStorage.setItem("user", JSON.stringify(user)) + .then(function(){ + loggedInView(); + }) + if(user.cartId){ + getCartFetch(user.cartId) + } + } + else{ + alert("try again"); + } }) - .then(response =>response.json()) - .then(data => localStorage.setItem("user", JSON.stringify(data))) + if(localStorage.getItem('user')){ + return loggedIn = true; } +} - //finds the requested product in the products array and assigns to variable - let foundProd = products.find(p => p.id === prodId); - - let cart = cartStorage.products; - - //finds product object in cart - let foundInCart = cart.find(p => p.id === prodId); - - - //if items is in not in cart push new CartItem to cart array - if (!foundInCart){ - let cartItem = new CartItem(foundProd.id, foundProd.price, 1, foundProd.imgUrl, foundProd.name, foundProd.description) - cart.push(cartItem); - - } - // if item is in cart, adjust quantity - else{ - let quantity = Number(foundInCart.quantity); - foundInCart.quantity = quantity + 1; +class User { + constructor(email, password, cartId) { + this.email = email; + this.password = password; + this.cartId = cartId; } +} - fetch(`https://acastore.herokuapp.com/carts/${cartStorage.id}`,{ - method: "PUT", - headers: {"Content-Type": "application/json"}, - body: JSON.stringify({ userId: userStorage.id, products: cart}) +function signUp(){ + let txtPassword = document.getElementById("password"); + let txtEmail = document.getElementById("email"); + + fetch("https://acastore.herokuapp.com/users") + .then(response => response.json()) + .then(data => user = data.find(user => user.email == txtEmail.value)) + .then(user => { + if(user){ + alert("that email address already has an account") + } + else{ + let newUser = new User(txtEmail.value, txtPassword.value, null); + fetch("https://acastore.herokuapp.com/users", { + method: "POST", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify(newUser) + }) + .then(response => response.json()) + .then(data => { + asyncLocalStorage.setItem("user", JSON.stringify(data)) + .then(function(){ + loggedInView(); + listProducts(products); + }) + }) + return loggedIn = true; + } }) - .then(response =>response.json()) - .then(data => localStorage.setItem("cart", JSON.stringify(data))) - listProducts(products); } -//function to display more information on a product function moreInfo(prodId){ //assigns empty string let moreInfoDiv = ''; @@ -222,91 +199,6 @@ function moreInfo(prodId){ productDiv.innerHTML = moreInfoDiv; } -//function displays cart items and quantities -function viewCart(){ - listProducts(cartItems); - //variable declaration for total cost - let subtotal = 0; - //variable declaration for total item count - let itemCounter = 0; - //maps through items in cart - cartItems.map(product => { - //changes functionality of the cart button to remove from cart - let cartButton = document.getElementById(`cartButton${product.id}`); - cartButton.setAttribute('onClick', `removeCartItem(${product.id});`); - cartButton.innerHTML = "REMOVE ITEM" - //more info div to contain drop down for quantity of a particular item - moreInfoDiv = document.getElementById(`moreInfo${product.id}`) - moreInfoDiv.innerHTML = ` - - `; - //sets default selected value in drop down menu to the current quantity - document.getElementById(`qty${product.id}`).options[product.quantity - 1].selected = true; - //variable stores the price as a float - let priceFloat = Number(product.price.slice(1, product.price.length)); - //updates total item count variable - itemCounter += Number(product.quantity); - //updates subtotal variable - subtotal += priceFloat * Number(product.quantity); - }); - //make sure subtotal is displayed in correct $ format - subtotal = subtotal.toFixed(2); - //changes style of subtotal div to display current total - let subtotalDiv = document.getElementById('subtotal'); - subtotalDiv.style.border = '1px solid black'; - subtotalDiv.style.height = '100px' - subtotalDiv.style.width = '250px' - subtotalDiv.innerHTML = `subtotal (${itemCounter} items): $${subtotal} -
- `; -} - -//function called when quantity is changed via the drop down menu -function changeQuantity(prodId, qty){ - let product = cartItems.find(p => p.id === prodId); - product.quantity = Number(qty); - // //updates session storage if items are added - // sessionStorage.setItem("cart", JSON.stringify(cartItems)); - viewCart(); -} - -//function called in cart view -//function removes item from cart -function removeCartItem(prodId){ - let removeProdIdx = cartItems.map(prod =>{return prod.id}).indexOf(prodId); - cartItems.splice(removeProdIdx, 1); - // //updates session storage if item is removed - // sessionStorage.setItem("cart", JSON.stringify(cartItems)); - viewCart(); -} - -//function called when category is changed via dropdown menu on homepage -function filterCategory(cat){ - //if all is selected, displays all products - if (cat === 'all'){ - listProducts(products); - } - //filters products depending on category selected - else{ - let filteredProducts = products.filter(prod => - prod.category === cat); - listProducts(filteredProducts); - } -} - -//function called on mouse over of ratings div -//dislays first 3 reviews for each product function displayReviews(prodId){ product = products.find(p => p.id === prodId); let reviewDiv = document.getElementById(`hiddenReviews ${prodId}`); @@ -321,16 +213,12 @@ function displayReviews(prodId){ reviewDiv.innerHTML = newRev; } -//functon called on mouse out of ratings div -//hides reviews function hideReviews(prodId){ let reviewDiv = document.getElementById(`hiddenReviews ${prodId}`); let newRev = `
`; reviewDiv.innerHTML = newRev; } -//function called on submit of checkout information -//displays alert that purchase was successful function submitFunc(){ alert("We have received your order!"); } diff --git a/public/index2.js b/public/index2.js new file mode 100644 index 00000000..49396a4e --- /dev/null +++ b/public/index2.js @@ -0,0 +1,243 @@ +let products = []; +let loggedIn; +if(loggedIn != 'undefined'){ + loggedIn = true; +} + +function loggedInView(){ + let user = JSON.parse(localStorage.getItem('user')); + let welcomeDiv = document.getElementById('welcome'); + let signUpDiv = document.getElementById('signUp'); + let name = user.email.split('@')[0]; + name = name.toUpperCase() + welcomeDiv.innerHTML = `Hello, ${name}` + signUpDiv.style.display = 'none'; +} + + +const asyncLocalStorage = { + setItem: async function (key, value) { + await null; + return localStorage.setItem(key, value); + }, + getItem: async function (key) { + await null; + return localStorage.getItem(key); + } +}; + +function getUserFetch(email){ + fetch("https://acastore.herokuapp.com/users") + .then(response => response.json()) + .then(data => user = data.find(user => user.email == email)) + .then(user => { + asyncLocalStorage.setItem("user", JSON.stringify(user)) + .then(function(){ + return asyncLocalStorage.getItem('user'); + }) + }) +} + +function getProductsFetch(){ + fetch("https://acastore.herokuapp.com/products") + .then(response => response.json()) + .then(data => products = data) + .then(products => listProducts(products)) +} + +window.onload = function(){ + getProductsFetch() + if(localStorage.getItem('user') && loggedIn == true){ + loggedInView(); + } +} + +function listProducts(products){ + let productsDiv = document.getElementById("products"); + let cartDiv = document.getElementById("cart"); + let newProd = ''; + //maps through products and creates a div for each product + products.map(product =>{ + newProd += `
+
+ +

+
${product.description}
+
${product.price}
+
+ rating: ${product.rating} +
+
+
+
+
`; + }) + productsDiv.innerHTML = newProd + '
' + + if(localStorage.getItem("user") != null){ + userStorage = JSON.parse(localStorage.getItem("user")) + if(userStorage.cartId != null){ + getCartFetch(userStorage.id) + let cartStorage = JSON.parse(localStorage.getItem("cart")); + let itemsCounter = 0; + cartStorage.products.map(p => itemsCounter = itemsCounter + Number(p.quantity)); + cartDiv.innerHTML = itemsCounter + } + + } + else{ + cartDiv.innerHTML = 0; + } +} + +function filterCategory(cat){ + //if all is selected, displays all products + if (cat === 'all'){ + listProducts(products); + return products; + } + //filters products depending on category selected + else{ + let filteredProducts = products.filter(prod => + prod.category === cat); + listProducts(filteredProducts); + return filteredProducts; + } +} + +function searchFunc(){ + let category = document.getElementById('categories').value; + + //assigns search text to variable + let searchText = document.getElementById("searchText").value; + searchText.toLowerCase(); + //shows only products matching search + let filteredProducts = filterCategory(category).filter(prod => + prod.name.toLowerCase().includes(searchText) || prod.description.toLowerCase().includes(searchText)); + //lists only filtered products + listProducts(filteredProducts) +} + +function logIn(){ + let txtEmail = document.getElementById("email"); + let txtPassword = document.getElementById("password"); + + fetch("https://acastore.herokuapp.com/users") + .then(response => response.json()) + .then(data => user = data.find(user => user.email === txtEmail.value)) + .then(user => { + if(user.password == txtPassword.value){ + asyncLocalStorage.setItem("user", JSON.stringify(user)) + .then(function(){ + loggedInView(); + }) + if(user.cartId){ + getCartFetch(user.cartId) + } + } + else{ + alert("try again"); + } + }) + if(localStorage.getItem('user')){ + return loggedIn = true; + } +} + +class User { + constructor(email, password, cartId) { + this.email = email; + this.password = password; + this.cartId = cartId; + } +} + +function signUp(){ + let txtPassword = document.getElementById("password"); + let txtEmail = document.getElementById("email"); + + fetch("https://acastore.herokuapp.com/users") + .then(response => response.json()) + .then(data => user = data.find(user => user.email == txtEmail.value)) + .then(user => { + if(user){ + alert("that email address already has an account") + } + else{ + let newUser = new User(txtEmail.value, txtPassword.value, null); + fetch("https://acastore.herokuapp.com/users", { + method: "POST", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify(newUser) + }) + .then(response => response.json()) + .then(data => { + asyncLocalStorage.setItem("user", JSON.stringify(data)) + .then(function(){ + loggedInView(); + listProducts(products); + }) + }) + return loggedIn = true; + } + }) +} + +function moreInfo(prodId){ + //assigns empty string + let moreInfoDiv = ''; + //filters array to only the product requested + let viewProd = products.filter(prod =>prod.id === prodId) + listProducts(viewProd); + //allows access to the moreInfo div to display all reviews and ratings + let productDiv = document.getElementById(`moreInfo${prodId}`); + viewProd[0].reviews.map(review => + moreInfoDiv += `
${review.description}
+
${review.rating}
+
` + ) + productDiv.innerHTML = moreInfoDiv; +} + +function displayReviews(prodId){ + product = products.find(p => p.id === prodId); + let reviewDiv = document.getElementById(`hiddenReviews ${prodId}`); + let newRev = ''; + for(i=0; i<3; i++){ + if(product.reviews[i]){ + newRev += `
${product.reviews[i].description}
+
${product.reviews[i].rating}
+
` + } + } + reviewDiv.innerHTML = newRev; +} + +function hideReviews(prodId){ + let reviewDiv = document.getElementById(`hiddenReviews ${prodId}`); + let newRev = `
`; + reviewDiv.innerHTML = newRev; +} + +function submitFunc(){ + alert("We have received your order!"); +} + +//function called when customer clicks checkout button +//displays form for data entry +function checkoutForm(){ + let productsDiv = document.getElementById("products"); + let form = `
+ First name:
+ +
+ Last name:
+ +
+ Email:
+ +
+ +
` + productsDiv.innerHTML = form; +} \ No newline at end of file From fdd34a954bf24d01d63a68e5f42bbfe7dd13c8b7 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Tue, 16 Jul 2019 04:07:55 -0500 Subject: [PATCH 17/20] submit order function --- public/index.js | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/public/index.js b/public/index.js index 49396a4e..0d3841ce 100644 --- a/public/index.js +++ b/public/index.js @@ -219,8 +219,35 @@ function hideReviews(prodId){ reviewDiv.innerHTML = newRev; } +class ItemOrder{ + constructor(quantity, prodId) { + this.quantity = quantity; + this.prodId = prodId; + } +} + +class Order{ + constructor(userId, items) { + this.userId = userId; + this.items = items; + } +} + function submitFunc(){ - alert("We have received your order!"); + let cartStorage = JSON.parse(localStorage.getItem('cart')); + let cartProducts = cartStorage.products + let items = []; + items.push(cartProducts.map(p => { + new ItemOrder(p.quantity, p.id) + })) + alert(items); + let order = new Order(cartStorage.userId, items); + + fetch("https://acastore.herokuapp.com/orders", { + method: "POST", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify(order) + }) } //function called when customer clicks checkout button From 5057b728a78e693f2290187e48623b619faaa5c2 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Tue, 16 Jul 2019 10:53:54 -0500 Subject: [PATCH 18/20] timeout function --- public/cart.js | 1 + public/index.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/public/cart.js b/public/cart.js index d4265b31..da5db62e 100644 --- a/public/cart.js +++ b/public/cart.js @@ -10,6 +10,7 @@ function getCartFetch(cartId){ } function addToCart(prodId){ + timeOutFunction(); let userStorage = JSON.parse(localStorage.getItem('user')) if(!userStorage.cartId){ fetch("https://acastore.herokuapp.com/carts",{ diff --git a/public/index.js b/public/index.js index 0d3841ce..56ab2e4f 100644 --- a/public/index.js +++ b/public/index.js @@ -1,5 +1,17 @@ let products = []; let loggedIn; + +function alertFunc(){ + alert("are you still there?") +} + +function clearStorage(){ + localStorage.clear(); +} + + + + if(loggedIn != 'undefined'){ loggedIn = true; } @@ -46,6 +58,7 @@ function getProductsFetch(){ } window.onload = function(){ + timeOutFunction(); getProductsFetch() if(localStorage.getItem('user') && loggedIn == true){ loggedInView(); @@ -53,6 +66,7 @@ window.onload = function(){ } function listProducts(products){ + timeOutFunction(); let productsDiv = document.getElementById("products"); let cartDiv = document.getElementById("cart"); let newProd = ''; @@ -118,10 +132,44 @@ function searchFunc(){ listProducts(filteredProducts) } +function timeOutFunction(){ + var hours = 1; // Reset when storage is more than 24hours + var minutes = 1; + var now = new Date().getTime(); + var setupTime = localStorage.getItem('setupTime'); + if (setupTime == null) { + localStorage.setItem('setupTime', now) + } + else { + if(now-setupTime > minutes*60*1000) { + localStorage.clear() + alert("your session timed out"); + } + if(now-setupTime < minutes*60*1000){ + localStorage.setItem('setupTime', now) + } + } +} + function logIn(){ let txtEmail = document.getElementById("email"); let txtPassword = document.getElementById("password"); - + + timeOutFunction(); + // function alertFunction(){ + // timeOutVar = setTimeout(function(){localStorage.clear()}, 60000); + + // alert("are you still there?") + + // if(confirm){ + // setTimeout(alertFunction, 3000); + // clearTimeout(timeOutVar); + // } + // } + + // setTimeout(alertFunction, 3000); + + fetch("https://acastore.herokuapp.com/users") .then(response => response.json()) .then(data => user = data.find(user => user.email === txtEmail.value)) From a7472923f6bed5fadf9f69c88c42ae17f16f9094 Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Tue, 16 Jul 2019 11:05:58 -0500 Subject: [PATCH 19/20] fixed adding initial item to cart --- public/cart.js | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/public/cart.js b/public/cart.js index da5db62e..e34b7683 100644 --- a/public/cart.js +++ b/public/cart.js @@ -11,12 +11,30 @@ function getCartFetch(cartId){ function addToCart(prodId){ timeOutFunction(); + + class CartItem{ + constructor(id, price, quantity, imgUrl, name, description) { + this.id = id; + this.price = price; + this.quantity = quantity; + this.imgUrl = imgUrl; + this.name = name; + this.description = description; + } + } + let userStorage = JSON.parse(localStorage.getItem('user')) + if(!userStorage.cartId){ + let cart = []; + let foundProd = products.find(p => p.id === prodId); + let product = new CartItem(foundProd.id, foundProd.price, 1, foundProd.imgUrl, foundProd.name, foundProd.description) + cart.push(product); + fetch("https://acastore.herokuapp.com/carts",{ method: "POST", headers: {"Content-Type": "application/json"}, - body: JSON.stringify({userId: userStorage.id, products: []}) + body: JSON.stringify({userId: userStorage.id, products: cart}) }) .then(response => response.json()) .then(data => { @@ -34,16 +52,7 @@ function addToCart(prodId){ }) } - class CartItem{ - constructor(id, price, quantity, imgUrl, name, description) { - this.id = id; - this.price = price; - this.quantity = quantity; - this.imgUrl = imgUrl; - this.name = name; - this.description = description; - } - } + let cartStorage = JSON.parse(localStorage.getItem('cart')) let cartProducts = cartStorage.products; From 80f6eb77bb2072b51617b3c921ef3b4da8b8465f Mon Sep 17 00:00:00 2001 From: Selena Solis Date: Tue, 16 Jul 2019 11:48:51 -0500 Subject: [PATCH 20/20] deleted insignificant code --- public/cart.js | 59 ++++++++++++++++++++++++++----------------------- public/index.js | 20 +---------------- 2 files changed, 32 insertions(+), 47 deletions(-) diff --git a/public/cart.js b/public/cart.js index e34b7683..52af8985 100644 --- a/public/cart.js +++ b/public/cart.js @@ -24,6 +24,7 @@ function addToCart(prodId){ } let userStorage = JSON.parse(localStorage.getItem('user')) + let foundProd = products.find(p => p.id === prodId); if(!userStorage.cartId){ let cart = []; @@ -48,37 +49,39 @@ function addToCart(prodId){ body: JSON.stringify({email: userStorage.email, password: userStorage.password, cartId: data.id}) }) .then(response => response.json()) - .then(data => getUserFetch(data.email)) - }) - - } - - - let cartStorage = JSON.parse(localStorage.getItem('cart')) - let cartProducts = cartStorage.products; - let foundProd = products.find(p => p.id === prodId); - let foundInCart = cartProducts.find(p => p.id === prodId); - if (!foundInCart){ - let cartItem = new CartItem(foundProd.id, foundProd.price, 1, foundProd.imgUrl, foundProd.name, foundProd.description) - cartProducts.push(cartItem); + .then(data =>{ + asyncLocalStorage.setItem("user", JSON.stringify(data)) + .then(function(){ + listProducts(products); + }) + }) + }) } else{ - let quantity = Number(foundInCart.quantity); - foundInCart.quantity = quantity + 1; + let cartStorage = JSON.parse(localStorage.getItem('cart')) + let cartProducts = cartStorage.products; + let foundInCart = cartProducts.find(p => p.id === prodId); + if (!foundInCart){ + let cartItem = new CartItem(foundProd.id, foundProd.price, 1, foundProd.imgUrl, foundProd.name, foundProd.description) + cartProducts.push(cartItem); + } + else{ + let quantity = Number(foundInCart.quantity); + foundInCart.quantity = quantity + 1; + } + fetch(`https://acastore.herokuapp.com/carts/${cartStorage.id}`,{ + method: "PUT", + headers: {"Content-Type": "application/json"}, + body: JSON.stringify({ userId: userStorage.id, products: cartProducts}) + }) + .then(response =>response.json()) + .then(data => { + asyncLocalStorage.setItem("cart", JSON.stringify(data)) + .then(function(){ + listProducts(products); + }) + }) } - fetch(`https://acastore.herokuapp.com/carts/${cartStorage.id}`,{ - method: "PUT", - headers: {"Content-Type": "application/json"}, - body: JSON.stringify({ userId: userStorage.id, products: cartProducts}) - }) - .then(response =>response.json()) - .then(data => { - asyncLocalStorage.setItem("cart", JSON.stringify(data)) - .then(function(){ - listProducts(products); - getCartFetch(data.id); - }) - }) } function viewCart(){ diff --git a/public/index.js b/public/index.js index 56ab2e4f..12749665 100644 --- a/public/index.js +++ b/public/index.js @@ -9,9 +9,6 @@ function clearStorage(){ localStorage.clear(); } - - - if(loggedIn != 'undefined'){ loggedIn = true; } @@ -26,7 +23,6 @@ function loggedInView(){ signUpDiv.style.display = 'none'; } - const asyncLocalStorage = { setItem: async function (key, value) { await null; @@ -91,13 +87,12 @@ function listProducts(products){ if(localStorage.getItem("user") != null){ userStorage = JSON.parse(localStorage.getItem("user")) if(userStorage.cartId != null){ - getCartFetch(userStorage.id) + getCartFetch(userStorage.cartId) let cartStorage = JSON.parse(localStorage.getItem("cart")); let itemsCounter = 0; cartStorage.products.map(p => itemsCounter = itemsCounter + Number(p.quantity)); cartDiv.innerHTML = itemsCounter } - } else{ cartDiv.innerHTML = 0; @@ -156,19 +151,6 @@ function logIn(){ let txtPassword = document.getElementById("password"); timeOutFunction(); - // function alertFunction(){ - // timeOutVar = setTimeout(function(){localStorage.clear()}, 60000); - - // alert("are you still there?") - - // if(confirm){ - // setTimeout(alertFunction, 3000); - // clearTimeout(timeOutVar); - // } - // } - - // setTimeout(alertFunction, 3000); - fetch("https://acastore.herokuapp.com/users") .then(response => response.json())