Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Código comentado

Passei uma dificuldade pra entender uma parte desse curso e vi que não fui só eu, então vou colocar o código comentado com o que entendi

const form = document.getElementById("novoItem") 
const lista = document.getElementById("lista")
const itens = JSON.parse(localStorage.getItem('itens')) || []  

itens.forEach(e => {  //Arrow function, para cada objeto em 'itens', ele executa a função criaElemento
    criaElemento(e)
})


form.addEventListener('submit', (event) => {
    event.preventDefault()

    let nome = event.target.elements['nome']  //Recebe o elemento com id = 'nome' 
    let quantidade = event.target.elements['quantidade']  //Recebe o elemento com id = 'quantidade'

    const objetoExistente = itens.find(e => e.nome === nome.value)  //Arrow function que procura um objeto num array, o valor atribuído à variável vai ser o objeto encontrado, caso contrário, retorna undefined

    let itemAtual = {  //Cria um objeto 'itemAtual' com dois atributos
        'nome': nome.value,  //Cria o atributo 'nome' e atribui o valor passado dentro do elemento 'nome' ao objeto
        'quantidade': quantidade.value  //Cria o atributo 'quantidade' e atribui o valor passado dentro do elemento 'quantidade' ao objeto
    }


    if(objetoExistente){  //Caso o objeto seja encontrado
        itemAtual.id = objetoExistente.id  //Cria o atributo 'id' no 'itemAtual', que recebe o valor do id do 'objetoExistente'. O id do 'objetoExistente' é definido no 'else'
        atualizaElemento(itemAtual)  //Função que atualiza a quantidade

        itens[objetoExistente.id] = itemAtual  //'itens' é um array, e cada item pode ser acessado pelo índice, 'objetoExistente.id' foi o índice passado. No final, a tradução dessa linha é: itemAntigo = itemNovo
    }
    else{    //Caso o objeto não exista
        itemAtual.id = itens.length  //O 'itemAtual' recebe o id que é o tamanho atual do array 'itens', a cada novo item o array aumenta com o valor do id consequentemente

        criaElemento(itemAtual)  //Função que cria as tags <li> e <strong>, com seus valores.

        itens.push(itemAtual)  //Adiciona o item criado no array 'itens'
    }

    localStorage.setItem("itens", JSON.stringify(itens))  //Transforma o array numa string e coloca no localStorage

    //nome.value = ''
    //quantidade.value = ''

})

function criaElemento(item){  //Função que recebe um objeto 'item'

    let novoItem = document.createElement('li')  //Cria o <li>
    novoItem.classList.add('item')    //Adiciona a classe 'item' ao <li>

    let numeroItem = document.createElement('strong')  //Cria o <strong>
    numeroItem.innerHTML = item.quantidade  //Adiciona a quantidade do item dentro das tags <strong>
    numeroItem.dataset.id = item.id  //Cria um dataset no <strong>, que fica <strong data-id='algumNumero'>algumaQuantidade</strong>
    novoItem.appendChild(numeroItem)  //Adiciona a tag <strong> dentro da tag <li>

    novoItem.innerHTML += item.nome  //Coloca o atributo 'nome' do 'item' dentro da tag <li>

    lista.appendChild(novoItem)  //Adiciona o <li> criado na lista

}

function atualizaElemento(item){
    document.querySelector("[data-id='"+item.id+"']").innerHTML = item.quantidade  //Adiciona o valor 'quantidade' dentro das tags <li>
}
1 resposta
solução!

Oi Matheus, tudo bem?

Muito obrigada por compartilhar com a gente o seu código e parabéns pela atitude, com certeza vai ajudar outras pessoas estudantes com a mesma dificuldade.

Um abraço e bons estudos.