const form = document.getElementById("novoItem")
const lista = document.getElementById("lista")
/* Tranformamos novamente o localStorage em um ARRAY usando o JSON.PARSE, assim podemos usar o forEach */
const arrayObjeto = JSON.parse(localStorage.getItem("arrayObjeto")) || []
/* Para cada elemento do ARRAY, criamos um item para a lista */
arrayObjeto.forEach((element) => {
criaItem(element)
});
// Adicionamos um escutador de evento tipo SUBMIT, para pegar os dados, e usamos uma function para fazer algo com isso
form.addEventListener("submit", (event) =>{
/* Ao carregar a pagina, não perdemos os dados inseridos. */
event.preventDefault ()
/* Obtendo o valor da entrada com o nome "nome" e "quantidade" */
const nome = event.target.elements["nome"]
const quantidade = event.target.elements["quantidade"]
/* Verificamos se o nome digitado no arrayObjeto é existente */
const verifica = arrayObjeto.find(element => element.nome === nome.value)
/* Criamos um OBJETO com a chave e conteudo, a chave fica entre aspas "" e atribuimos ao valor digitado. */
const objetoItem = {
"nome" : nome.value,
"quantidade" : quantidade.value
}
// VERIFICAÇÃO
if (verifica) {
/* Atribuindo o valor da propriedade id do objeto verificado à propriedade id do objeto ItemItem. */
objetoItem.id = verifica.id
console.log(verifica.id)
/* Chamando a função atualizaItem() e passando o objeto objetoItem como parâmetro. */
atualizaItem(objetoItem)
/* Atualizando o arrayObjeto com o novo objeto objetoItem. */
arrayObjeto[arrayObjeto.findIndex(element => element.id === verifica.id)] = objetoItem
}
else {
/*Verificando se o arrayObjeto possui algum item. Se isso acontecer, ele adicionará 1 ao último item na matriz. Caso contrário, ele definirá o id como 0.*/
objetoItem.id = arrayObjeto[arrayObjeto.length -1] ? (arrayObjeto[arrayObjeto.length -1]).id + 1 : 0
/* Chamamos a function criaItens e passamos nosso objeto como parametro, mais pra frente vamos criar ela */
criaItem (objetoItem)
/* Adicionando o OBJETO no array. */
arrayObjeto.push(objetoItem)
}
/* Colocamos nosso array dentro do localStorage, e usamos o JSON.stringy para converter o array para string */
localStorage.setItem("arrayObjeto", JSON.stringify(arrayObjeto))
/* Assim ao digitar um item e qtd, o input fica limpo e sem txt. */
nome.value = ""
quantidade.value = ""
})
function criaItem (item) {
/* Criando um novo elemento "li" e mapeando na const itemLi e adicionamos uma classe "item"*/
const itemLi = document.createElement("li")
itemLi.classList.add("item")
/* Criando um novo elemento "strong" para a quantidade */
const itemQuantidade = document.createElement("strong")
/* Usando o innerHTML vai receber a quantidade e salvar na variavel */
itemQuantidade.innerHTML = item.quantidade
/* Fazemos que o item quantidade receba um ID */
itemQuantidade.dataset.id = item.id
/* Adicionamos a quantidade ao item LI */
itemLi.appendChild(itemQuantidade)
/* Usando o innerHTML vai receber o nome e salvar na variavel */
itemLi.innerHTML += item.nome
/* Depois de criar o botão, colocamos ele fomo filho da LI, adicionamos ITEM.ID como parametro */
itemLi.appendChild(criaBotaoDeleta(item.id))
/* Adicionamos os itens criado na lista UL */
lista.appendChild(itemLi)
}
function atualizaItem (item) {
/* fiquei um pouco confuso aqui, mas ok... */
document.querySelector("[data-id='"+item.id+"']").innerHTML = item.quantidade
}
/* Função que cria o botão , colocar o ID como parametro, será repassado até a function botaoDeleta () */
function criaBotaoDeleta (id) {
const botaoDeleta = document.createElement ("button")
botaoDeleta.innerText = "X"
/* Adicionamos um escutador de evento tipo click, sempre quando o botao for clicado, ira realizar a função que vai deletar o item clicado */
botaoDeleta.addEventListener("click", function (){
/*this.parentNode pega o elemento que o botão pertence, passamos o ID pra frente até chegar na funcão deleta */
deletaItem(this.parentNode, id)
})
return botaoDeleta
}
/* Function que será responsavel por apagar os itens da lista, colocar ITEM, ID como parametro */
function deletaItem (item,id) {
item.remove() // apenas remove o item do HTML mas não do ARRAY e localStorage
/* Removendo o objeto do array que tem o id que corresponde ao id passado. */
arrayObjeto.splice(arrayObjeto.findIndex(element => element.id === id),1)
localStorage.setItem("arrayObjeto", JSON.stringify(arrayObjeto))
}
