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

document.addEventListener('DOMContentLoaded',function(){
    const list = [];

    const form = document.querySelector('.shopping-form');
    const itemImput = document.querySelector('.shopping-form-item-input')
    const quatityinput = document.querySelector('.shopping-for-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(quatityinput.value);
        const newValue = currentValue + 1;

        quatityinput.value = newValue

    }
    function decrementQuantity(){
        const currentValue = Number(quatityinput.value);
        const newValue = currentValue - 1;
        if(newValue > 0){
            quatityinput.value = newValue
        }
        
    }
    function addItemToList(event) {
        event.preventDefault();

        const itemName = event.target['item-name'].value;
        const itemQuantity = event.target['item-quatity'].value;

        if(itemName != ''){
            const item = {
                name: itemName,
                quantity: itemQuantity,
            }
            list.push(item);

            renderListItens();
            resetInputs();
        }
        
    }

    function renderListItens(){
        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(){
        itemImput.value = '';
        quatityinput.value = 1;

    }
})