1
resposta

Meu código

Salvei o último ID no storage como uma solução alternativa para sempre ter um ID único.

let _lastID = 0;
const _form = document.getElementById("formNewItem");
const _ulBagItens = document.getElementById('bagItens');

let _addedItemsInBag = [];

loadBag();

_form.addEventListener("submit", (evento) => {
    evento.preventDefault();

    const inputName = evento.target.elements.name;
    const inputQty = evento.target.elements.quantity;

    // para capturar os valores dos campos do formulário
   const newItem = getItemFromBag(inputName.value, Number(inputQty.value));

   saveNewItem(newItem);

   if (newItem.isNew) {
        addItemInBag(newItem);
   } else {
        updateItemBag(newItem);
   }
   clearForm(inputName, inputQty);

});

function getItemFromBag(name, qty) {
    let foundItem = _addedItemsInBag.find((item) => { return item.name === name; });

    if (foundItem) {
        foundItem.qty += qty;
        foundItem.isNew = false;
    } else {
        foundItem = getNewItem(name, qty);
    }
    return foundItem;
}

function getNewItem(name, qty){
   return {
        id: 0,
        name: name,
        qty: qty,
        isNew: true,
   };
}

function saveNewItem(newItem) {

    if (!newItem.id) {
        newItem.id = ++_lastID;
        _addedItemsInBag.push(newItem);
    }
    // save itens in local storage
    localStorage.setItem('items', JSON.stringify(_addedItemsInBag));
    localStorage.setItem('ID', _lastID);
}

function loadFromStorage(){
    const storagedItems = localStorage.getItem('items');

    // o uso do operador || evita o if para verificar se o objeto está null, pois, caso estiver, um novo array vazio é atribuído
    _addedItemsInBag = JSON.parse(storagedItems) || [];
    _lastID = Number(localStorage.getItem('ID'));

    //console.log(_lastID);
}

function loadBag(){
    loadFromStorage();

    _addedItemsInBag.forEach((item) => { 
            addItemInBag(item); 
        });
}

function clearForm(inputName, inputQty) {
    inputName.value = '';
    inputQty.value = '';    
}

function addItemInBag(item){
    // cria um novo elemento de lista
    const liTag = document.createElement('li');
    // adiciona a classe chamada item ao novo item para aplicar o css
    liTag.classList.add("item");

    // cria uma nova tag <strong>
    const strongTag = document.createElement('strong');
    // adiciona a quantidade ao conteúdo interno da tag strong
    strongTag.innerHTML = item.qty;

    // adiciona o elemento <strong> dentro do novo item da lista <li>
    liTag.appendChild(strongTag);
    // adiciona ao conteúdo interno do HTML o texto 'nome'

    liTag.innerHTML += item.name;

    liTag.dataset['id'] = item.id;

    const btnDel = document.createElement('button');
    btnDel.innerHTML = 'x';
    btnDel.addEventListener('click', (evt) => {
        // remover da lista _addedItemsInBag e atualizar o localStorage
        deleteFromStorage(liTag);
        // remove o elemento do HTML
        btnDel.parentNode.remove();
    });

    liTag.appendChild(btnDel);  

    // adiciona o novo <li> a lista <ul>
    _ulBagItens.appendChild(liTag);

}

function deleteFromStorage(liTag) {
    const itemIdx = _addedItemsInBag.findIndex(p => p.id == liTag.dataset['id']);
    _addedItemsInBag.splice(itemIdx, 1);
    localStorage.setItem('items', JSON.stringify(_addedItemsInBag));
}

function updateItemBag(newItem){
    const li = document.querySelector(`li[data-id="${newItem.id}"]`);  
    const strong = li.getElementsByTagName('strong')[0];
    strong.innerHTML = newItem.qty;
}
1 resposta

Oi Leonardo, tudo bem?

Muito obrigada por compartilhar com a gente a sua solução. Ficou muito boa!

Parabéns por praticar, e espero que você esteja gostando o curso. :D

Continue os bons estudos.

Um abraço.