From 03481649ec7154a58972fcb1d47d789abb1c30cb Mon Sep 17 00:00:00 2001 From: alaynapuck28 Date: Mon, 24 Jun 2019 19:23:44 -0500 Subject: [PATCH 1/7] first commit --- public/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/index.js b/public/index.js index 034dbd5e..6515a734 100644 --- a/public/index.js +++ b/public/index.js @@ -1 +1,2 @@ -//stuff \ No newline at end of file +//stuff +//more stuff \ No newline at end of file From 3735a91d9fec7863cc49c3225e51c7a76bfc4276 Mon Sep 17 00:00:00 2001 From: alaynapuck28 Date: Sun, 7 Jul 2019 15:17:39 -0500 Subject: [PATCH 2/7] add to cart updated --- .vscode/settings.json | 3 + public/index.html | 32 +++++++++++ public/index.js | 127 +++++++++++++++++++++++++++++++++++++++++- public/products.js | 2 +- public/style.css | 65 +++++++++++++++++++++ 5 files changed, 226 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 public/style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 138da963..6904c249 100644 --- a/public/index.html +++ b/public/index.html @@ -5,9 +5,41 @@ My Store + + + +
+ + + +
+ +
+

List Of Products

+
+ +
+
+ +
+

Details

+
+
+ +
+

Shopping Cart

+
    + +
+
+ + + + + diff --git a/public/index.js b/public/index.js index 6515a734..5c073136 100644 --- a/public/index.js +++ b/public/index.js @@ -1,2 +1,125 @@ -//stuff -//more stuff \ No newline at end of file +let detailsButton = (document.createElement("button").value = "More Details!"); + +function Products(products) { + document.getElementById("products").innerHTML = products.map( + (product, index) => { + let amount= sessionStorage.getItem(product.id); + if(amount){ + addToCart(product.id); + } + + return `
+ +

${product.name}

+ image of ${product.name} +

Product ID: ${product.id}

+

${product.description}

+ + +

+

+ +
+
`; + + } + ).join(' '); + } + +window.onload = Products(products); + +function Search() { + + let input = document.getElementById("searchBox"); + let filter = input.value; + let foundProd = []; + products.map((item, index) => { + let nameArray = item.name.split(" "); + nameArray.filter(name => { + if (name == filter) { + foundProd.push(item); + } + }); + }); + return Products(foundProd); +} + +// function search() { +// let searchWord = document.getElementById("searchBox").value; +// let filteredProducts = products.filter(p => p.name === searchWord) + +// Products(filteredProducts); +// } + + +function moreDetails(prodId) { + let foundProd = products.find(p => p.id === prodId); + + document.getElementById("productDetail").innerHTML = + `
${foundProd.name}
+
Ratings: ${foundProd.rating}/5
`; +} + + + +/******************* Call both AddToCart and Store Functions *********************/ +function addToCartAndStore(id){ + //if item in storage already dont add again + if(sessionStorage.getItem(id)) return; + addToCart(id); + Storage(id); + +} + + +//***************Session Storage*************/ +function Storage(id){ + sessionStorage.setItem(id, 1) +} + + + +//*********************Add to Cart *************/ +function addToCart(id) { + + let cartItemsL= document.getElementById('cartitems'); + let productId = products.find(function(product) { + return product.id == id; + }); + let cartItems = cartItemsL.innerHTML+ `
  • ${productId.name}: ${productId.price}
    • `; + + document.getElementById("cartitems").innerHTML = cartItems; + +} + +//*************** search function not working**********/ + +// let newSearchedProducts=[]; +// // let moreDetailsButton=document.getElementById('moredetails') + +// for (i = 0; i < productText.length; i++) { +// txtValue = productText[i].textContent +// if (txtValue.toUpperCase().indexOf(filter) > -1) { +// newSearchedProducts.push(product) + +// } else { +// productText[i].style.display = "none"; +// // moreDetailsButton[i].style.display="none"; +// } +// } + + + + diff --git a/public/products.js b/public/products.js index 0e2facb6..280796d0 100644 --- a/public/products.js +++ b/public/products.js @@ -66,7 +66,7 @@ const products = [{ ] }, { "id": 3, - "name": "Almond", + "name": "Sweet Almond", "description": "A great treat that tastes great", "reviews": 27, "rating": 5, diff --git a/public/style.css b/public/style.css new file mode 100644 index 00000000..1fcda6b5 --- /dev/null +++ b/public/style.css @@ -0,0 +1,65 @@ +* { + font-family: Roboto; + } + + body { + display: grid; + grid-template-rows: auto; + grid-template-columns: 33% 33% 33%; + grid-template-areas: + "search search search" + "details products cart"; + } + + h3 { + text-align: center; + font-size: 1.5rem; + } + #listOfThings{ + grid-area: products; + background-color: white; + text-align: center; + } + + +#searchArea { + display:grid; + grid-area: search; + text-align: center; + background-color:#ffe57d; + } + + input{ + padding: 10px; + padding-bottom: 5px; + width:50%; + margin: auto; + } + + #searchButton{ + margin:auto; + width:50%; + } + + #searchBox { + width: 30rem; + height: 1rem; + } + + #cartDiv{ + grid-template-areas: cart; + text-align: center; + background-color: #00c4cc; + color: white; + + + } + + #detailsDiv{ + grid-area: details; + background-color:#ffe57d; + color: white; + } + .productList{ + text-align: center; + } From dbfcccb7e17047650c896f1e9b07ec27e8c8b65a Mon Sep 17 00:00:00 2001 From: alaynapuck28 Date: Mon, 8 Jul 2019 10:26:38 -0500 Subject: [PATCH 3/7] quantity partially working --- public/index.html | 9 +++++++++ public/index.js | 46 +++++++++++++++++++++++++++++++++++++++------- public/style.css | 14 ++++++++++++-- 3 files changed, 60 insertions(+), 9 deletions(-) diff --git a/public/index.html b/public/index.html index 6904c249..ffd6db8a 100644 --- a/public/index.html +++ b/public/index.html @@ -14,6 +14,14 @@
    +
    @@ -31,6 +39,7 @@

    Details

    Shopping Cart

    +
    diff --git a/public/index.js b/public/index.js index 5c073136..52c35e63 100644 --- a/public/index.js +++ b/public/index.js @@ -1,8 +1,10 @@ let detailsButton = (document.createElement("button").value = "More Details!"); +let itemQuantity=1; function Products(products) { document.getElementById("products").innerHTML = products.map( (product, index) => { + let amount= sessionStorage.getItem(product.id); if(amount){ addToCart(product.id); @@ -18,7 +20,7 @@ function Products(products) {

    - @@ -46,7 +48,7 @@ function Search() { let filter = input.value; let foundProd = []; products.map((item, index) => { - let nameArray = item.name.split(" "); + let nameArray = item.name.toLowerCase().split(" "); nameArray.filter(name => { if (name == filter) { foundProd.push(item); @@ -68,12 +70,19 @@ function moreDetails(prodId) { let foundProd = products.find(p => p.id === prodId); document.getElementById("productDetail").innerHTML = - `
    ${foundProd.name}
    -
    Ratings: ${foundProd.rating}/5
    `; + `
    +

    ${foundProd.name}

    +

    Ratings: ${foundProd.rating}/5

    + image of ${foundProd.name} +

    Product ID: ${foundProd.id}

    +

    ${foundProd.description}

    +
    +
    `; } + /******************* Call both AddToCart and Store Functions *********************/ function addToCartAndStore(id){ //if item in storage already dont add again @@ -98,10 +107,35 @@ function addToCart(id) { let productId = products.find(function(product) { return product.id == id; }); - let cartItems = cartItemsL.innerHTML+ `
  • ${productId.name}: ${productId.price}
    • `; + let cartItems = cartItemsL.innerHTML+ `
  • ${productId.name}: ${productId.price} (${itemQuantity})
    • `; document.getElementById("cartitems").innerHTML = cartItems; +} + + +//quantity function in progress +const getValue = index => { + const selectIndex = document.getElementById(`select-${index}`) + itemQuantity= Number(selectIndex.value) + console.log(selectIndex.value); + return itemQuantity; +} + +//category +//function called when category is changed via dropdown menu on homepage + +function filterCategory(cat){ + //if all is selected, displays all products + if (cat.toLowerCase() === 'all'){ + Products(products); + } + //filters products depending on category selected + else{ + let filteredProducts = products.filter(prod => + prod.category === cat.toLowerCase()); + Products(filteredProducts); + } } //*************** search function not working**********/ @@ -121,5 +155,3 @@ function addToCart(id) { // } - - diff --git a/public/style.css b/public/style.css index 1fcda6b5..85c5d1e7 100644 --- a/public/style.css +++ b/public/style.css @@ -15,10 +15,20 @@ text-align: center; font-size: 1.5rem; } + #moreDetailsCard{ + background-color: white; + color:grey; + margin: 12px; + padding-top:5px; + } + #listOfThings{ grid-area: products; background-color: white; text-align: center; + height: 50vw; /* or any value */ + overflow-y: auto; + color:grey; } @@ -32,13 +42,12 @@ input{ padding: 10px; padding-bottom: 5px; - width:50%; margin: auto; } #searchButton{ margin:auto; - width:50%; + width:31rem; } #searchBox { @@ -59,6 +68,7 @@ grid-area: details; background-color:#ffe57d; color: white; + text-align: center; } .productList{ text-align: center; From ee67728dc6c3fa49b7a79f3b78d5e19ab4d2e206 Mon Sep 17 00:00:00 2001 From: alaynapuck28 Date: Mon, 8 Jul 2019 10:41:56 -0500 Subject: [PATCH 4/7] style changes --- public/index.js | 128 ++++++++++++++++++++++------------------------- public/style.css | 4 ++ 2 files changed, 63 insertions(+), 69 deletions(-) diff --git a/public/index.js b/public/index.js index 52c35e63..eaf8e31c 100644 --- a/public/index.js +++ b/public/index.js @@ -1,25 +1,24 @@ let detailsButton = (document.createElement("button").value = "More Details!"); -let itemQuantity=1; +let itemQuantity = 1; function Products(products) { - document.getElementById("products").innerHTML = products.map( - (product, index) => { - - let amount= sessionStorage.getItem(product.id); - if(amount){ - addToCart(product.id); - } - - return `
    + document.getElementById("products").innerHTML = products + .map((product, index) => { + let amount = sessionStorage.getItem(product.id); + if (amount) { + addToCart(product.id); + } + + return `

    ${product.name}

    image of ${product.name} -

    Product ID: ${product.id}

    ${product.description}

    - -

    -

    + +
    + +
    `; - - } - ).join(' '); - } + }) + .join(" "); +} window.onload = Products(products); -function Search() { +//*************Search Function ********/ +function Search() { + //takes in user input let input = document.getElementById("searchBox"); let filter = input.value; - let foundProd = []; + let foundProdArr = []; products.map((item, index) => { + //splits up each word in item name and put into an array let nameArray = item.name.toLowerCase().split(" "); nameArray.filter(name => { + //if the name matches user input then push into array if (name == filter) { - foundProd.push(item); + foundProdArr.push(item); } }); }); - return Products(foundProd); + //origianl function run displays new array of found products + return Products(foundProdArr); } -// function search() { -// let searchWord = document.getElementById("searchBox").value; -// let filteredProducts = products.filter(p => p.name === searchWord) - -// Products(filteredProducts); -// } - - +//**********Show more Details of Specific Product********/ function moreDetails(prodId) { - let foundProd = products.find(p => p.id === prodId); - - document.getElementById("productDetail").innerHTML = - `
    -

    ${foundProd.name}

    -

    Ratings: ${foundProd.rating}/5

    - image of ${foundProd.name} -

    Product ID: ${foundProd.id}

    -

    ${foundProd.description}

    + let foundProduct = products.find(p => p.id === prodId); + + document.getElementById( + "productDetail" + ).innerHTML = `
    +

    ${foundProduct.name}

    +

    Ratings: ${foundProduct.rating}/5

    + image of ${foundProduct.name} +

    Product ID: ${foundProduct.id}

    +

    ${foundProduct.description}

    `; } - - - -/******************* Call both AddToCart and Store Functions *********************/ -function addToCartAndStore(id){ +/************Call both AddToCart and Store Functions ****************/ +function addToCartAndStore(id) { //if item in storage already dont add again - if(sessionStorage.getItem(id)) return; + if (sessionStorage.getItem(id)) return; addToCart(id); Storage(id); - } - //***************Session Storage*************/ -function Storage(id){ - sessionStorage.setItem(id, 1) -} - - +function Storage(id) { + sessionStorage.setItem(id, 1); +} //*********************Add to Cart *************/ function addToCart(id) { - - let cartItemsL= document.getElementById('cartitems'); + let cartItemsL = document.getElementById("cartitems"); let productId = products.find(function(product) { return product.id == id; }); - let cartItems = cartItemsL.innerHTML+ `
  • ${productId.name}: ${productId.price} (${itemQuantity})
    • `; + let cartItems = + cartItemsL.innerHTML + + `
  • ${productId.name}: ${productId.price} (${itemQuantity})
    • `; document.getElementById("cartitems").innerHTML = cartItems; } - - //quantity function in progress const getValue = index => { - const selectIndex = document.getElementById(`select-${index}`) - itemQuantity= Number(selectIndex.value) + const selectIndex = document.getElementById(`select-${index}`); + itemQuantity = Number(selectIndex.value); console.log(selectIndex.value); return itemQuantity; -} +}; //category //function called when category is changed via dropdown menu on homepage -function filterCategory(cat){ +function filterCategory(cat) { //if all is selected, displays all products - if (cat.toLowerCase() === 'all'){ - Products(products); + if (cat.toLowerCase() === "all") { + Products(products); } //filters products depending on category selected - else{ - let filteredProducts = products.filter(prod => - prod.category === cat.toLowerCase()); - Products(filteredProducts); + else { + let filteredProducts = products.filter( + prod => prod.category === cat.toLowerCase() + ); + Products(filteredProducts); } } @@ -153,5 +145,3 @@ function filterCategory(cat){ // // moreDetailsButton[i].style.display="none"; // } // } - - diff --git a/public/style.css b/public/style.css index 85c5d1e7..373d3bee 100644 --- a/public/style.css +++ b/public/style.css @@ -15,6 +15,7 @@ text-align: center; font-size: 1.5rem; } + #moreDetailsCard{ background-color: white; color:grey; @@ -29,6 +30,7 @@ height: 50vw; /* or any value */ overflow-y: auto; color:grey; + border: 1px grey solid; } @@ -60,6 +62,7 @@ text-align: center; background-color: #00c4cc; color: white; + border: 1px grey solid; } @@ -69,6 +72,7 @@ background-color:#ffe57d; color: white; text-align: center; + border: 1px grey solid; } .productList{ text-align: center; From 4be535de21542111034e8c35f292854562ba44e9 Mon Sep 17 00:00:00 2001 From: alaynapuck28 Date: Mon, 8 Jul 2019 18:21:34 -0500 Subject: [PATCH 5/7] edit html --- public/index.html | 92 +++++++++++++++++++++++------------------------ 1 file changed, 44 insertions(+), 48 deletions(-) diff --git a/public/index.html b/public/index.html index ffd6db8a..f2dcb25e 100644 --- a/public/index.html +++ b/public/index.html @@ -1,55 +1,51 @@ - + - + My Store - - - - - - - -
    - - - - -
    + + + + + + +
    + + + +
    -
    -

    List Of Products

    -
    - -
    -
    - -
    -

    Details

    -
    -
    +
    +

    List Of Products

    +
    +
    -
    -

    Shopping Cart

    - -
      +
      +

      Details

      +
      +
      -
    -
    - - - - - - - - - \ No newline at end of file +
    +

    Shopping Cart

    + +
      +
      + + + + + From 7b55dd391407ace82e31e83c9ce9469c431ba2f8 Mon Sep 17 00:00:00 2001 From: alaynapuck28 Date: Sun, 14 Jul 2019 10:11:21 -0500 Subject: [PATCH 6/7] fetch updates --- public/index.html | 81 +++++++++++++++++----------- public/index.js | 47 ++++++++++++++-- public/style.css | 133 ++++++++++++++++++++++------------------------ 3 files changed, 159 insertions(+), 102 deletions(-) diff --git a/public/index.html b/public/index.html index f2dcb25e..946f56de 100644 --- a/public/index.html +++ b/public/index.html @@ -5,47 +5,66 @@ My Store - - + + -
      - - - +
      + Email
      + Password
      +
      +
      + -
      -

      List Of Products

      -
      -
      +
      + + + +
      -
      -

      Details

      -
      -
      +
      +

      List Of Products

      +
      +
      + +
      +

      Details

      +
      +
      -
      -

      Shopping Cart

      +
      +

      Shopping Cart

      -
        +
          +
          - + diff --git a/public/index.js b/public/index.js index eaf8e31c..5f46754b 100644 --- a/public/index.js +++ b/public/index.js @@ -1,5 +1,49 @@ let detailsButton = (document.createElement("button").value = "More Details!"); let itemQuantity = 1; +let products = []; +let txtEmail = document.getElementById("email"); +let txtPassword = document.getElementById("password"); +let btnSignUp = document.getElementById("btnSignUp"); +btnSignUp.onclick = signUp; + +class User { + constructor(email, password, cartId) { + this.email = email; + this.password = password; + this.cartId = cartId; + } +} + +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()); +} + +window.onload = function() { + fetch("https://acastore.herokuapp.com/products") + .then(response => response.json()) + + .then(myJson => (products = myJson)) + + .then(products => { + Products(products); + + let storage = localStorage.getItem("user"); + let signUpDiv = document.getElementById("signup"); + if (storage) { + signUpDiv.style.display = "none"; + } + }); +}; function Products(products) { document.getElementById("products").innerHTML = products @@ -40,9 +84,6 @@ function Products(products) { .join(" "); } -window.onload = Products(products); - - //*************Search Function ********/ function Search() { //takes in user input diff --git a/public/style.css b/public/style.css index 373d3bee..0272e007 100644 --- a/public/style.css +++ b/public/style.css @@ -1,79 +1,76 @@ * { - font-family: Roboto; - } - - body { - display: grid; - grid-template-rows: auto; - grid-template-columns: 33% 33% 33%; - grid-template-areas: + font-family: Roboto; +} + +.entirepage { + display: grid; + grid-template-rows: auto; + grid-template-columns: 33% 33% 33%; + grid-template-areas: "search search search" "details products cart"; - } - - h3 { - text-align: center; - font-size: 1.5rem; - } - - #moreDetailsCard{ - background-color: white; - color:grey; - margin: 12px; - padding-top:5px; - } +} + +h3 { + text-align: center; + font-size: 1.5rem; +} - #listOfThings{ - grid-area: products; - background-color: white; - text-align: center; - height: 50vw; /* or any value */ - overflow-y: auto; - color:grey; - border: 1px grey solid; - } +#moreDetailsCard { + background-color: white; + color: grey; + margin: 12px; + padding-top: 5px; +} +#listOfThings { + grid-area: products; + background-color: white; + text-align: center; + height: 50vw; /* or any value */ + overflow-y: auto; + color: grey; + border: 1px grey solid; +} #searchArea { - display:grid; - grid-area: search; - text-align: center; - background-color:#ffe57d; - } + display: grid; + grid-area: search; + text-align: center; + background-color: #ffe57d; +} + +input { + padding: 10px; + padding-bottom: 5px; + margin: auto; +} - input{ - padding: 10px; - padding-bottom: 5px; - margin: auto; - } +#searchButton { + margin: auto; + width: 31rem; +} - #searchButton{ - margin:auto; - width:31rem; - } +#searchBox { + width: 30rem; + height: 1rem; +} - #searchBox { - width: 30rem; - height: 1rem; - } +#cartDiv { + grid-template-areas: cart; + text-align: center; + background-color: #00c4cc; + color: white; + border: 1px grey solid; +} - #cartDiv{ - grid-template-areas: cart; - text-align: center; - background-color: #00c4cc; - color: white; - border: 1px grey solid; - - - } - - #detailsDiv{ - grid-area: details; - background-color:#ffe57d; - color: white; - text-align: center; - border: 1px grey solid; - } - .productList{ - text-align: center; - } +#detailsDiv { + grid-area: details; + background-color: #ffe57d; + color: white; + text-align: center; + border: 1px grey solid; +} +.productList { + text-align: center; +} From c9e771c11df8474e98a2ebd6115f7661cd1c1210 Mon Sep 17 00:00:00 2001 From: alaynapuck28 Date: Sun, 28 Jul 2019 14:17:19 -0500 Subject: [PATCH 7/7] added comments --- public/index.html | 1 + public/index.js | 100 +++++++++++++++++++++++++++++++++++----------- public/style.css | 2 +- 3 files changed, 78 insertions(+), 25 deletions(-) diff --git a/public/index.html b/public/index.html index 946f56de..58cac210 100644 --- a/public/index.html +++ b/public/index.html @@ -59,6 +59,7 @@

          Details

          Shopping Cart

          +
            diff --git a/public/index.js b/public/index.js index 5f46754b..90d60daa 100644 --- a/public/index.js +++ b/public/index.js @@ -1,5 +1,5 @@ let detailsButton = (document.createElement("button").value = "More Details!"); -let itemQuantity = 1; +let itemQuantity = {}; let products = []; let txtEmail = document.getElementById("email"); let txtPassword = document.getElementById("password"); @@ -14,20 +14,8 @@ class 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()); -} - +//onload fetch products and then run Products function +//if there is anything in localStorage then don't display login div window.onload = function() { fetch("https://acastore.herokuapp.com/products") .then(response => response.json()) @@ -45,13 +33,51 @@ window.onload = function() { }); }; +//assigns input value from email and password to new user saved on heroku server +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.then(data => { + // console.log(data); + // }); + console.log("response: ", response.json()); + }); +} + +function createCart(userID) { + let newCart = { + userID: userID, + products: [] + }; + + fetch("https://acastore.herokuapp.com/users", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(newCart) + }).then(response => response.json()); +} + +//put products in html +//map through products function Products(products) { document.getElementById("products").innerHTML = products .map((product, index) => { let amount = sessionStorage.getItem(product.id); if (amount) { - addToCart(product.id); + addToCart(product.id, amount); } + itemQuantity[product.id] = 0; return `
            @@ -92,6 +118,7 @@ function Search() { let foundProdArr = []; products.map((item, index) => { //splits up each word in item name and put into an array + let nameArray = item.name.toLowerCase().split(" "); nameArray.filter(name => { //if the name matches user input then push into array @@ -123,38 +150,53 @@ function moreDetails(prodId) { /************Call both AddToCart and Store Functions ****************/ function addToCartAndStore(id) { //if item in storage already dont add again - if (sessionStorage.getItem(id)) return; - addToCart(id); + let amount = sessionStorage.getItem(id); + if (amount) { + changeQuantity(id); + } else { + addToCart(id); + } Storage(id); } //***************Session Storage*************/ function Storage(id) { - sessionStorage.setItem(id, 1); + sessionStorage.setItem(id, itemQuantity[id]); } //*********************Add to Cart *************/ -function addToCart(id) { +function addToCart(id, quantity = itemQuantity[id]) { let cartItemsL = document.getElementById("cartitems"); let productId = products.find(function(product) { return product.id == id; }); let cartItems = cartItemsL.innerHTML + - `
          • ${productId.name}: ${productId.price} (${itemQuantity})
            • `; + `
          • ${productId.name}: ${ + productId.price + } (${quantity}) +
            • `; document.getElementById("cartitems").innerHTML = cartItems; } +function changeQuantity(productId, quantity) { + let quantityElement = document.querySelector( + `#cart-item-${productId} .quantity` + ); + console.log(quantityElement); + quantityElement.innerHTML = itemQuantity[productId]; +} //quantity function in progress const getValue = index => { + console.log(index); const selectIndex = document.getElementById(`select-${index}`); - itemQuantity = Number(selectIndex.value); + itemQuantity[index + 1] = Number(selectIndex.value); console.log(selectIndex.value); - return itemQuantity; + return itemQuantity[index + 1]; }; -//category +//Fitler products by category //function called when category is changed via dropdown menu on homepage function filterCategory(cat) { @@ -170,6 +212,16 @@ function filterCategory(cat) { Products(filteredProducts); } } +/**View Cart *******/ + +function viewCart() { + var cartItems = document.getElementById("cartitems"); + if (cartItems.style.display === "none") { + cartItems.style.display = "block"; + } else { + cartItems.style.display = "none"; + } +} //*************** search function not working**********/ diff --git a/public/style.css b/public/style.css index 0272e007..18876048 100644 --- a/public/style.css +++ b/public/style.css @@ -16,7 +16,7 @@ h3 { font-size: 1.5rem; } -#moreDetailsCard { +#moreDetailsCard #inside-cart { background-color: white; color: grey; margin: 12px;