Meus itens não estão sendo armazenados no localStorage e nem estão sendo salvos na pagina, segue abaixo como está a estrutura do código:
Codigo HTML:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main class="conteudo">
<div class="principal">
<div class="mochila"></div>
<form action="" class="adicionar" id="novoItem">
<label for="item">Nome</label>
<input type="text" name="nome" id="nome" />
<label for="item">Quantidade</label>
<input type="number" name="quantidade" id="quantidade" />
<input type="submit" value="Adicionar" class="cadastrar" />
</form>
</div>
<ul class="lista" id="lista">
<li class="item"><strong>7</strong>Blusinha</li>
<li class="item"><strong>1</strong>Calça</li>
<li class="item"><strong>3</strong>Meia</li>
<li class="item"><strong>2</strong>Tênis</li>
<li class="item"><strong>1</strong>Celular</li>
</ul>
</main>
<script src="./JS/main.js"></script>
</body>
Código main.js:
const form = document.getElementById("novoItem");
const lista = document.getElementById("lista");
const itens = JSON.parse(localStorage.getItem("itens")) || [];
itens.forEach((elemento) => {
criaElemento(elemento);
});
form.addEventListener("submit", (evento) => {
evento.preventDefalut();
const nome = evento.target.elements["nome"];
const quantidade = evento.target.elements["quantidade"];
const itemAtual = {
nome: nome.value,
quantidade: quantidade.value,
};
criaElemento(itemAtual);
itens.push(itemAtual);
localStorage.setItem("itens", JSON.stringify(itens));
z;
nome.value = "";
quantidade.value = "";
});
function criaElemento(item) {
const novoItem = document.createElement("li");
novoItem.classList.add("item");
const numeroItem = document.createElement("strong");
numeroItem.innerHTML = item.quantidade;
novoItem.appendChild(numeroItem);
novoItem.innerHTML += item.nome;
lista.appendChild(novoItem);
}
