1
resposta

[Projeto] 06-Consolidando o seu conhecimento

const formulario = document.getElementById("formulario")
const itens = JSON.parse(localStorage.getItem("itens"))  || []

itens.forEach((elemento)=>
{
    elementCreate(elemento)
})

formulario.addEventListener("submit", (event)=>{ 
    event.preventDefault()

    const elName = event.target.elements['elName']
    const elQtd = event.target.elements['elQtd']

    const isExist = itens.find(f=>f.elName === elName.value)

    const itemAtual = {
        "elName": elName.value,
        "elQtd": elQtd.value
    }


    if (isExist) {
        itemAtual.id = isExist.id
        elementUpdate(itemAtual)
        itens[itens.findIndex(elemento => elemento.id === itemAtual.id )] = itemAtual
    } else {
        itemAtual.id = itens[itens.length -1] ? itens[itens.length -1].id + 1 : 0
        elementCreate(itemAtual)   
        itens.push(itemAtual)     
    }    
    
    localStorage.setItem("itens", JSON.stringify(itens))    

    elName.value = ""
    elQtd.value = ""
})


function elementCreate(item) {
    const elNewItem = document.createElement('li')
    elNewItem.classList.add("item")    

    const qtdItem = document.createElement('strong')
    qtdItem.innerHTML = item.elQtd
    qtdItem.dataset.id = item.id


    elNewItem.appendChild(qtdItem)
    elNewItem.innerHTML += item.elName

    const list = document.getElementById("lista")    

    elNewItem.appendChild(deleteButton(item.id))     
    list.appendChild(elNewItem)     

}

function elementUpdate(item){    
    document.querySelector("[data-id='"+item.id+"']").innerHTML = item.elQtd
}

function deleteButton(id){
    const buttondeleteElement = document.createElement("button")
    buttondeleteElement.innerHTML = "remover"

    buttondeleteElement.addEventListener("click", function() {
        deleteElement(this.parentNode, id)
    })

    return buttondeleteElement
}

function deleteElement(tag, id){
    tag.remove()

    itens.splice(itens.findIndex(elemento => elemento.id === id), 1)

    localStorage.setItem("itens", JSON.stringify(itens))
}


1 resposta

Oi Eber, tudo bem?

Parabéns por praticar!

É ótimo ver que você está usando boas práticas de nomenclatura, como nomear as variáveis de forma descritiva. Isso torna o código mais legível e compreensível.

O código está bem estruturado e legível. Você seguiu uma abordagem funcional, dividindo as tarefas em funções menores e reutilizáveis.

Continue assim! É um ótimo trabalho.

Um abraço.