Realizei a divisão dos processos em funções menores para organizar melhor o código da aula. Se tiver algum ponto que seja passível de melhoria, ficaria muito grato de ser informado!
const lista = document.getElementById("lista");
const itemList = [];
function createElement(element) {
const formulario = document.getElementById("novoItem");
formulario.addEventListener("submit", (evento) => {
evento.preventDefault();
const nome = evento.target.elements["quantidade"];
const quantidade = evento.target.elements["nome"];
lista.appendChild(buildItem(nome.value, quantidade.value));
saveOnLocalStorage(nome.value, quantidade.value);
nome.value = "";
quantidade.value = "";
});
}
function buildItem(quantidade, nome) {
const item = document.createElement("li");
item.classList.add("item");
item.innerHTML = `<strong>${quantidade}</strong>${nome}`;
return item;
}
function saveOnLocalStorage(nome, quantidade) {
const actualItem = {
nome: nome,
quantidade: quantidade,
};
itemList.push(actualItem);
localStorage.setItem("item", JSON.stringify(itemList));
}
createElement();