dimanche 28 novembre 2021

Conditional statement limiting the number of displayed elements

I'm having trouble implementing the logic that will limit me from adding the same items to my shopping list. When the item is the same, I just want to display the quantity with the existing item.

    <div class="pizzas">
    </div>
    <div class="shoppingCart">
        <p class="totalPrice">Hungry? order our pizzas</p>
    </div>

// js

fetch("https://raw.githubusercontent.com/alexsimkovich/patronage/main/api/data.json")
.then(data => data.json())
.then(data => {
let valueCurrency = 0;
data.forEach(element => {
    const shoppingCart = document.querySelector(".shoppingCart");
    const pizzas = document.querySelector(".pizzas");
    const box = document.createElement("div");
    const img = document.createElement("img");
    const title = document.createElement("h3");
    const ingredients = document.createElement("p");
    const price = document.createElement("h4");
    const btn = document.createElement("button");
    const totalPrice = document.querySelector(".totalPrice");
     
    box.className = "box";
    ingredients.className = "ingredients"
    btn.className = "btn";
    img.src = element.image;
    img.className = "img";
     
    title.innerHTML = element.title;
    ingredients.innerHTML = element.ingredients;
    price.innerHTML = element.price.toFixed(2) + " zł";
    btn.innerHTML = "Dodaj do koszyka";
     
    box.appendChild(img);
    box.appendChild(title);
    box.appendChild(ingredients);
    box.appendChild(price);
    box.appendChild(btn);
    pizzas.appendChild(box);


    btn.addEventListener("click", (e) => {
        valueCurrency = valueCurrency + element.price;

        const pizza = document.createElement("div");
        pizza.className = "pizzaList";
        const pizzasList = document.createElement("li");
        const pizzaPrice = document.createElement("p");
        const btnRemove = document.createElement("button");
        btnRemove.innerText = "X";
         
        pizzasList.innerText = title.textContent;
        pizzaPrice.innerText = price.textContent;

        pizza.appendChild(pizzasList);
        pizza.appendChild(pizzaPrice);
        pizza.appendChild(btnRemove);

        totalPrice.innerText = "Całkowita cena: " + valueCurrency.toFixed(2);

        if(pizzasList.innerText === pizzasList.innerText)
        {
            // don't add another item to the list
            // just add +1 to existing element
        }
        else
        {
            // add an item to the list
            shoppingCart.prepend(pizza);

        }

        btnRemove.addEventListener("click", (e) => {
            pizza.remove();
            valueCurrency = valueCurrency - element.price;
            totalPrice.innerText = "Całkowita cena: " + valueCurrency.toFixed(2);
        })
    })

});
 
})
.catch(err => console.log(err));

My problem is exactly in the conditional statement, I don't know exactly how to implement the counting of the same pizzas option.

Thank you in advance for your help.

Aucun commentaire:

Enregistrer un commentaire