How can I make my left and right buttons move my cards in my card slider?

JavaScript
1

This is my JS (I have my images in a separate JS file)

let shop = document.getElementById("shop");

let basket = JSON.parse(localStorage.getItem("data")) || [];

let generateShop = () => {
    return (shop.innerHTML= shopItemsData
        .map((x) => {
            let {id, name, price, desc, img} = x;
            let search = basket.find((x) => x.id === id ) || [];
        return `
        <li id="product-id ${id}" class="item">
        <img src="${img}" alt="" class="card-img">
        <div class="details">
            <h3>${name}</h3>
            <p>${desc}</p>
            <div class="price-quantity">
                <h2>${price}</h2>
                <button class="btn">
                    <span onclick="increment(${id})" class="material-symbols-outlined">add</span>
                    <div id=${id} class="quantity">
                    ${search.item === undefined ? 0 : search.item}
                    </div>
                    <span onclick="decrement(${id})" class="material-symbols-outlined">remove</span>
                </button>
            </div>
        </div>
        </li>
    `
    }).join(""))
}

generateShop();

let increment = (id) => {
    let selectedItem = id;
    let search = basket.find((x) =>x.id === selectedItem.id);

    if(search === undefined) {
        basket.push({
            id: selectedItem.id,
            item: 1,
        });
    } else {
        search.item += 1;
    }

    update(selectedItem.id);

    localStorage.setItem("data", JSON.stringify(basket));
};

let decrement = (id) => {
    let selectedItem = id;
    let search = basket.find((x) =>x.id === selectedItem.id);

    if (search === undefined) return;
    else if (search.item === 0) return;
    else {
        search.item -= 1;
    }

    update(selectedItem.id);
    basket = basket.filter((x) => x.item !== 0);
    
    localStorage.setItem("data", JSON.stringify(basket));
};

let update = (id) => {
    let search = basket.find((x) => x.id === id);
    document.getElementById(id).innerHTML = search.item;
    calculation();
};

let calculation = () => {
    let cartIcon = document.getElementById("cartAmount");
    cartIcon.innerHTML = basket.map((x) => x.item).reduce ((x, y) => x + y, 0);
};

calculation();

I don’t know if I should put my left and right buttons inside my HTML or JS ? I tried both and they didn’t work, I hope someone can help me out. (I’m trying to do it without using frameworks)

2

Here, it should be “product-id-${id}” instead of “product-id ${id}” for the ID to be valid. Otherwise the selector will not work correctly.

4

Without the HTML and the shape of the data, we don’t really have all the information we need.

let increment = (id) => {
    let selectedItem = id;
    let search = basket.find((x) =>x.id === selectedItem.id);

Why would selectedItem be an object? The id you are passing to the increment function is the same as the one you are using inside the map for the find.

let {id, name, price, desc, img} = x;
let search = basket.find((x) => x.id === id ) || [];
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.