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

    const quantityInput = document.querySelector('.shopping-form-quantity-input');
    const increment = document.querySelector('.shopping-form-increment-button');
    const decrement = document.querySelector('.shopping-form-decrement-button');
    const form = document.querySelector('.shopping-form');
    const itemInput = document.querySelector('.shopping-form-item-input');
    const items = document.querySelector('.shopping-items')

    increment.addEventListener('click', addIcrement);
    decrement.addEventListener('click', addDecrement);
    form.addEventListener('submit', addTextValue);

    function addIcrement() {
        const valueQuantityInput = Number(quantityInput.value);
        const newValue = valueQuantityInput + 1;

        quantityInput.value = newValue;
    }
        function addDecrement() {
            const valueQuantityInput = Number(quantityInput.value);
            const newValue = valueQuantityInput - 1;
            if(newValue > 0) {
                quantityInput.value = newValue;
            }
            
        }
        const ul = document.querySelector('ul')
        const li = createElement('li');
        

    function addTextValue(event) {
        event.preventDefault();

        const itemName = event.target['item-name'].value
        const itemQuantity = event.target['item-quatity'].value
        
        if(itemName != "") {
            const item = {
                nome: itemName,
                quantity: itemQuantity
            };
    
            list.push(item);
            renderListItems()
            resetInput()
        }
    }

    function renderListItems() {
        let itemStructure = "";

        list.forEach(function (item) {
            itemStructure += `
                <li class="shopping-item">
                    <span>${item.nome}</span>
                    <span>${item.quantity}</span>
                </li>
            `;
        })
        items.innerHTML = itemStructure
    }


    function resetInput() {
        itemInput.value = "";
        quantityInput.value = 1;
    }


    

})