From e5c3990c2d43ae7e8603e98da8dd7ecea94764a3 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Mon, 24 Jun 2019 21:50:13 -0400 Subject: [PATCH 01/23] product list and beg of search --- public/index.html | 13 +++++++++++++ public/index.js | 22 ++++++++++++++++++++-- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 138da963..987b13b9 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,19 @@ +
+ +
+
+
+ + +
+
+
+ diff --git a/public/index.js b/public/index.js index 6515a734..75445541 100644 --- a/public/index.js +++ b/public/index.js @@ -1,2 +1,20 @@ -//stuff -//more stuff \ No newline at end of file +// declaring variable +// make section a variable +let container = document.querySelector('.product_list'); + + +for (let i = 0; i < products.length; i++) { + let product = products[i]; + console.log(product); + let productContainer = document.createElement('div'); + productContainer.setAttribute('class', 'product'); + productContainer.innerHTML = ` +

${product.name}

+ ` + container.appendChild(productContainer); +} + +let searchProduct = () => { + let searchInput = document.querySelector('#search').value; + products.map() +} \ No newline at end of file From 6b6a51c454c58f603d53a3d5cb8b6805b4770e1d Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Tue, 25 Jun 2019 11:38:14 -0400 Subject: [PATCH 02/23] search funct --- public/index.js | 39 ++++++++++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/public/index.js b/public/index.js index 75445541..61e6a0c3 100644 --- a/public/index.js +++ b/public/index.js @@ -2,19 +2,36 @@ // make section a variable let container = document.querySelector('.product_list'); +// Add Products to DOM -for (let i = 0; i < products.length; i++) { - let product = products[i]; - console.log(product); - let productContainer = document.createElement('div'); - productContainer.setAttribute('class', 'product'); - productContainer.innerHTML = ` -

${product.name}

- ` - container.appendChild(productContainer); +const loadProducts = (prod) => { + for (let i = 0; i < prod.length; i++) { + let product = prod[i]; + console.log(product); + let productContainer = document.createElement('div'); + productContainer.setAttribute('class', 'product'); + productContainer.innerHTML = ` +

${product.name}

+ ` + container.appendChild(productContainer); + } } +// TODO: clear previous list to replace with regex-ed filtered let searchProduct = () => { let searchInput = document.querySelector('#search').value; - products.map() -} \ No newline at end of file + let myRegEx = new RegExp(`${searchInput}`, 'gi'); + let holderArray = []; + for (let i = 0; i < products.length; i++) { + let productName = products[i].name; + if(productName.match(myRegEx)) { + holderArray.push(products[i]) + } + } + loadProducts(holderArray); +} + +//!! BOOKMARK: Shopping Cart + +// initial product load +loadProducts(products); \ No newline at end of file From 07ca4173bf7eb85c5ccf1654cd9e9cf701787c19 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Thu, 27 Jun 2019 17:32:42 -0500 Subject: [PATCH 03/23] add sections before branch to change load logic --- public/index.html | 13 ++++++------- public/index.js | 22 ++++++++++++++++++---- 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index 987b13b9..17acc55c 100644 --- a/public/index.html +++ b/public/index.html @@ -9,19 +9,18 @@
- -
-
+ +
+ +
-
- -
- +
+ \ No newline at end of file diff --git a/public/index.js b/public/index.js index 61e6a0c3..988955ac 100644 --- a/public/index.js +++ b/public/index.js @@ -5,33 +5,47 @@ let container = document.querySelector('.product_list'); // Add Products to DOM const loadProducts = (prod) => { + container.innerHTML = ''; for (let i = 0; i < prod.length; i++) { let product = prod[i]; - console.log(product); let productContainer = document.createElement('div'); productContainer.setAttribute('class', 'product'); productContainer.innerHTML = `

${product.name}

+

Rating: ${product.rating}

+

Number of Reviews: ${product.reviews.length}

+

Price: ${product.price}

+

` container.appendChild(productContainer); } } -// TODO: clear previous list to replace with regex-ed filtered let searchProduct = () => { let searchInput = document.querySelector('#search').value; let myRegEx = new RegExp(`${searchInput}`, 'gi'); let holderArray = []; for (let i = 0; i < products.length; i++) { let productName = products[i].name; - if(productName.match(myRegEx)) { + let productDesc = products[i].description; + if(productName.match(myRegEx) || productDesc.match(myRegEx)) { holderArray.push(products[i]) } } loadProducts(holderArray); } -//!! BOOKMARK: Shopping Cart +//!! Shopping Cart + +let viewCart = () => { + //viewCart code +} + +//!! View Details + +let viewDetail = (id) => { + //code +} // initial product load loadProducts(products); \ No newline at end of file From ce896c5ec96385b926931fd7e3881d6add563909 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Thu, 27 Jun 2019 18:20:55 -0500 Subject: [PATCH 04/23] logic worked --- public/index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/public/index.js b/public/index.js index 988955ac..d53577a0 100644 --- a/public/index.js +++ b/public/index.js @@ -4,21 +4,23 @@ let container = document.querySelector('.product_list'); // Add Products to DOM +const changeContainer = (value) => { + container.innerHTML = `${value}`; +} + const loadProducts = (prod) => { - container.innerHTML = ''; + let holder = ''; for (let i = 0; i < prod.length; i++) { let product = prod[i]; - let productContainer = document.createElement('div'); - productContainer.setAttribute('class', 'product'); - productContainer.innerHTML = ` + holder += `

${product.name}

Rating: ${product.rating}

Number of Reviews: ${product.reviews.length}

Price: ${product.price}

` - container.appendChild(productContainer); } + changeContainer(holder); } let searchProduct = () => { From 49d728f8c011dbbaeabc70a97c6ecea95dde23b4 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Thu, 27 Jun 2019 19:53:46 -0500 Subject: [PATCH 05/23] view details --- public/index.js | 48 +++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 45 insertions(+), 3 deletions(-) diff --git a/public/index.js b/public/index.js index d53577a0..5a79f009 100644 --- a/public/index.js +++ b/public/index.js @@ -1,6 +1,7 @@ // declaring variable // make section a variable let container = document.querySelector('.product_list'); +let holder = ''; // Add Products to DOM @@ -9,7 +10,7 @@ const changeContainer = (value) => { } const loadProducts = (prod) => { - let holder = ''; + holder = ''; for (let i = 0; i < prod.length; i++) { let product = prod[i]; holder += ` @@ -45,8 +46,49 @@ let viewCart = () => { //!! View Details -let viewDetail = (id) => { - //code +let viewDetail = (num) => { + let filterProduct = products.filter(x => x.id == num); + let product = filterProduct[0]; + let holder = '' + let ratingHolder = document.createElement('ul'); + for (let i = 0; i < product.reviews.length; i++) { + let eachRating = ''; + eachRating.innerHTML = ` +
  • Rating: ${product.reviews.rating} - ${product.reviews.description}
    • + ` + } + holder += ` +
    +
    + ${product.name} +
    +
    +

    ${product.name}

    +

    ${product.description}

    +

    Rating: ${product.rating}

    +

    Number of Reviews: ${product.reviews.length}

    +

    Price: ${product.price}

    +

    Category: ${product.category}

    +

    + + + +

    +
    +
    + ` + changeContainer(holder); } // initial product load From 49f71aa3c1ef65bbb02802a7e8903b50fa2de09a Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Thu, 27 Jun 2019 19:55:02 -0500 Subject: [PATCH 06/23] note for view details --- public/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/public/index.js b/public/index.js index 5a79f009..52e64f23 100644 --- a/public/index.js +++ b/public/index.js @@ -45,6 +45,7 @@ let viewCart = () => { } //!! View Details +//TODO: add rating loop results to HTML let viewDetail = (num) => { let filterProduct = products.filter(x => x.id == num); From a6a2dc71f55db83cf08bb2d048512a4337cbef4f Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Thu, 27 Jun 2019 23:05:26 -0500 Subject: [PATCH 07/23] view details DOM complete --- public/index.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/public/index.js b/public/index.js index 52e64f23..aa8f7f5a 100644 --- a/public/index.js +++ b/public/index.js @@ -50,13 +50,10 @@ let viewCart = () => { let viewDetail = (num) => { let filterProduct = products.filter(x => x.id == num); let product = filterProduct[0]; - let holder = '' - let ratingHolder = document.createElement('ul'); + holder = '' + let eachRating = ''; for (let i = 0; i < product.reviews.length; i++) { - let eachRating = ''; - eachRating.innerHTML = ` -
  • Rating: ${product.reviews.rating} - ${product.reviews.description}
    • - ` + eachRating += `
  • Rating: ${product.reviews[i].rating} - ${product.reviews[i].description}
    • ` } holder += `
    @@ -86,6 +83,8 @@ let viewDetail = (num) => {

    +

    Ratings:

    +

    ${eachRating}

    ` From c78662c53cb4dc857ebcbbd1592466ff989d5a08 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Fri, 28 Jun 2019 00:10:32 -0500 Subject: [PATCH 08/23] category filter --- public/index.html | 6 ++++++ public/index.js | 29 ++++++++++++++++++++++++++++- 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 17acc55c..7a08a887 100644 --- a/public/index.html +++ b/public/index.html @@ -14,6 +14,12 @@ +
    diff --git a/public/index.js b/public/index.js index aa8f7f5a..0d87725d 100644 --- a/public/index.js +++ b/public/index.js @@ -7,6 +7,7 @@ let holder = ''; const changeContainer = (value) => { container.innerHTML = `${value}`; + console.log('container changed'); } const loadProducts = (prod) => { @@ -22,6 +23,7 @@ const loadProducts = (prod) => { ` } changeContainer(holder); + console.log('products overview'); } let searchProduct = () => { @@ -36,6 +38,7 @@ let searchProduct = () => { } } loadProducts(holderArray); + console.log('search results'); } //!! Shopping Cart @@ -45,7 +48,6 @@ let viewCart = () => { } //!! View Details -//TODO: add rating loop results to HTML let viewDetail = (num) => { let filterProduct = products.filter(x => x.id == num); @@ -69,6 +71,8 @@ let viewDetail = (num) => {

    Category: ${product.category}

    +

    +

    - + + - +

    Ratings:

    ${eachRating}

    @@ -98,8 +118,15 @@ let viewDetail = (num) => { //!! Add to cart -let addToCart = () => { - +let addToCart = (num) => { + let quantityItem = document.querySelector('#quantity').value; + let cartItem = products.filter(x => x.id == num); + let cartItemName = cartItem[0].name; + let holderArray = []; + holderArray.push(quantityItem, cartItem[0]); + console.log(holderArray); + sessionStorage.setItem(`${cartItemName}`, JSON.stringify(holderArray)); + prodSeshStorage += 1; } //!! Category Filter From 23f3adfcae84353a3583c5f447e1e11ff4c2ae1b Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Fri, 28 Jun 2019 22:17:48 -0500 Subject: [PATCH 11/23] checkout func --- public/index.js | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/public/index.js b/public/index.js index f5013b8d..1c30a964 100644 --- a/public/index.js +++ b/public/index.js @@ -27,6 +27,8 @@ const loadProducts = (prod) => { console.log('products overview view'); } +//!! Search Functionality + let searchProduct = () => { let searchInput = document.querySelector('#search').value; let myRegEx = new RegExp(`${searchInput}`, 'gi'); @@ -61,10 +63,34 @@ let viewCart = () => { totalCost += parseFloat(removeDollar) * parseInt(parsedItem[0]); } holder += ` -

    Cart Total: $${totalCost}

    +

    Cart Total: $${totalCost}

    ` changeContainer(holder); +} + +//!! Checkout Functionality +const checkoutFunc = (cost) => { + let holder = ''; + holder += ` +

    Cart Total: $${cost}

    +
    + First name: +
    + +
    + Last name: +
    + +
    + Email: +
    + +
    + +
    + ` + changeContainer(holder); } //!! View Details @@ -116,6 +142,14 @@ let viewDetail = (num) => { console.log('product detail view'); } +//!! Reset functionality + +const resetFunc = () => { + console.log('reset clicked'); + document.querySelector('#search').value = ''; + loadProducts(products); +} + //!! Add to cart let addToCart = (num) => { From c73f0198ed1b28a21e383455473093d969c77052 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Fri, 28 Jun 2019 22:20:49 -0500 Subject: [PATCH 12/23] to do comments at top of js file --- public/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/public/index.js b/public/index.js index 1c30a964..c6883d31 100644 --- a/public/index.js +++ b/public/index.js @@ -1,3 +1,8 @@ +//TODO: Add comments and console.log for function and testing +//TODO: Add functionality for removing items from the cart +//TODO: Add 'are you still there' functionality +//?? Answer questions at the end of the readme.md? + // declaring variable // make section a variable let container = document.querySelector('.product_list'); From 6861ca0435b355666903617a32a4a5cf1c2330bb Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Fri, 28 Jun 2019 23:24:08 -0500 Subject: [PATCH 13/23] remove from cart func --- public/index.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/public/index.js b/public/index.js index c6883d31..c33c63f5 100644 --- a/public/index.js +++ b/public/index.js @@ -8,7 +8,7 @@ let container = document.querySelector('.product_list'); let holder = ''; -// Add Products to DOM +//!! Add Products to DOM const changeContainer = (value) => { container.innerHTML = `${value}`; @@ -63,16 +63,24 @@ let viewCart = () => {

    Price: ${parsedItem[1].price}

    Quantity: ${parsedItem[0]}

    Cost: $${parseFloat(removeDollar) * parseInt(parsedItem[0])}

    - + ` - totalCost += parseFloat(removeDollar) * parseInt(parsedItem[0]); + let multiplyQuantity = parseFloat(removeDollar) * parseInt(parsedItem[0]); + totalCost += multiplyQuantity; } + totalCost = parseFloat(Math.round(totalCost * 100) / 100).toFixed(2); holder += `

    Cart Total: $${totalCost}

    ` changeContainer(holder); } +const removeCartItem = (item) => { + sessionStorage.removeItem(item); + console.log(`${item} removed from cart`); + viewCart(); +} + //!! Checkout Functionality const checkoutFunc = (cost) => { @@ -165,7 +173,6 @@ let addToCart = (num) => { holderArray.push(quantityItem, cartItem[0]); console.log(holderArray); sessionStorage.setItem(`${cartItemName}`, JSON.stringify(holderArray)); - prodSeshStorage += 1; } //!! Category Filter From 47af133f46c085e0aee2f276f0811de2f2cf2c1e Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Fri, 28 Jun 2019 23:26:24 -0500 Subject: [PATCH 14/23] add comments to functions --- public/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/public/index.js b/public/index.js index c33c63f5..bad1e082 100644 --- a/public/index.js +++ b/public/index.js @@ -1,5 +1,3 @@ -//TODO: Add comments and console.log for function and testing -//TODO: Add functionality for removing items from the cart //TODO: Add 'are you still there' functionality //?? Answer questions at the end of the readme.md? @@ -104,6 +102,7 @@ const checkoutFunc = (cost) => { ` changeContainer(holder); + console.log('checkout form dislpayed') } //!! View Details @@ -171,8 +170,8 @@ let addToCart = (num) => { let cartItemName = cartItem[0].name; let holderArray = []; holderArray.push(quantityItem, cartItem[0]); - console.log(holderArray); sessionStorage.setItem(`${cartItemName}`, JSON.stringify(holderArray)); + console.log('item added to cart') } //!! Category Filter From 682e793d8061882e2e9653d75a5f867f85ce74f5 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Fri, 28 Jun 2019 23:27:43 -0500 Subject: [PATCH 15/23] added comments for todo --- public/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/index.js b/public/index.js index bad1e082..3c5f5e06 100644 --- a/public/index.js +++ b/public/index.js @@ -1,4 +1,5 @@ -//TODO: Add 'are you still there' functionality +//TODO: Add 'are you still there' functionality - add comments +//TODO: change form button to place order //?? Answer questions at the end of the readme.md? // declaring variable From 8e007b98a43e9c504f66633a8ec51532c8a2cf73 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Sun, 30 Jun 2019 12:45:53 -0500 Subject: [PATCH 16/23] add timeout feature and dev comments to some functions --- public/index.js | 55 ++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 45 insertions(+), 10 deletions(-) diff --git a/public/index.js b/public/index.js index 3c5f5e06..1fab4d2a 100644 --- a/public/index.js +++ b/public/index.js @@ -1,19 +1,40 @@ -//TODO: Add 'are you still there' functionality - add comments -//TODO: change form button to place order -//?? Answer questions at the end of the readme.md? +//? Why is storing the shopping cart in sessionStorage not the best choice? +//* It is not the best choice because local storage is a much better option. If the customer leaves their tab in +//* any way (close tab/browser, shuts down computer, battery dies, etc) they would lose everything they placed in their cart */ +//? What should happen when the Place Order button is clicked? +//* We should use the POST to send out data (cart and client info) to the server */ -// declaring variable -// make section a variable +//! declaring variables for container, holding data for functions, and are you there feature let container = document.querySelector('.product_list'); let holder = ''; - -//!! Add Products to DOM +let areYouThere = true; + +//! SetTimeout for 'Are you there' +let promptTimeout = () => { + // maintains timeout true each time a click occurs + areYouThere = true; + console.log('user click - 60 sec timer til prompt'); + setInterval(() => { + // switch varaibale to false + areYouThere = false; + console.log('Are you still there? prompt initiated'); + // alert user if variable is false + if (!areYouThere) {alert("Are you still there");}; + areYouThere = true; + console.log('user returned - 60 sec timer til prompt'); + }, 60000); +}; + +document.body.addEventListener('click', promptTimeout); + +//!! Change the container DOM const changeContainer = (value) => { container.innerHTML = `${value}`; - console.log('container changing to'); + console.log('container changing to...'); } +//!! Load product overview view when different functions are complete const loadProducts = (prod) => { holder = ''; for (let i = 0; i < prod.length; i++) { @@ -40,6 +61,7 @@ let searchProduct = () => { for (let i = 0; i < products.length; i++) { let productName = products[i].name; let productDesc = products[i].description; + // search for regex match in name and description if(productName.match(myRegEx) || productDesc.match(myRegEx)) { holderArray.push(products[i]) } @@ -53,6 +75,7 @@ let searchProduct = () => { let viewCart = () => { holder = '

    Cart

    '; let totalCost = 0; + // loop through session storage to grab all add to cart items for(let i = 1; i < sessionStorage.length; i++) { let cartSeshItem = sessionStorage.getItem(sessionStorage.key(i)); let parsedItem = JSON.parse(cartSeshItem); @@ -64,9 +87,12 @@ let viewCart = () => {

    Cost: $${parseFloat(removeDollar) * parseInt(parsedItem[0])}

    ` + // multiply the quantity and price for each let multiplyQuantity = parseFloat(removeDollar) * parseInt(parsedItem[0]); + // then add to totalCost variable totalCost += multiplyQuantity; } + // maintain 2 decimal points with total totalCost = parseFloat(Math.round(totalCost * 100) / 100).toFixed(2); holder += `

    Cart Total: $${totalCost}

    @@ -83,7 +109,7 @@ const removeCartItem = (item) => { //!! Checkout Functionality const checkoutFunc = (cost) => { - let holder = ''; + holder = ''; holder += `

    Cart Total: $${cost}

    @@ -99,7 +125,7 @@ const checkoutFunc = (cost) => {

    - +
    ` changeContainer(holder); @@ -109,10 +135,12 @@ const checkoutFunc = (cost) => { //!! View Details let viewDetail = (num) => { + // loop through array to find product id of item clicked let filterProduct = products.filter(x => x.id == num); let product = filterProduct[0]; holder = '' let eachRating = ''; + // loop to store each rating in object for (let i = 0; i < product.reviews.length; i++) { eachRating += `
  • Rating: ${product.reviews[i].rating} - ${product.reviews[i].description}
    • ` } @@ -159,17 +187,22 @@ let viewDetail = (num) => { const resetFunc = () => { console.log('reset clicked'); + // empty search input document.querySelector('#search').value = ''; + //reload all products loadProducts(products); } //!! Add to cart let addToCart = (num) => { + // grab quantity so it can be stored in sessionStorage let quantityItem = document.querySelector('#quantity').value; let cartItem = products.filter(x => x.id == num); let cartItemName = cartItem[0].name; let holderArray = []; + // set key to item name for storage + //* if item already exist in sessionStorage, the new addToCart will override holderArray.push(quantityItem, cartItem[0]); sessionStorage.setItem(`${cartItemName}`, JSON.stringify(holderArray)); console.log('item added to cart') @@ -180,7 +213,9 @@ let addToCart = (num) => { let categoryFilter = (category) => { console.log(`filter select for ${category}`); let holderArray = []; + // load all products if all categories is selected category == '' ? holderArray = products : + // loop through products array to find matching categories products.forEach(val => { if(category === val.category) { holderArray.push(val) From e5062772b13eebc03013a5210a0fca15d3f8c689 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Mon, 1 Jul 2019 16:39:59 -0500 Subject: [PATCH 17/23] quantity in cart --- public/index.js | 46 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 32 insertions(+), 14 deletions(-) diff --git a/public/index.js b/public/index.js index 1fab4d2a..c873d2d0 100644 --- a/public/index.js +++ b/public/index.js @@ -72,25 +72,43 @@ let searchProduct = () => { //!! Shopping Cart +let changeQuant = (name) => { + let newQuant = document.querySelector(`#select_${name}`).value; + let sessionItem = sessionStorage.getItem(`${name}`); + let sessionArray = JSON.parse(sessionItem); + sessionArray[0] = newQuant; + sessionStorage.setItem(`${name}`, JSON.stringify(sessionArray)); + viewCart(); +} + let viewCart = () => { holder = '

    Cart

    '; let totalCost = 0; // loop through session storage to grab all add to cart items - for(let i = 1; i < sessionStorage.length; i++) { + for(let i = 0; i < sessionStorage.length; i++) { let cartSeshItem = sessionStorage.getItem(sessionStorage.key(i)); - let parsedItem = JSON.parse(cartSeshItem); - let removeDollar = parsedItem[1].price.slice(1); - holder += ` -

    Product: ${parsedItem[1].name}

    -

    Price: ${parsedItem[1].price}

    -

    Quantity: ${parsedItem[0]}

    -

    Cost: $${parseFloat(removeDollar) * parseInt(parsedItem[0])}

    - - ` - // multiply the quantity and price for each - let multiplyQuantity = parseFloat(removeDollar) * parseInt(parsedItem[0]); - // then add to totalCost variable - totalCost += multiplyQuantity; + if(cartSeshItem !== 'true') { + let parsedItem = JSON.parse(cartSeshItem); + let removeDollar = parsedItem[1].price.slice(1); + // to build drop down in view cart + let optionHolder = ''; + // build options + for (let j = 1; j <= 10; j++) { + j == parsedItem[0] ? optionHolder += `` + : optionHolder += `` + } + holder += ` +

    Product: ${parsedItem[1].name}

    +

    Price: ${parsedItem[1].price}

    +

    Quantity: +

    Cost: $${parseFloat(Math.round(parseFloat(removeDollar) * parseFloat(parsedItem[0] * 100)) / 100).toFixed(2)}

    + + ` + // multiply the quantity and price for each + let multiplyQuantity = parseFloat(removeDollar) * parseInt(parsedItem[0]); + // then add to totalCost variable + totalCost += multiplyQuantity; + } } // maintain 2 decimal points with total totalCost = parseFloat(Math.round(totalCost * 100) / 100).toFixed(2); From bd6420f9e1f857f8e3efcbc5eaf97b17e16de3b5 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Mon, 1 Jul 2019 17:03:05 -0500 Subject: [PATCH 18/23] fix cart quant for prod w/ spaces --- public/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/public/index.js b/public/index.js index c873d2d0..689ca993 100644 --- a/public/index.js +++ b/public/index.js @@ -22,7 +22,7 @@ let promptTimeout = () => { if (!areYouThere) {alert("Are you still there");}; areYouThere = true; console.log('user returned - 60 sec timer til prompt'); - }, 60000); + }, 600000); }; document.body.addEventListener('click', promptTimeout); @@ -72,8 +72,8 @@ let searchProduct = () => { //!! Shopping Cart -let changeQuant = (name) => { - let newQuant = document.querySelector(`#select_${name}`).value; +let changeQuant = (name, id) => { + let newQuant = document.querySelector(`#${id}`).value; let sessionItem = sessionStorage.getItem(`${name}`); let sessionArray = JSON.parse(sessionItem); sessionArray[0] = newQuant; @@ -92,6 +92,7 @@ let viewCart = () => { let removeDollar = parsedItem[1].price.slice(1); // to build drop down in view cart let optionHolder = ''; + let itemNameId = parsedItem[1].id; // build options for (let j = 1; j <= 10; j++) { j == parsedItem[0] ? optionHolder += `` @@ -100,7 +101,7 @@ let viewCart = () => { holder += `

    Product: ${parsedItem[1].name}

    Price: ${parsedItem[1].price}

    -

    Quantity: +

    Quantity:

    Cost: $${parseFloat(Math.round(parseFloat(removeDollar) * parseFloat(parsedItem[0] * 100)) / 100).toFixed(2)}

    ` From b118a49a9113dbdd1445a583c95de8e4e7f7714f Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Fri, 5 Jul 2019 14:28:02 -0500 Subject: [PATCH 19/23] first commit --- public/index.html | 45 ++++++++++++++++++++++++++++++++------------- public/style.css | 3 +++ 2 files changed, 35 insertions(+), 13 deletions(-) create mode 100644 public/style.css diff --git a/public/index.html b/public/index.html index 3b6ab88c..13bfa20b 100644 --- a/public/index.html +++ b/public/index.html @@ -5,28 +5,47 @@ My Store - + + +
    -
    - - - - - -
    +
    +
    +
    + +
    +
    + Search + Reset +
    +
    + View Cart +
    +
    + +
    +
    +
    + + + \ No newline at end of file diff --git a/public/style.css b/public/style.css new file mode 100644 index 00000000..0a2195bb --- /dev/null +++ b/public/style.css @@ -0,0 +1,3 @@ +* { + font-family: Lato; +} \ No newline at end of file From 91a5e7e9b6b390dc63d5638268f6841dfe3133e3 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Fri, 5 Jul 2019 15:55:16 -0500 Subject: [PATCH 20/23] ui ux changes --- public/index.html | 6 ++-- public/index.js | 87 ++++++++++++++++++++++++++++++----------------- public/style.css | 11 ++++++ 3 files changed, 69 insertions(+), 35 deletions(-) diff --git a/public/index.html b/public/index.html index 13bfa20b..9d58e01a 100644 --- a/public/index.html +++ b/public/index.html @@ -8,10 +8,10 @@ + -
    -
    +

    ACA STORE PROJECT

    @@ -35,7 +35,7 @@
    -
    +
    diff --git a/public/index.js b/public/index.js index 689ca993..dce213e3 100644 --- a/public/index.js +++ b/public/index.js @@ -9,23 +9,23 @@ let container = document.querySelector('.product_list'); let holder = ''; let areYouThere = true; -//! SetTimeout for 'Are you there' -let promptTimeout = () => { - // maintains timeout true each time a click occurs - areYouThere = true; - console.log('user click - 60 sec timer til prompt'); - setInterval(() => { - // switch varaibale to false - areYouThere = false; - console.log('Are you still there? prompt initiated'); - // alert user if variable is false - if (!areYouThere) {alert("Are you still there");}; - areYouThere = true; - console.log('user returned - 60 sec timer til prompt'); - }, 600000); -}; - -document.body.addEventListener('click', promptTimeout); +// //! SetTimeout for 'Are you there' +// let promptTimeout = () => { +// // maintains timeout true each time a click occurs +// areYouThere = true; +// console.log('user click - 60 sec timer til prompt'); +// setInterval(() => { +// // switch varaibale to false +// areYouThere = false; +// console.log('Are you still there? prompt initiated'); +// // alert user if variable is false +// if (!areYouThere) {alert("Are you still there");}; +// areYouThere = true; +// console.log('user returned - 60 sec timer til prompt'); +// }, 600000); +// }; + +// document.body.addEventListener('click', promptTimeout); //!! Change the container DOM @@ -40,12 +40,19 @@ const loadProducts = (prod) => { for (let i = 0; i < prod.length; i++) { let product = prod[i]; holder += ` -

    ${product.name}

    -

    ${product.description}

    -

    Rating: ${product.rating}

    -

    Number of Reviews: ${product.reviews.length}

    -

    Price: ${product.price}

    -

    +
    +
    +
    + ${product.name} +

    ${product.description}

    +
    +

    Price: ${product.price}

    +
    +
    + View Details +
    +
    +
    ` } changeContainer(holder); @@ -161,11 +168,16 @@ let viewDetail = (num) => { let eachRating = ''; // loop to store each rating in object for (let i = 0; i < product.reviews.length; i++) { - eachRating += `
  • Rating: ${product.reviews[i].rating} - ${product.reviews[i].description}
    • ` + eachRating += `
  • + person + Rating: ${product.reviews[i].rating} +

    ${product.reviews[i].description}

    +
    • ` } holder += ` -
    -
    +
    +
    +
    ${product.name}
    @@ -176,9 +188,9 @@ let viewDetail = (num) => {

    Price: ${product.price}

    Category: ${product.category}

    - +

    -

    +

    - -

    -

    Ratings:

    -

    ${eachRating}

    +
    + +
    +
    +
    +
    Ratings:
    +
      + ${eachRating} +
    + ` changeContainer(holder); console.log('product detail view'); @@ -244,5 +266,6 @@ let categoryFilter = (category) => { console.log('category results'); } + // initial product load loadProducts(products); diff --git a/public/style.css b/public/style.css index 0a2195bb..6e796465 100644 --- a/public/style.css +++ b/public/style.css @@ -1,3 +1,14 @@ * { font-family: Lato; + color:#fff; +} + +h1 { + text-align: center; +} + +body { + background-image:url('https://images.unsplash.com/photo-1558538337-aab544368de8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); + background-size:cover; + margin: 20px !important; } \ No newline at end of file From e3c8e4265d7faeffb81dad7907698a0ff0189eb0 Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Mon, 8 Jul 2019 11:22:13 -0500 Subject: [PATCH 21/23] style tweaks --- public/index.js | 9 ++++++--- public/style.css | 8 +++++++- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/public/index.js b/public/index.js index dce213e3..e582617e 100644 --- a/public/index.js +++ b/public/index.js @@ -32,6 +32,9 @@ let areYouThere = true; const changeContainer = (value) => { container.innerHTML = `${value}`; console.log('container changing to...'); + $(document).ready(function(){ + $('select').formSelect(); + }); } //!! Load product overview view when different functions are complete @@ -40,10 +43,10 @@ const loadProducts = (prod) => { for (let i = 0; i < prod.length; i++) { let product = prod[i]; holder += ` -
    -
    +
    +
    - ${product.name} + ${product.name}

    ${product.description}


    Price: ${product.price}

    diff --git a/public/style.css b/public/style.css index 6e796465..bdfa12fd 100644 --- a/public/style.css +++ b/public/style.css @@ -9,6 +9,12 @@ h1 { body { background-image:url('https://images.unsplash.com/photo-1558538337-aab544368de8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); - background-size:cover; + background-size: cover; margin: 20px !important; + background-repeat: no-repeat; + background-attachment: fixed; +} + +.grey.darken-4 { + opacity:.8; } \ No newline at end of file From ba3c0bb78f5aa83319a345b9864e1f20f5ec4c8a Mon Sep 17 00:00:00 2001 From: dbobb220 Date: Tue, 9 Jul 2019 11:50:54 -0500 Subject: [PATCH 22/23] move cart button, fix mobile columns --- public/index.html | 16 +++++++++------- public/style.css | 6 ++++++ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/public/index.html b/public/index.html index 9d58e01a..7b794090 100644 --- a/public/index.html +++ b/public/index.html @@ -11,21 +11,23 @@ -

    ACA STORE PROJECT

    +
    +
    + View Cart +
    +

    ACA STORE PROJECT

    +
    -
    +
    -
    +
    Search Reset
    -
    - View Cart -
    -
    +
    - - - - - - - - - - - +
    +
    + +
    +
    + +
    -