1
resposta

[Projeto] Praticando - Consolidando o conhecimento

Segue minha resolução com comentários.

// Buscando o form e a lista no DOM
const form = document.getElementById("novoItem");
const lista = document.getElementById("lista");

// Buscando a lista de itens do localStorage
// Se não encontrada, assume o valor de Array vazio []
const itens = JSON.parse(localStorage.getItem("itens")) || [];

// Atualizando a lista de itens pelo localStorage
itens.forEach((elemento) => {
    criaElemento(elemento)
})


// Listener do botão Adicionar
form.addEventListener("submit", (evento) => {
    // Previnindo o refresh da página
    evento.preventDefault();

    // Recebendo os valores de nome e quantidade dos elementos de input
    const nome = evento.target.elements['nome'];
    const quantidade = evento.target.elements['quantidade'];

    
    // Criando um objeto com os dados
    const itemAtual = {
        "nome": nome.value,
        "quantidade": quantidade.value
    }
    
    // Validando se o item já consta na lista 
    const existe = itens.find( elemento => elemento.nome === nome.value)
    if(existe){
        itemAtual.id = existe.id;

        atualizaElemento(itemAtual);

        itens[existe.id] = itemAtual;
    }else{
        itemAtual.id = itens.length

        // chamando a função de criar elemento na lista
        criaElemento(itemAtual);

        // Inserindo o objeto no Array itens
        itens.push(itemAtual);
        
    }

    // Chamanado a função do LocalStorage
    inserirNoLocalStorage();
    
    // Chama a função para limpar formulário
    limpaForm(nome, quantidade);
})

function criaElemento(item) {
    // Criando elemento "li" e add a classe "item"
    const novoItem = document.createElement('li');
    novoItem.classList.add("item");

    // Criando elemento "strong" e incluíndo a quantidade
    const numeroItem = document.createElement('strong');
    numeroItem.innerHTML = item.quantidade;
    numeroItem.dataset.id = item.id;

    // Inserindo o elemento "strong" no elemento "li" com o nome
    novoItem.appendChild(numeroItem);
    novoItem.innerHTML += item.nome;

    // Inserindo o elemento "li" no elemento "lista"
    lista.appendChild(novoItem);    
}

function atualizaElemento(item){
    document.querySelector("[data-id='"+item.id+"']").innerHTML = item.quantidade;
}

function inserirNoLocalStorage(){

    //Setando o Array de itens no localStorage
    localStorage.setItem("itens", JSON.stringify(itens));
}


function limpaForm(nome, quantidade) {
    // Setando o valor dos elementos em ""
    nome.value = "";
    quantidade.value = "";
}
1 resposta

Olá, Kaye!

Obrigado por compartilhar sua solução conosco. Realizei os testes e obtive um resultado excelente. Gostaria de dar os parabéns por comentar o código, pois isso auxilia outros programadores a compreendê-lo, além de ajudar você mesmo a aprimorar sua compreensão sobre a função específica daquele código.

Continue se desafiando, comentado e principalmente estudando muito, e em caso de dúvidas conte sempre com o fórum da comunidade Alura.

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!