diff --git a/main.js b/main.js index e69de29..adf25db 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,68 @@ +document.addEventListener("DOMContentLoaded", () => { + const list = []; + + const form = document.querySelector(".shopping-form"); + const inputItem = document.querySelector(".shopping-form-item-input"); + + const quantityInput = document.querySelector(".shopping-form-quantity-input"); + const incrementBtn = document.querySelector( + ".shopping-form-increment-button" + ); + const decrementBtn = document.querySelector( + ".shopping-form-decrement-button" + ); + + const items = document.querySelector(".shopping-items"); + + incrementBtn.addEventListener("click", increment); + decrementBtn.addEventListener("click", decrement); + form.addEventListener("submit", addItemToList); + + function increment() { + const currentValue = Number(quantityInput.value); + const newValue = currentValue + 1; + + quantityInput.value = newValue; + } + + function decrement() { + const currentValue = Number(quantityInput.value); + const newValue = currentValue - 1; + if (newValue > 0) { + quantityInput.value = newValue; + } + } + function addItemToList(e) { + e.preventDefault(); + const itemName = e.target["item-name"].value; /* name do input */ + const itemQuantity = e.target["item-quantity"].value; + + if (itemName !== "") { + const item = { + name: itemName, + quantity: itemQuantity, + }; + list.push(item); + renderListItems(); + resetInputs(); + } + } + function renderListItems() { + let itemsStructure = ""; + + list.forEach(function (item) { + itemsStructure += ` +