Segue a resolução do projeto Mochila de viagem, acredito que esse projeto em si tem um grande potencial pois mesmo que simples, ajuda aqueles que sempre esquecem algo em sua viagem, eu mesmo aos poucos irei fazer alguns up-grades , mas no presente momento segue a resolução do projeto feito em aula!
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.preventDefault()
const nome = evento.target.elements['nome']
const quantidade = evento.target.elements['quantidade']
const existe = itens.find(elemento => elemento.nome === nome.value)
const itemAtual = {
"nome": nome.value,
"quantidade": quantidade.value
}
if (existe){
itemAtual.id = existe.id
atualizaElemento(itemAtual)
itens[itens.findIndex(elemento => elemento.id === existe.id)] = itemAtual
}else{
itemAtual.id = itens[itens.length-1] ?(itens[itens.length -1]).id +1: 0;
criaElemento(itemAtual)
itens.push(itemAtual)
}
localStorage.setItem("itens", JSON.stringify(itens))
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
numeroItem.dataset.id = item.id
novoItem.appendChild(numeroItem)
novoItem.innerHTML += item.nome
novoItem.appendChild(botaoDeleta(item.id))
lista.appendChild(novoItem)
}
function atualizaElemento(item)
{
document.querySelector("[data-id='"+item.id+"']").innerHTML = item.quantidade
}
function botaoDeleta(id){
const elementoBotao = document.createElement("button")
elementoBotao.innerHTML = "Remover item"
elementoBotao.addEventListener("click", function(){
deletaElemento(this.parentNode, id)
})
return elementoBotao
}
function deletaElemento(tag, id){
tag.remove()
itens.splice(itens.findIndex(elemento => elemento.id ===id), 1)
localStorage.setItem("itens",JSON.stringify(itens))
}