1
resposta

[Projeto] Resolução do exercicio

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))
}
1 resposta

Oi Luan, tudo bem?

Muito obrigada por compartilhar a resolução do projeto conosco! É sempre bom ver projetos que ajudam a resolver problemas simples do dia a dia.

Parabéns por estar sempre buscando melhorias e por praticar enquanto faz o curso. Espero que esse projeto seja útil para muitas pessoas.

Um abraço e bons estudos.