practice-time-shopping-list.../scripts/app.js

67 lines
2.0 KiB
JavaScript
Raw Permalink Normal View History

document.addEventListener('DOMContentLoaded', function () {
const list = []
const form = document.querySelector('.shopping-form');
const itemInput = document.querySelector('.shopping-form-item-input')
const quantifyInput = 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);
function incrementQuantity() {
const currentValue = Number(quantifyInput.value);
const newValue = currentValue + 1;
quantifyInput.value = newValue;
}
function decrementQuantity() {
const currentValue = Number(quantifyInput.value);
const newValue = currentValue - 1;
if (newValue > 0) {
quantifyInput.value = newValue;
}
}
function addItemToList(event) {
event.preventDefault();
const itemName = event.target["item-name"].value;
const itemQuantify = event.target["item-quantity"].value
if (itemName !== "") {
const item = {
name: itemName,
quantity: itemQuantify
}
list.push(item);
renderListItems();
resetInputs();
}
}
function renderListItems() {
let itemsStructure = "";
list.forEach(function (item) {
itemsStructure += `
<li class="shopping-item">
<span>${item.name}</span>
<span>${item.quantity}</span>
</li>
`
});
items.innerHTML = itemsStructure;
}
function resetInputs() {
itemInput.value = "";
quantifyInput.value = 1;
}
})