[Projeto] Resolução com comentários - Manipulando Dados - JavaScript na Web: armazenando dados no navegador

Resolução de código em JS do curso "Manipulando Dados - JavaScript na Web: armazenando dados no navegador". Coloquei comentários para identificar as ações efetuadas em cada etapa.

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

// Criando listener do submit do form
form.addEventListener("submit", (evento) => {
    // Previnindo o refresh da página
    evento.preventDefault();

    // chamando a função de criar elemento na lista
    criaElemento(evento.target.elements['nome'].value, evento.target.elements['quantidade'].value)
})

// Função para criar elemento na lista passando o nome e quantidade
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);
}