14n Solution

[AlexErratic]

Hey Simon,

Could you provide the solution to adding the optional 'keydown' challenge? I have managed to get something working but the code is perhaps a little too meandering.

Please see the link for my solution: https://hastebin.com/share/gadinihuta.javascript

Is there a way to do this without referencing js-order-summary? I'd played around with trying to make it work like 'click' event listeners, with no luck.

Thanks :)

[El-Ziko]

check this out that took little bit of time to figure out that the even "Enter" is should be for the input not the save this shall work !! document.querySelectorAll(".quantity-input").forEach((save) => { save.addEventListener("keydown", (event) => { if (event.key === "Enter") { console.log("ca marche"); const productId = save.dataset.productId; const quantityInput = document.querySelector( .quantity-input-${productId} ); const newQuantity = Number(quantityInput.value); if (newQuantity > 0 && newQuantity < 1000) { document .querySelector(.cart-item-container-${productId}) .classList.remove("is-editing-quantity"); updateQuantity(productId, newQuantity); } else if (newQuantity >= 1000) { alert("Please enter a quantity less than 1000 units."); } else if (newQuantity < 0) { alert("Please enter a positive quantity; negative values are not allowed."); } } }); });

[imran2k]

Or:

document.querySelectorAll('.quantity-input').forEach((keyEnt) => { keyEnt.addEventListener('keydown', (event) => { if (event.key === 'Enter') { const productId = keyEnt.dataset.productId;

  const container = document.querySelector(
    `.js-cart-item-container-${productId}`
  );

  container.classList.remove('is-editing-quantity');

  const quantityInput = document.querySelector(`.js-quantity-input-${productId}`);

  const newQuantity = Number(quantityInput.value);

  if (newQuantity < 0 || newQuantity >= 100) {
    alert('Quantity must be at least 0 and less than 100');
  } else {

  updateQuantity(productId, newQuantity);

  calculateCheckoutQuantity();

  var labelQuantity = document.querySelector(`.js-quantity-label-${productId}`);

  labelQuantity.innerHTML = newQuantity;
  }

}

}) })

[progressive-newbie263]

i add this code inside (and yeah, i did waste like 7 hours searching google left and right to make it finally functionable. Worth every seconds):

if you are struggling with 14n enter task, copy and try the code below //14n . Hope it helps !

document.querySelectorAll('.js-save-link') .forEach((link) => { link.addEventListener('click', () => { const productId = link.dataset.productId;

  const container = document.querySelector(`.js-cart-item-container-${productId}`);
  container.classList.remove('is-editing-quantity');

  const quantityInput = document.querySelector(
    `.js-quantity-input-${productId}`
  );
  const newQuantity = Number(quantityInput.value);

  if(newQuantity < 0 || newQuantity >= 1000){
    alert('Quantity must be at least 0 and less than 1000')
    return;
  }

  updateQuantity(productId, newQuantity);
  const quantityLabel = document.querySelector(`.js-quantity-label-${productId}`);
  quantityLabel.innerHTML = newQuantity;

  updateCartQuantity();
});
//14n
const quantityInput = link.closest('.cart-item-container').querySelector('.js-quantity-input-' + link.dataset.productId); 
quantityInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    link.click();
  }
});  

});

[premdood]

@progressive-newbie263 const quantityInput = link.closest('.cart-item-container').querySelector('.js-quantity-input-' + link.dataset.productId); why did we use .closest( ) when every input element has a unique class ?

const quantity = link.querySelector('.js-quantity-input-' + link.dataset.productId); Isn't this more readable and short than the above ? If not then, correct me

[progressive-newbie263]

@progressive-newbie263 const quantityInput = link.closest('.cart-item-container').querySelector('.js-quantity-input-' + link.dataset.productId); why did we use .closest( ) when every input element has a unique class ?

const quantity = link.querySelector('.js-quantity-input-' + link.dataset.productId); Isn't this more readable and short than the above ? If not then, correct me

i used closest('.cart-item-container') since we are aiming to choose and make all 'update' link interactive. It is like a trick replacement for querySelectorAll, since closest guaranteed it will link to its parent container. If i didn't use closest item container the data will become undefined/null. But we have the different code structure while doing the homeworks so i am not sure if the code i used were the same as yours tbh.