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

62 lines
2.0 KiB
JavaScript

document.addEventListener('DOMContentLoaded', function(){
const list = [];
const form = document.querySelector(".shopping-form");
const itemInput = document.querySelector(".shopping-form-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);
function decrementQuantity(){
const currentValue = Number(quantityInput.value);
const newValue = currentValue - 1;
if(newValue > 0){
quantityInput.value = newValue;
}
}
function incrementQuantity() {
const currentValue = Number(quantityInput.value);
const newValue = currentValue + 1;
quantityInput.value = newValue;
}
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();
}
}
function renderListItems(){
let itemStructure = "";
list.forEach(function (item){
itemStructure += `
<li class="shopping-item">
<span>${item.name}</span>
<span>${item.quantity}</span>
</li>`
});
items.innerHTML = itemStructure;
};
function resetInputs(){
itemInput.value = "";
quantityInput.value = 1;
}
})