From 96a533009ea7f66544a3ffa02cce5e41f1956393 Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Thu, 11 Apr 2019 18:50:02 -0500 Subject: [PATCH 01/23] initial commit, display products, handle click for details of product --- public/index.html | 19 +++++++++++++++++-- public/index.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++ public/products.js | 1 + public/style.css | 38 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 102 insertions(+), 2 deletions(-) create mode 100644 public/style.css diff --git a/public/index.html b/public/index.html index 138da963..a178c150 100644 --- a/public/index.html +++ b/public/index.html @@ -5,10 +5,25 @@ My Store - + - +
+ Home +
+ + +
+

Awesome Store

+
+ + + +
+ +
+ + \ No newline at end of file diff --git a/public/index.js b/public/index.js index e69de29b..28a8ece1 100644 --- a/public/index.js +++ b/public/index.js @@ -0,0 +1,46 @@ +'use strict' +console.log(products); + +// variables to store the divs used to display information: +const list = document.getElementById('list'); +const item = document.getElementById('itemContainer'); +const results = document.getElementById('searchResults'); + +// function to reset the divs on click event: +const resetDivs = () => { + list.innerHTML = ''; + item.innerHTML = ''; + searchResults.innerHTML = ''; +} + +// function to display all products on page load or when 'home' link is clicked: +const displayProducts = () => { + resetDivs(); + products.map( (value, index) => { + list.innerHTML += `
  • ${value.name}
    • ` + }) +} + +displayProducts(); + +// function to display details about a product when clicked: +const focusProduct = (index) => { + resetDivs(); + item.innerHTML = products[index].name; +} + + + +let searchBox = document.getElementById('searchBox'); +let searchButton = document.getElementById('searchButton'); + +searchButton.onclick = function() { + let regex = new RegExp(searchBox.value); + if( searchBox.value.length === 0 ) alert('You must type in something to search!'); + console.log(regex); + for( let product of products ) { + if( product.name.match(regex) ) { + console.log('works'); + } + } +} \ No newline at end of file diff --git a/public/products.js b/public/products.js index 4f07bb51..5562cdbf 100644 --- a/public/products.js +++ b/public/products.js @@ -219,3 +219,4 @@ const products = [{ } ] }]; + diff --git a/public/style.css b/public/style.css new file mode 100644 index 00000000..230f97f7 --- /dev/null +++ b/public/style.css @@ -0,0 +1,38 @@ +body { + font-family: Georgia, 'Times New Roman', Times, serif +} + +header { + position: static; + top: 0; + height: 40px; + background-color: #e6e6e6; + border-bottom: 2px solid black; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; +} + +li { + margin: 10px 0 0 0; + list-style-type: none; +} + +a, button { + cursor: pointer; +} + +a:hover { + color: blue; +} + +input { + width: 400px; +} + +.product { + width: 600px; + margin: auto; + border: 1px solid red; +} \ No newline at end of file From 105aa7289c2536b1a5f7b53c91c20d4632cb6e21 Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Thu, 11 Apr 2019 19:35:25 -0500 Subject: [PATCH 02/23] did some minor stuff --- public/index.html | 2 +- public/index.js | 17 +++++++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/public/index.html b/public/index.html index a178c150..657fd203 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,7 @@
    - Home + Home
    diff --git a/public/index.js b/public/index.js index 28a8ece1..38de21e4 100644 --- a/public/index.js +++ b/public/index.js @@ -14,14 +14,14 @@ const resetDivs = () => { } // function to display all products on page load or when 'home' link is clicked: -const displayProducts = () => { +const displayProducts = (products) => { resetDivs(); products.map( (value, index) => { list.innerHTML += `
  • ${value.name}
    • ` }) } -displayProducts(); +displayProducts(products); // function to display details about a product when clicked: const focusProduct = (index) => { @@ -34,13 +34,18 @@ const focusProduct = (index) => { let searchBox = document.getElementById('searchBox'); let searchButton = document.getElementById('searchButton'); + +// look into filter w/ regex searchButton.onclick = function() { - let regex = new RegExp(searchBox.value); - if( searchBox.value.length === 0 ) alert('You must type in something to search!'); + let searchText = searchBox.value; + searchText = searchText.toLowerCase(); + let regex = new RegExp(searchText); + // if( searchBox.value.length === 0 ) alert('You must type in something to search!'); console.log(regex); for( let product of products ) { - if( product.name.match(regex) ) { - console.log('works'); + if( product.name.toLowerCase().match(regex) ) { + resetDivs(); + list.innerHTML = `
  • ${product.name}
    • `; } } } \ No newline at end of file From a3dd0572fae1ccac54553f6bedc76aac93bf60ae Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Fri, 12 Apr 2019 12:55:41 -0500 Subject: [PATCH 03/23] got search working with regex and .filter() --- public/index.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/public/index.js b/public/index.js index 38de21e4..dc52afe6 100644 --- a/public/index.js +++ b/public/index.js @@ -29,23 +29,21 @@ const focusProduct = (index) => { item.innerHTML = products[index].name; } - - let searchBox = document.getElementById('searchBox'); let searchButton = document.getElementById('searchButton'); - -// look into filter w/ regex +// handle search click event with regex and filter: searchButton.onclick = function() { + // create local variable to store a string from searchBox's value: let searchText = searchBox.value; + // make search text lower case to make it easier to compare without worry about case: searchText = searchText.toLowerCase(); + // define regular expression based on the search text: let regex = new RegExp(searchText); - // if( searchBox.value.length === 0 ) alert('You must type in something to search!'); - console.log(regex); - for( let product of products ) { - if( product.name.toLowerCase().match(regex) ) { - resetDivs(); - list.innerHTML = `
  • ${product.name}
    • `; - } - } -} \ No newline at end of file + // filter the products array by using the test method to find all the product names which match the regex, and return them to a new array: + let filteredProducts = products.filter( (product) => { + return regex.test(product.name.toLowerCase()); + }) + // re-render the list displaying only the filtered products: + displayProducts(filteredProducts); +} From 56301b200cd1b087377bc957716f2e19ab7c25d2 Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Sun, 14 Apr 2019 20:35:49 -0500 Subject: [PATCH 04/23] modularized, added addToCart(), fleshed out focusProduct(), did some more stuff --- public/add-to-cart.js | 7 ++++++ public/elements.js | 8 ++++++ public/focus-product.js | 26 ++++++++++++++++++++ public/index.html | 35 ++++++++++++++++---------- public/index.js | 54 ++++++++++------------------------------- public/reset.js | 7 ++++++ public/reviews.js | 0 public/search.js | 24 ++++++++++++++++++ public/style.css | 11 ++++----- 9 files changed, 112 insertions(+), 60 deletions(-) create mode 100644 public/add-to-cart.js create mode 100644 public/elements.js create mode 100644 public/focus-product.js create mode 100644 public/reset.js create mode 100644 public/reviews.js create mode 100644 public/search.js diff --git a/public/add-to-cart.js b/public/add-to-cart.js new file mode 100644 index 00000000..89b7229c --- /dev/null +++ b/public/add-to-cart.js @@ -0,0 +1,7 @@ +// create function to add products to cart: +const addToCart = (index) => { + cart.push(products[index]) + + cartQty.innerHTML = cart.length === 1 ? `${cart.length} item in cart.` : `${cart.length} items in cart.` + console.log(cart) +} \ No newline at end of file diff --git a/public/elements.js b/public/elements.js new file mode 100644 index 00000000..e2b117ce --- /dev/null +++ b/public/elements.js @@ -0,0 +1,8 @@ +// define variables to make DOM manipulation easier: +const list = document.getElementById('list'); +const item = document.getElementById('productContainer'); +const reviews = document.getElementById('reviews'); +const cartQty = document.getElementById('cartQty'); +const searchResults = document.getElementById('searchResults'); +const searchBox = document.getElementById('searchBox'); +const searchButton = document.getElementById('searchButton'); diff --git a/public/focus-product.js b/public/focus-product.js new file mode 100644 index 00000000..824cbf2c --- /dev/null +++ b/public/focus-product.js @@ -0,0 +1,26 @@ +// function to display details about a product when clicked: +const focusProduct = (index) => { + reset(); + + // deconstruct properties from the passed-in index position of products array: + let { + name, + price, + description, + imgUrl, + reviews, + rating, + category + } = products[index]; + + console.log(name, price, description, imgUrl, rating, category, reviews[0].description, reviews[0].rating) + + item.innerHTML = ` +

    ${name}

    +

    ${price}

    + +

    ${description}

    + + + `; +} diff --git a/public/index.html b/public/index.html index 657fd203..19a03309 100644 --- a/public/index.html +++ b/public/index.html @@ -1,29 +1,38 @@ - - + + My Store - - + +
    - Home -
    - + Home + +
    +
    -

    Awesome Store

    +

    A Store

    -
      +
        -
        +
        +
        +
        -
        +
        - - + + + + + + + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index dc52afe6..67ebc690 100644 --- a/public/index.js +++ b/public/index.js @@ -1,49 +1,21 @@ 'use strict' -console.log(products); - -// variables to store the divs used to display information: -const list = document.getElementById('list'); -const item = document.getElementById('itemContainer'); -const results = document.getElementById('searchResults'); - -// function to reset the divs on click event: -const resetDivs = () => { - list.innerHTML = ''; - item.innerHTML = ''; - searchResults.innerHTML = ''; -} +const cart = []; // function to display all products on page load or when 'home' link is clicked: const displayProducts = (products) => { - resetDivs(); - products.map( (value, index) => { - list.innerHTML += `
      • ${value.name}
        • ` + reset(); + // map the products array and generate html for each position: + products.map( (value) => { + // instead of using index from the map function for ID's, use the '_id' property for each item minus 1. + // this returns the index of the item within the original products array, even when different arrays are passed through (e.g. a search results array) + let index = value._id - 1; + + // manipulate DOM to list out products: + list.innerHTML += `
      • + + ${value.name} +
        • ` }) } displayProducts(products); - -// function to display details about a product when clicked: -const focusProduct = (index) => { - resetDivs(); - item.innerHTML = products[index].name; -} - -let searchBox = document.getElementById('searchBox'); -let searchButton = document.getElementById('searchButton'); - -// handle search click event with regex and filter: -searchButton.onclick = function() { - // create local variable to store a string from searchBox's value: - let searchText = searchBox.value; - // make search text lower case to make it easier to compare without worry about case: - searchText = searchText.toLowerCase(); - // define regular expression based on the search text: - let regex = new RegExp(searchText); - // filter the products array by using the test method to find all the product names which match the regex, and return them to a new array: - let filteredProducts = products.filter( (product) => { - return regex.test(product.name.toLowerCase()); - }) - // re-render the list displaying only the filtered products: - displayProducts(filteredProducts); -} diff --git a/public/reset.js b/public/reset.js new file mode 100644 index 00000000..8f43154d --- /dev/null +++ b/public/reset.js @@ -0,0 +1,7 @@ + +// function to reset the divs on click event: +const reset = () => { + list.innerHTML = ''; + item.innerHTML = ''; + searchResults.innerHTML = ''; +} diff --git a/public/reviews.js b/public/reviews.js new file mode 100644 index 00000000..e69de29b diff --git a/public/search.js b/public/search.js new file mode 100644 index 00000000..d91a622b --- /dev/null +++ b/public/search.js @@ -0,0 +1,24 @@ +// handle search click event with regex and filter: +searchButton.onclick = function() { + reset(); + // create local variable to store a string from searchBox's value: + let searchText = searchBox.value; + + // make search text lower case to make it easier to compare without worry about case: + searchText = searchText.toLowerCase(); + + // define regular expression based on the search text: + let regex = new RegExp(searchText); + + // filter the products array by using the test method to find all the product names which match the regex, and return them to a new array: + let filteredProducts = products.filter( (product) => { + return regex.test(product.name.toLowerCase()); + }) + + if( filteredProducts.length == 0 ) { list.innerHTML = '

        No products found.

        Go Back'; } + // re-render the list displaying only the filtered products: + else { displayProducts(filteredProducts); } + + // clear the search field: + searchBox.value = ''; +} \ No newline at end of file diff --git a/public/style.css b/public/style.css index 230f97f7..c8778d57 100644 --- a/public/style.css +++ b/public/style.css @@ -27,12 +27,11 @@ a:hover { color: blue; } +.back { + color: blue; + text-decoration: underline; +} + input { width: 400px; } - -.product { - width: 600px; - margin: auto; - border: 1px solid red; -} \ No newline at end of file From 40233e11a97f3eb5b768b8f8d94071626dfb6a9f Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Tue, 16 Apr 2019 15:19:15 -0500 Subject: [PATCH 05/23] added shopping cart, added filter by category, did some other stuff --- public/add-to-cart.js | 7 ------ public/cart.js | 50 ++++++++++++++++++++++++++++++++++++++ public/display-selected.js | 18 ++++++++++++++ public/elements.js | 5 ++++ public/focus-product.js | 11 ++------- public/index.html | 13 ++++++++-- public/reset.js | 1 + 7 files changed, 87 insertions(+), 18 deletions(-) delete mode 100644 public/add-to-cart.js create mode 100644 public/cart.js create mode 100644 public/display-selected.js diff --git a/public/add-to-cart.js b/public/add-to-cart.js deleted file mode 100644 index 89b7229c..00000000 --- a/public/add-to-cart.js +++ /dev/null @@ -1,7 +0,0 @@ -// create function to add products to cart: -const addToCart = (index) => { - cart.push(products[index]) - - cartQty.innerHTML = cart.length === 1 ? `${cart.length} item in cart.` : `${cart.length} items in cart.` - console.log(cart) -} \ No newline at end of file diff --git a/public/cart.js b/public/cart.js new file mode 100644 index 00000000..8239506c --- /dev/null +++ b/public/cart.js @@ -0,0 +1,50 @@ +// function to update cart quantity at top of page: +const updateQty = () => { + return cartQty.innerHTML = cart.length === 1 ? `${cart.length} item in cart.` : `${cart.length} items in cart.` + +} + +// function to add item to cart: +const addToCart = (index) => { + cart.push(products[index]) + updateQty(); +} + +// function to remove item from cart: +const removeFromCart = (index) => { + cart.splice(index, 1) + updateQty(); + viewCart(cart); +} + +// function to display total price of cart: +const getTotal = () => { + // define variable to count the total: + let total = 0; + // loop through cart array: + for( let product of cart ) { + // slice the price after the dollar sign: + let price = product.price.slice(1); + // since the price is stored as a string, use Number(): + total += Number(price); + } + // round off the total to the 2nd decimal place: + total = total.toFixed(2); + // display the total in the appropriate HTML element: + cartTotal.innerHTML = `Cart Total: $${total}`; +} + +// function to view cart: +const viewCart = (cart) => { + reset(); + cart.map( (value, index) => { + // use index from map function to be able to remove item from its location in cart array, but also define an index based on the item's position within the products array in order to display details for that product when it is clicked: + let productsIndex = value._id - 1; + list.innerHTML += `
      • + + ${value.price} ${value.name} +
        • `; + }) + // update total: + getTotal(); +} diff --git a/public/display-selected.js b/public/display-selected.js new file mode 100644 index 00000000..c1be54f2 --- /dev/null +++ b/public/display-selected.js @@ -0,0 +1,18 @@ +'use strict' + +// define function to display products by selected category: +const displaySelected = () => { + // define empty array to add selected items to: + let selected = []; + // if a category is selected: + if(category.value) { + products.map( (element) => { + // if a product's category matches the selected category, push the product to the selected array: + if(element.category === category.value) selected.push(element); + }) + // use the displayProducts function with the selected array: + displayProducts(selected); + } + // if no category is selected, display an alert message: + else alert('You must select a category!') +} \ No newline at end of file diff --git a/public/elements.js b/public/elements.js index e2b117ce..598de3b3 100644 --- a/public/elements.js +++ b/public/elements.js @@ -2,7 +2,12 @@ const list = document.getElementById('list'); const item = document.getElementById('productContainer'); const reviews = document.getElementById('reviews'); + const cartQty = document.getElementById('cartQty'); +const cartTotal = document.getElementById('cartTotal'); + const searchResults = document.getElementById('searchResults'); const searchBox = document.getElementById('searchBox'); const searchButton = document.getElementById('searchButton'); + +const category = document.getElementById('category'); \ No newline at end of file diff --git a/public/focus-product.js b/public/focus-product.js index 824cbf2c..6835967f 100644 --- a/public/focus-product.js +++ b/public/focus-product.js @@ -8,19 +8,12 @@ const focusProduct = (index) => { price, description, imgUrl, - reviews, - rating, - category } = products[index]; - console.log(name, price, description, imgUrl, rating, category, reviews[0].description, reviews[0].rating) - + // use deconstructed properties to populate some HTML: item.innerHTML = `

        ${name}

        ${price}

        -

        ${description}

        - - - `; +

        ${description}

        `; } diff --git a/public/index.html b/public/index.html index 19a03309..4e12147b 100644 --- a/public/index.html +++ b/public/index.html @@ -10,7 +10,7 @@
        Home - +
        @@ -18,7 +18,15 @@

        A Store

        + +
          +

          @@ -29,7 +37,8 @@

          A Store

          - + + diff --git a/public/reset.js b/public/reset.js index 8f43154d..cb62a78a 100644 --- a/public/reset.js +++ b/public/reset.js @@ -4,4 +4,5 @@ const reset = () => { list.innerHTML = ''; item.innerHTML = ''; searchResults.innerHTML = ''; + cartTotal.innerHTML = ''; } From e2b2190093a304607df6351f07e45b5f90aad7df Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Tue, 16 Apr 2019 15:42:03 -0500 Subject: [PATCH 06/23] added clear cart, some minor changes --- public/cart.js | 36 ++++++++++++++++++++++++------------ public/index.html | 2 +- public/index.js | 3 ++- 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/public/cart.js b/public/cart.js index 8239506c..c0ea3391 100644 --- a/public/cart.js +++ b/public/cart.js @@ -31,20 +31,32 @@ const getTotal = () => { // round off the total to the 2nd decimal place: total = total.toFixed(2); // display the total in the appropriate HTML element: - cartTotal.innerHTML = `Cart Total: $${total}`; + cartTotal.innerHTML = ` + + Cart Total: $${total}`; } // function to view cart: -const viewCart = (cart) => { +const viewCart = () => { reset(); - cart.map( (value, index) => { - // use index from map function to be able to remove item from its location in cart array, but also define an index based on the item's position within the products array in order to display details for that product when it is clicked: - let productsIndex = value._id - 1; - list.innerHTML += `
        • - - ${value.price} ${value.name} -
          • `; - }) - // update total: - getTotal(); + if(cart.length === 0) {list.innerHTML = `Cart is empty. Go Home`} + else { + cart.map( (value, index) => { + // use index from map function to be able to remove item from its location in cart array, but also define an index based on the item's position within the products array in order to display details for that product when it is clicked: + let productsIndex = value._id - 1; + list.innerHTML += `
        • + + ${value.price} ${value.name} +
          • `; + }) + // update total: + getTotal(); + } } + +// function to clear cart: +const clearCart = () => { + cart.length = 0; + updateQty(); + viewCart(); +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 4e12147b..b832aecd 100644 --- a/public/index.html +++ b/public/index.html @@ -10,7 +10,7 @@
          Home - +
          diff --git a/public/index.js b/public/index.js index 67ebc690..d4b0ebd9 100644 --- a/public/index.js +++ b/public/index.js @@ -1,6 +1,6 @@ 'use strict' -const cart = []; +let cart = []; // function to display all products on page load or when 'home' link is clicked: const displayProducts = (products) => { reset(); @@ -19,3 +19,4 @@ const displayProducts = (products) => { } displayProducts(products); +updateQty(); From 4327bb78aee2b2bb52d4a3bd2ffda4c62b577326 Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Tue, 16 Apr 2019 16:12:02 -0500 Subject: [PATCH 07/23] added checkout form. changed a few things on cart page --- public/cart.js | 9 +++++---- public/checkout.js | 12 ++++++++++++ public/index.html | 1 + public/style.css | 11 +++++++++++ 4 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 public/checkout.js diff --git a/public/cart.js b/public/cart.js index c0ea3391..9bea218b 100644 --- a/public/cart.js +++ b/public/cart.js @@ -30,10 +30,8 @@ const getTotal = () => { } // round off the total to the 2nd decimal place: total = total.toFixed(2); + return total; // display the total in the appropriate HTML element: - cartTotal.innerHTML = ` - - Cart Total: $${total}`; } // function to view cart: @@ -49,14 +47,17 @@ const viewCart = () => { ${value.price} ${value.name} `; }) + cartTotal.innerHTML = ``; // update total: getTotal(); + // generate checkout form: + checkout(); } } // function to clear cart: const clearCart = () => { cart.length = 0; - updateQty(); + updateQty(); viewCart(); } \ No newline at end of file diff --git a/public/checkout.js b/public/checkout.js new file mode 100644 index 00000000..a7c69b40 --- /dev/null +++ b/public/checkout.js @@ -0,0 +1,12 @@ + +const checkout = () => { + + item.innerHTML = `

          Cart Total: $${getTotal()} +

          Checkout

          +
          + + + + +
          ` +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index b832aecd..2ba7ccf6 100644 --- a/public/index.html +++ b/public/index.html @@ -38,6 +38,7 @@

          A Store

          + diff --git a/public/style.css b/public/style.css index c8778d57..9cbefe57 100644 --- a/public/style.css +++ b/public/style.css @@ -35,3 +35,14 @@ a:hover { input { width: 400px; } + +form { + display: flex; + flex-direction: column; + align-items: center; + width: 500px; +} + +form > button { + width: 200px; +} \ No newline at end of file From 42b71a795b7a05329e68255e88fa6a3208d83819 Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Tue, 16 Apr 2019 19:35:09 -0500 Subject: [PATCH 08/23] changed filter to occur on select change --- public/checkout.js | 2 +- public/{display-selected.js => display-filtered.js} | 2 +- public/index.html | 7 ++++--- 3 files changed, 6 insertions(+), 5 deletions(-) rename public/{display-selected.js => display-filtered.js} (95%) diff --git a/public/checkout.js b/public/checkout.js index a7c69b40..628c2010 100644 --- a/public/checkout.js +++ b/public/checkout.js @@ -6,7 +6,7 @@ const checkout = () => {
          - +
          ` } \ No newline at end of file diff --git a/public/display-selected.js b/public/display-filtered.js similarity index 95% rename from public/display-selected.js rename to public/display-filtered.js index c1be54f2..f7ccb8a4 100644 --- a/public/display-selected.js +++ b/public/display-filtered.js @@ -1,7 +1,7 @@ 'use strict' // define function to display products by selected category: -const displaySelected = () => { +const displayFiltered = () => { // define empty array to add selected items to: let selected = []; // if a category is selected: diff --git a/public/index.html b/public/index.html index 2ba7ccf6..46af8912 100644 --- a/public/index.html +++ b/public/index.html @@ -18,13 +18,14 @@

          A Store

          - - +

            @@ -37,7 +38,7 @@

            A Store

            - + From 8c79e135657533c2640c843bb744c320f37d0b95 Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Tue, 16 Apr 2019 19:44:35 -0500 Subject: [PATCH 09/23] minor change to view cart html --- public/index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 46af8912..fa7ef6ec 100644 --- a/public/index.html +++ b/public/index.html @@ -10,7 +10,10 @@
            Home - +
            + + View Cart +
            From 970213e55039e6b5428e981f6f6483b311ec8270 Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Tue, 16 Apr 2019 20:34:36 -0500 Subject: [PATCH 10/23] changed search bar to display results on input change event --- public/index.html | 3 +-- public/search.js | 5 +++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/public/index.html b/public/index.html index fa7ef6ec..69193ce6 100644 --- a/public/index.html +++ b/public/index.html @@ -15,8 +15,7 @@ View Cart
            - - +

            A Store

            diff --git a/public/search.js b/public/search.js index d91a622b..e5c299d0 100644 --- a/public/search.js +++ b/public/search.js @@ -1,5 +1,6 @@ // handle search click event with regex and filter: -searchButton.onclick = function() { +// searchButton.onclick +const search = function() { reset(); // create local variable to store a string from searchBox's value: let searchText = searchBox.value; @@ -20,5 +21,5 @@ searchButton.onclick = function() { else { displayProducts(filteredProducts); } // clear the search field: - searchBox.value = ''; + // searchBox.value = ''; } \ No newline at end of file From 4496361620edd320e52dce344a04040c83edef32 Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Tue, 16 Apr 2019 20:38:52 -0500 Subject: [PATCH 11/23] minor search edit --- public/index.html | 1 + public/search.js | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/public/index.html b/public/index.html index 69193ce6..a342df24 100644 --- a/public/index.html +++ b/public/index.html @@ -16,6 +16,7 @@
            +

            A Store

            diff --git a/public/search.js b/public/search.js index e5c299d0..9906e204 100644 --- a/public/search.js +++ b/public/search.js @@ -22,4 +22,9 @@ const search = function() { // clear the search field: // searchBox.value = ''; +} + +const clearSearch = () => { + searchBox.value = ''; + displayProducts(products); } \ No newline at end of file From 33a74e38951345a20fa7e99eaaffdcc82ca6987f Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Tue, 16 Apr 2019 20:56:30 -0500 Subject: [PATCH 12/23] some minor changes, started to try & get addToCart working better --- public/cart.js | 9 +++++++-- public/display-products.js | 16 ++++++++++++++++ public/index.html | 1 + public/index.js | 16 ---------------- public/search.js | 6 ++++-- 5 files changed, 28 insertions(+), 20 deletions(-) create mode 100644 public/display-products.js diff --git a/public/cart.js b/public/cart.js index 9bea218b..d7457399 100644 --- a/public/cart.js +++ b/public/cart.js @@ -5,8 +5,13 @@ const updateQty = () => { } // function to add item to cart: -const addToCart = (index) => { - cart.push(products[index]) +const addToCart = (index, itemQty) => { + // let toAdd = { + // 'product': products[index], + // 'qty': itemQty; + // } + // cart.push(toAdd); + cart.push(products[index]); updateQty(); } diff --git a/public/display-products.js b/public/display-products.js new file mode 100644 index 00000000..6d5501c9 --- /dev/null +++ b/public/display-products.js @@ -0,0 +1,16 @@ +// function to display all products: +const displayProducts = (products) => { + reset(); + // map the products array and generate html for each position: + products.map( (value) => { + // instead of using index from the map function for ID's, use the '_id' property for each item minus 1. + // this returns the index of the item within the original products array, even when different arrays are passed through (e.g. a search results array) + let index = value._id - 1; + + // manipulate DOM to list out products: + list.innerHTML += `
          • + + ${value.name} +
            • ` + }) +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index a342df24..1642ef67 100644 --- a/public/index.html +++ b/public/index.html @@ -44,6 +44,7 @@

            A Store

            + diff --git a/public/index.js b/public/index.js index d4b0ebd9..70fb6769 100644 --- a/public/index.js +++ b/public/index.js @@ -1,22 +1,6 @@ 'use strict' let cart = []; -// function to display all products on page load or when 'home' link is clicked: -const displayProducts = (products) => { - reset(); - // map the products array and generate html for each position: - products.map( (value) => { - // instead of using index from the map function for ID's, use the '_id' property for each item minus 1. - // this returns the index of the item within the original products array, even when different arrays are passed through (e.g. a search results array) - let index = value._id - 1; - - // manipulate DOM to list out products: - list.innerHTML += `
          • - - ${value.name} -
            • ` - }) -} displayProducts(products); updateQty(); diff --git a/public/search.js b/public/search.js index 9906e204..93af99ef 100644 --- a/public/search.js +++ b/public/search.js @@ -25,6 +25,8 @@ const search = function() { } const clearSearch = () => { - searchBox.value = ''; - displayProducts(products); + if(searchBox.value) { + searchBox.value = ''; + displayProducts(products); + } } \ No newline at end of file From f5ad9dc8802505920c940ba2d22d0bf13faaeb0a Mon Sep 17 00:00:00 2001 From: Aaron Altounian Date: Tue, 16 Apr 2019 21:03:39 -0500 Subject: [PATCH 13/23] added dropdown box for QTY in product focus --- public/focus-product.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/public/focus-product.js b/public/focus-product.js index 6835967f..07948246 100644 --- a/public/focus-product.js +++ b/public/focus-product.js @@ -10,10 +10,18 @@ const focusProduct = (index) => { imgUrl, } = products[index]; + let options; + function selectOptions() { + for(let i = 1; i <= 10; i++) { + options += `