[Projeto] Praticando - 02-Armazenando dados na Web

Resolução de código divido em funções e com comentários sobre o módulo 02 de "Armazenando dados na Web".

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

// Criando Array de itens adicionados
const itens = [];


// 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'].value;
    const quantidade = evento.target.elements['quantidade'].value;

    // chamando a função de criar elemento na lista
    criaElemento(nome, quantidade);
    
    // Chama a função para limpar formulário
    limpaForm(evento);
})

function criaElemento(nome, quantidade) {
    // 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 = quantidade;

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

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

    // Chamanado a função do LocalStorage
    inserirNoLocalStorage(nome, quantidade);

    
}

function inserirNoLocalStorage(nome, quantidade){

    // Criando um objeto com os dados
    const itemAtual = {
        "nome": nome,
        "quantidade": quantidade
    }

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

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


function limpaForm(evento) {
    // Setando o valor dos elementos em ""
    evento.target.elements['nome'].value = "";
    evento.target.elements['quantidade'].value = "";
}