1

when I add products to the shopping cart at some point it stops updating the table, it is refreshed when I click the previous product and the product I want to add.

Live site: https://frontend-mentor-git-main-kkajets-projects.vercel.app/fm-product-list-with-cart/index.html Repository: https://github.com/KKajet/frontend-mentor/tree/main/fm-product-list-with-cart

I would like it to update the number of products when you add as well as delete them.

const product = [
  {
    "image": {
      "thumbnail": "./assets/images/image-waffle-thumbnail.jpg",
      "mobile": "./assets/images/image-waffle-mobile.jpg",
      "tablet": "./assets/images/image-waffle-tablet.jpg",
      "desktop": "./assets/images/image-waffle-desktop.jpg"
    },
    "name": "Waffle with Berries",
    "category": "Waffle",
    "price": 6.5
  },
  {
    "image": {
      "thumbnail": "./assets/images/image-creme-brulee-thumbnail.jpg",
      "mobile": "./assets/images/image-creme-brulee-mobile.jpg",
      "tablet": "./assets/images/image-creme-brulee-tablet.jpg",
      "desktop": "./assets/images/image-creme-brulee-desktop.jpg"
    },
    "name": "Vanilla Bean Crème Brûlée",
    "category": "Crème Brûlée",
    "price": 7.0
  },
  {
    "image": {
      "thumbnail": "./assets/images/image-macaron-thumbnail.jpg",
      "mobile": "./assets/images/image-macaron-mobile.jpg",
      "tablet": "./assets/images/image-macaron-tablet.jpg",
      "desktop": "./assets/images/image-macaron-desktop.jpg"
    },
    "name": "Macaron Mix of Five",
    "category": "Macaron",
    "price": 8.0
  },
  {
    "image": {
      "thumbnail": "./assets/images/image-tiramisu-thumbnail.jpg",
      "mobile": "./assets/images/image-tiramisu-mobile.jpg",
      "tablet": "./assets/images/image-tiramisu-tablet.jpg",
      "desktop": "./assets/images/image-tiramisu-desktop.jpg"
    },
    "name": "Classic Tiramisu",
    "category": "Tiramisu",
    "price": 5.5
  },
  {
    "image": {
      "thumbnail": "./assets/images/image-baklava-thumbnail.jpg",
      "mobile": "./assets/images/image-baklava-mobile.jpg",
      "tablet": "./assets/images/image-baklava-tablet.jpg",
      "desktop": "./assets/images/image-baklava-desktop.jpg"
    },
    "name": "Pistachio Baklava",
    "category": "Baklava",
    "price": 4.0
  },
  {
    "image": {
      "thumbnail": "./assets/images/image-meringue-thumbnail.jpg",
      "mobile": "./assets/images/image-meringue-mobile.jpg",
      "tablet": "./assets/images/image-meringue-tablet.jpg",
      "desktop": "./assets/images/image-meringue-desktop.jpg"
    },
    "name": "Lemon Meringue Pie",
    "category": "Pie",
    "price": 5.0
  },
  {
    "image": {
      "thumbnail": "./assets/images/image-cake-thumbnail.jpg",
      "mobile": "./assets/images/image-cake-mobile.jpg",
      "tablet": "./assets/images/image-cake-tablet.jpg",
      "desktop": "./assets/images/image-cake-desktop.jpg"
    },
    "name": "Red Velvet Cake",
    "category": "Cake",
    "price": 4.5
  },
  {
    "image": {
      "thumbnail": "./assets/images/image-brownie-thumbnail.jpg",
      "mobile": "./assets/images/image-brownie-mobile.jpg",
      "tablet": "./assets/images/image-brownie-tablet.jpg",
      "desktop": "./assets/images/image-brownie-desktop.jpg"
    },
    "name": "Salted Caramel Brownie",
    "category": "Brownie",
    "price": 4.5
  },
  {
    "image": {
      "thumbnail": "./assets/images/image-panna-cotta-thumbnail.jpg",
      "mobile": "./assets/images/image-panna-cotta-mobile.jpg",
      "tablet": "./assets/images/image-panna-cotta-tablet.jpg",
      "desktop": "./assets/images/image-panna-cotta-desktop.jpg"
    },
    "name": "Vanilla Panna Cotta",
    "category": "Panna Cotta",
    "price": 6.5
  }
];

for (let i = 0; i < 9; i++) {
      
      const dessert = document.querySelector(".product-list");
      const prod = document.createElement("div");
      const img = document.createElement("img");
      const imgBtn = document.createElement("div");
      const itemInfo = document.createElement("div");
      const category = document.createElement("p");
      const name = document.createElement("p");
      const price = document.createElement("p");
      const btn = document.createElement("button");
      prod.classList.add("product");
      imgBtn.classList.add("imgBtn-container");
      dessert.append(prod);
      prod.append(imgBtn);
      imgBtn.append(img);
      imgBtn.append(btn);
      btn.classList.add(`cart-button${i}`, "text-preset-4-bold");
      btn.innerHTML = '<img src="./assets/images/icon-add-to-cart.svg" style="position: relative; top: 3px; " /> <span class="add-to-card">Add to Cart</span>';
      prod.append(itemInfo);
      img.src = product[i].image.desktop;
      img.classList.add("product-image");
      itemInfo.append(category);
      category.classList.add("text-preset-4", "category");
      category.innerText = product[i].category;
      itemInfo.append(name);
      name.classList.add("text-preset-3", "name");
      name.innerText = product[i].name;
      itemInfo.append(price);
      price.classList.add("text-preset-3", "price");
      price.innerText = `$${product[i].price.toFixed(2)}`;

      let quantity = [1, 1, 1, 1, 1, 1, 1, 1, 1];
      let buttonClick = document.querySelector(`.cart-button${i}`);
      buttonClick.addEventListener("click", function () {
        btn.classList.add("btn-clicked");
        btn.innerHTML = `<div class="flex-button decrement"><img src="./assets/images/icon-decrement-quantity.svg" style="position: relative; ";" /></div> <span class="add-to-card unit">${quantity[i]}</span> <div class="flex-button increment"><img src="./assets/images/icon-increment-quantity.svg" style="position:
          relative;  ";" /></div>`;
        let decreaseBtn = document.querySelector(".decrement");
        let increaseBtn = document.querySelector(".increment");
        let unitSpan = document.querySelector(`unit`);
        if (quantity[i] > 0) {
          decreaseBtn.addEventListener("click", function () {
            quantity[i]--;
            console.log(quantity);
            unitSpan.innerText = quantity[i];
          });
          increaseBtn.addEventListener("click", function () {
            quantity[i]++;
            console.log(quantity);
            unitSpan.innerText = quantity[i];
          });
        } else {
          quantity[i]++;
          console.log(quantity);
          btn.classList.remove("btn-clicked");
          btn.innerHTML = '<img src="./assets/images/icon-add-to-cart.svg" style="position: relative; top: 3px; " /> <span class="add-to-card">Add to Cart</span>';
        }
      });
}
@font-face {
  font-family: RedHatItalic;
  src: url(../assets/fonts/RedHatText-Italic-VariableFont_wght.ttf);
}
@font-face {
  font-family: RedHat;
  src: url(../assets/fonts/RedHatText-VariableFont_wght.ttf);
}
@font-face {
  font-family: RedHatBold;
  src: url(../assets/fonts/static/RedHatText-Bold.ttf);
}
@font-face {
  font-family: RedHatRegular;
  src: url(../assets/fonts/static/RedHatText-Regular.ttf);
}
@font-face {
  font-family: RedHatSemiBold;
  src: url(../assets/fonts/static/RedHatText-SemiBold.ttf);
}
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(252, 248, 246);
  margin-block: 88px;
  margin-inline: 40px;
}

h1 {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

h2 {
  color: rgb(199, 59, 15);
}

.text-preset-1 {
  font-family: RedHatBold;
  font-size: 56px;
  line-height: 120%;
  letter-spacing: 0px;
}

.text-preset-2 {
  font-family: RedHatBold;
  font-size: 24px;
  line-height: 125%;
  letter-spacing: 0px;
}

.text-preset-3 {
  font-family: RedHatSemiBold;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0px;
}

.text-preset-4 {
  font-family: RedHatRegular;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0px;
}

.text-preset-4-bold {
  font-family: RedHatBold;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0px;
}

.text-preset-5 {
  font-family: RedHatSemiBold;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0px;
}

#main-page {
  max-width: 1306px;
  margin-left: auto;
  margin-right: auto;
}

.page {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: 100%;
}

.product-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  color: rgb(38, 15, 8);
  float: left;
  margin-right: 32px;
  max-width: 800px;
}

.product {
  margin-top: 32px;
  margin-bottom: 24px;
}

.product:nth-of-type(2),
.product:nth-of-type(5),
.product:nth-of-type(8) {
  margin-inline: 24px;
}

.product-image {
  height: 240px;
  border-radius: 8px;
}

.category {
  color: rgb(135, 99, 90);
  margin-top: 16px;
}

.name {
  color: rgb(38, 15, 8);
}

.price {
  color: rgb(199, 59, 15);
}

.imgBtn-container button {
  width: 160px;
  height: 44px;
  border: 1px rgb(173, 138, 133) solid;
  border-radius: 160px;
  position: relative;
  bottom: 25px;
  left: 50px;
}

.btn-clicked {
  background-color: rgb(199, 59, 15);
  position: relative;
  bottom: 25px;
  left: 50px;
  border-radius: 160px;
  color: rgb(255, 255, 255);
}

.imgBtn-container button:hover {
  cursor: pointer;
}

.imgBtn-container .btn-clicked:hover {
  cursor: default;
}

.add-to-card {
  position: relative;
  bottom: 2px;
  left: 2px;
}

.imgBtn-container {
  width: 250px;
  height: 262px;
}

.flex-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: rgb(255, 255, 255) 1px solid;
  border-radius: 50px;
  width: 20px;
  height: 20px;
}

.decrement {
  position: relative;
  top: 10px;
  left: 15px;
}

.decrement:hover {
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

.increment {
  position: relative;
  bottom: 33px;
  left: 120px;
}

.increment:hover {
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

.unit {
  position: relative;
  bottom: 11px;
}

#cart {
  background-color: rgb(255, 255, 255);
  width: 384px;
  padding: 24px;
  float: right;
  border-radius: 12px;
  position: relative;
  bottom: 50px;
}

.your-cart {
  margin-bottom: 24px;
}

.info-add {
  color: rgb(135, 99, 90);
}

.empty-img {
  margin-bottom: 16px;
}

.empty-cart {
  text-align: center;
  padding-inline: 16px;
}

#footer {
  clear: both;
  position: relative;
  top: 30px;
}

@media only screen and (max-width: 1435px) {
  #cart {
    float: left;
    text-align: center;
    width: 762px;
    margin-top: 32px;
  }
  #main-page {
    max-width: 830px;
  }
  .product:nth-of-type(2),
  .product:nth-of-type(5),
  .product:nth-of-type(8) {
    margin-inline: 24px;
  }
}
@media only screen and (max-width: 940px) {
  #cart {
    width: 500px;
  }
  .product:nth-of-type(1),
  .product:nth-of-type(3),
  .product:nth-of-type(5),
  .product:nth-of-type(7),
  .product:nth-of-type(9) {
    margin-right: 24px;
    margin-left: 0;
  }
  .product:nth-of-type(8),
  .product:nth-of-type(2) {
    margin-left: 0;
    margin-right: 0;
  }
  #main-page {
    max-width: 556px;
  }
}
@media only screen and (max-width: 656px) {
  .product:nth-of-type(1) {
    margin: 0;
  }
  #main-page {
    max-width: 274px;
  }
  #cart {
    width: 200px;
  }
  .product-list {
    margin: 0;
  }
  body {
    background-color: rgb(252, 248, 246);
    margin-inline: 24px;
  }
}/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png" />
    <link rel="stylesheet" href="css/style.css" />

    <title>Frontend Mentor | Product list with cart</title>
  </head>
  <body>
    <main id="main-page">
      <h1 class="text-preset-1">Desserts</h1>
      <div class="product-list"></div>

      <div id="cart">
        <h2 class="text-preset-2 your-cart">Your Cart <span>(..)</span></h2>
        <div class="empty-cart">
          <img src="assets/images/illustration-empty-cart.svg" alt="empty card" class="empty-img" />
          <p class="info-add text-preset-4-bold">Your added items will appear here</p>
        </div>
      </div>
    </main>

    <!-- <footer id="footer">
      <div class="attribution">Challenge by <a href="https://www.frontendmentor.io?ref=challenge">Frontend Mentor</a>. Coded by <a href="#">Kajetan Ślęga</a>.</div>
    </footer> -->

    <script src="script/app.js"></script>
  </body>
</html>

Improve this question
3
  • 1
    Please edit your question to include a sample of the data fetched.
    – mykaf
    Commented Jul 19, 2024 at 18:44
  • 1
    @mykaf I added fetch
    – Kajetan Ślęga
    Commented Jul 19, 2024 at 18:58
  • 1
    First you have a typo here unitSpan = document.querySelector(unit) should be '.unit'. The problem is that you have decreaseBtn = document.querySelector(".decrement") but when you click add multiple products you have more than one .decrement class.
    – Mehdi
    Commented Jul 19, 2024 at 19:36
Related questions
12185
How can I remove a specific item from an array in JavaScript?
7611
How do JavaScript closures work?
5783
Loop (for each) over an array in JavaScript
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.