1
resposta

Resolução com comentários - 03-Interagindo com dados da Web

Segue minha resolução com comentários do projeto proposto.

// 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")) || [];

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
    }

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

    // Chamanado a função do LocalStorage
    inserirNoLocalStorage(itemAtual);
    
    // 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;

    // 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 inserirNoLocalStorage(itemAtual){

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

    //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

Opa Kaye, tudo bem?

Que legal! Gostei muito da sua iniciativa em compartilhar a sua resolução com comentários, dessa maneira está ajudando outros alunos a passar por mais uma fase juntos, parabéns! Ficou bem organizado e de fácil manutenção o seu código.

Caso precise de ajuda, fico à disposição.

Tenha um bom dia e bons estudos.