document.addEventListener('DOMContentLoaded', function(){ const list = []; const form = document.querySelector('.shopping-form'); const itemInput = document.querySelector('shopping-form-item-input'); const quantityInput = document.querySelector('.shopping-form-quantity-input'); const incrementButton = document.querySelector('.shopping-form-increment-button'); const decrementButton = document.querySelector('.shopping-form-decrement-button'); const items = document.querySelector('.shopping-items'); incrementButton.addEventListener("click", incrementQuantity); decrementButton.addEventListener("click", decrementQuantity); form.addEventListener('submit', addItemToList) // BOTOES DE + e - function incrementQuantity() { const currentValue = Number(quantityInput.value); const newValue = currentValue + 1; quantityInput.value = newValue; } function decrementQuantity() { const currentValue = Number(quantityInput.value); const newValue = currentValue - 1; if(newValue > 0){ quantityInput.value = newValue; } } // SUBMIT FUNCTION function addItemToList(event) { event.preventDefault(); const itemName = event.target["item-name"].value; const itemQuantity = event.target["item-quantity"].value; if(itemName !== ""){ const item = { name: itemName, quantity: itemQuantity, }; list.push(item); renderListItems(); resetInputs(); } } // RENDER LIST function renderListItems() { let itemsStructure = ""; list.forEach(function(item){ itemsStructure += `
  • ${item.name} ${item.quantity}
  • `; }); items.innerHTML = itemsStructure; } // Resetar inputs function resetInputs() { console.log(itemInput) //itemInput.value = ""; //quantityInput.value = 1; } });