Responsive product page using css flexbox

In your addToCart function, do a check to know if the product is already in the cart before adding a new one to it. So if it already in the cart, just increase the item quantity.

const addToCart = () => { if (targetNum <= 0) { emp.style.display = 'block'; buy.style.display = 'none'; return }else{ emp.style.display = 'none'; buy.style.display = 'block'; const id = new Date().getTime().toString(); const element = document.createElement('div'); element.classList.add('itemI'); const attr = document.createAttribute('data-id'); attr.value = id; element.setAttributeNode(attr); cont.appendChild(element); if(product.id == id ){ element.innerHTML = <img src = ${product.src} class="tre"> <div class="cart-text"> <p>Fall Limited Edition Sneakers</p> <p>${price.textContent} * ${targetNum} $${125*targetNum}</p> </div> <div class = "del"> <img src = './images/icon-delete.svg' > </div> }else{ product.qty +=1 } }

I think this should help.

Congratulation for finishing this challenge the approach you can do to achieve it using Javascript is to use innerHTML & insertAdjacentHTML

Use innerHTML to replace/update current Item price&quantity

Use insertAjacentHTML to add (different item ID) to the cart

1 item = 1 cart item (data-totalitem=1)

2 item = 2 cart item (data-totalitem=2)

1 item/2 quantity = 1 cart item (data-totalitem=1)