Product list with cart

What are you most proud of, and what would you do differently next time?

Hi here is my solution for Product-list-with-cart. I used HTML, CSS, JS.

What challenges did you encounter, and how did you overcome them?

It was challenging to do the JS, First I used await to fetch the JSON.

I set a addEventListener on the button Add to Cart to create a new button item.insertAdjacentHTML("afterend", divElement); which allows to decrement or increment the quantity .

I used a new object

arrayOrder[index] = {
    name: `${data[index].name}`,
    numberOfPlate: 1,
    totalPricePerPlate: (data[index].price * numberOfPlate).toFixed(2)
};

to keep memory of the number of plate and the total per item.

So after I can use this data to dynamically change the value on the website.

numberOfItem[i].children[1].children[0].innerText = `${arrayOrder[index].numberOfPlate}x`;
numberOfItem[i].children[1].children[2].innerText = `$${arrayOrder[index].totalPricePerPlate}`;

And I keep the same method to add or remove diiferent element on the website.

What specific areas of your project would you like help with?

I had a problem with :

const createConfirm = `
   ...
   Start New Order 
   ...

document.querySelector('.container').insertAdjacentHTML('afterend', createConfirm);` 

I used a new node and this onclick="newOrder(divMenu)" to init when you click on it. My problem was I can't init the value to 0.

Here my first function :

const newOrder = (element, array, total) => {

    initMenu(element);
    array = [];
    total = 0;

    document.querySelector('.order-confirmed').style.display = '';
    document.querySelector('.background').style.visibility = '';
    document.getElementById('number-item').innerText = 0;

    if(document.querySelector('.container-section .button-add-item'))
    {
        document.querySelector('.container-section .button-add-item').previousElementSibling.style.display = 'block';
        document.querySelector('.container-section .button-add-item').remove();
    }
};

and the button was onclick="newOrder(divMenu, arrayOrder, totalValue)"

And the value wasn't init to 0 and the array keep its value out of the function. What was I missing??

So I used location.reload(); to init all the page and the values.

Therefore, I don't understand the problem with this onclick function and how I can reset the values and keep them to 0 out of the function.

If you have any idea, feel free to leave any comments. Thanks.