[Projeto] Conclusão do curso

Terminei o curso e inclui umas funções diferentes das usadas pelo Pedro Marins.

A primeira delas foi a função padronizaNome, que tem o intuito de que os nomes dos itens inseridos tenham a mesma formatação. Isso impede que tenham dois itens diferentes, mas com o mesmo nome (camisa preta e CAMISA PRETA, por exemplo).

A segunda foi a função criaId, com o intuito também de padronizar os IDs dos itens. Nesse projeto específico, acredito que não seja necessária a inclusão de IDs, visto que os itens podem ser identificados pelos seus nomes e (talvez) isso não faça diferença. No entanto, em futuros projetos, isso faça mais sentido e foi bom praticar agora. Todos os IDs estariam formatados assim: camisa-preta, saco-de-dormir.

Aqui está a página do Github para quem quiser ver: https://github.com/alberto-palmeira/mochila-de-viagem E aqui a página do projeto funcionando: https://alberto-palmeira.github.io/mochila-de-viagem/

E aqui o código do arquivo main.js. Não vou por do HTML porque não mudei nada em relação ao curso.

// ---------- Funções ----------
function padronizaNome (nome) {
    return nome.value[0].toUpperCase() + nome.value.slice(1).toLowerCase();
};

function criaId (nome) {
    const novoId = nome.replace(/ /g,'-');
    return novoId.toLowerCase();
};

function criaElemento (itemAtual) {
    const novoItem = document.createElement('li');
    novoItem.classList.add('item');

    const quantidadeItem = document.createElement('strong');
    quantidadeItem.innerHTML = itemAtual.quantidade;
    quantidadeItem.dataset.id = itemAtual.id;
    novoItem.appendChild(quantidadeItem);

    novoItem.innerHTML += itemAtual.nome;
    listaItens.appendChild(novoItem);

    novoItem.appendChild(deletaItem(quantidadeItem));
};

function atualizaElemento (itemAtual) {
    let itemAtualizado = document.querySelector(`[data-id='${itemAtual.id}']`);
    console.log(itemAtualizado);
    itemAtualizado.innerHTML = itemAtual.quantidade;
};

function deletaItem () {
    const elementoBotao = document.createElement('button');
    elementoBotao.innerHTML = 'X';

    elementoBotao.addEventListener('click', (evento) => {
        const elementoPai = evento.target.parentNode;
        const elementoIrmao = evento.target.previousElementSibling.dataset.id;
        const indiceElementoIrmao = listaLocalStorage.findIndex(elemento => elemento.id === elementoIrmao);

        if (listaLocalStorage.length === 1){
            listaLocalStorage.length = 0;
        } else if (listaLocalStorage.length > 1) {
            listaLocalStorage.splice(indiceElementoIrmao, 1);
        }

        localStorage.setItem('itens', JSON.stringify(listaLocalStorage));

        elementoPai.classList.add('deletar');
        setTimeout(() => {
            elementoPai.remove();
        }, 500);
    });

    return elementoBotao;
}

// ---------- Lógica ----------
const form = document.querySelector('#novo__item');
const listaItens = document.querySelector('#lista');
const listaLocalStorage =  JSON.parse(localStorage.getItem('itens')) || [];

listaLocalStorage.forEach((elemento) => {
    criaElemento(elemento);
})

form.addEventListener('submit', (evento) => {
    evento.preventDefault();

    let nome = padronizaNome(evento.target.elements['nome']);
    let quantidade = evento.target.elements['quantidade'];

    const existe = listaLocalStorage.find((elemento) => {
        return elemento.nome === nome;
    });

    let itemAtual = {
        'nome': nome,
        'quantidade': quantidade.value
    };

    if (existe) {
        itemAtual.id = existe.id;

        atualizaElemento(itemAtual, existe);
        listaLocalStorage[existe.id] = itemAtual;
    } else {
        itemAtual.id = criaId(nome);

        criaElemento(itemAtual); 
        listaLocalStorage.push(itemAtual);
    };

    localStorage.setItem('itens', JSON.stringify(listaLocalStorage));

    nome.value = "";
    quantidade.value = "";
})

E essa parte do CSS foi somente para criar a animação de fade-out quando apagamos um item:

.deletar {
    opacity: 0;
    transition: 500ms;
}