Javascript

[guro]

Guys, can you understand why I don't like the flex direction? I'm adding the image, the price and the name of the product in the cart via js, I just can't get the name of the product and the price to go one below the other

Can you please solve this problem?

https://codepen.io/GURO-11/pen/VwVVxow

 

[VBService]

You no need name every single div.card as card1, card2, etc. on event "click" just use that code

<!--  onclick="addToCart(event)"  -->
<button onclick="addToCart(event)" class="add">Add</button>

and in javascript like this

function addToCart(e) {
  const current_card = e.target.closest('.card');

  // ... rest of code
}

proposal to improve the javascript code (and html little bit as well )
[ full on-line ]

function addToCart(e) {
  const current_card = e.target.closest('.card');
  const name = current_card.querySelector('.name').innerHTML,
        price = current_card.querySelector('.price').innerHTML;
 
  const name_price = document.createElement('DIV');
  name_price.classList.add('flex-name-price');
  name_price.insertAdjacentHTML('beforeend', `${price} ${name}`);
 
  const selectedItem = document.createElement('DIV'),
        img = document.createElement('IMG');
  selectedItem.classList.add('cart-img');
  img.setAttribute('src', current_card.querySelector('img').src);   
  selectedItem.append(img, name_price);
 
  const cartItems = document.querySelector('#cart');                           
  cartItems.append(selectedItem); 
}