[Sugestão] Só Elogios

Este exercício é, de longe, um dos melhores que já fiz. Percebi que o projeto apresentava alguns bugs, começando pelo checkbox, que aparecia acima do texto. Passei um dia e meio resolvendo esse problema, buscando soluções nos fóruns, e consegui. Após tudo estar funcionando, percebi que estava passando apenas o ID do checkbox dentro de um loop. Então, implementei uma lógica para alterar o ID também. Fiz alguns ajustes no CSS e deixei o projeto funcional. No entanto, ainda não consegui resolver a questão da label, que não estava corretamente associada ao formulário. Não entendi muito bem essa parte. Enfim, achei muito bacana essa didática. Aprendi muito mais tentando resolver os problemas do que apenas me apegando ao material da aula. Ainda não sei se o código está totalmente correto, mas foi uma ótima experiência de aprendizado. Vou passar aqui o .js para algum instrutor comentar meu código, mas não copiem e colem tentem fazer que da certo.

const item = document.getElementById('input-item');
const botaoSalvarItem = document.getElementById('adicionar-item');
const listaDeCompras = document.getElementById('lista-de-compras');
let contador = 1;
let id = 1;

botaoSalvarItem.addEventListener('click', adicionarItem);

function adicionarItem(evento) {
    evento.preventDefault();
    
    if (!item.value.trim()) {
        alert('Por favor, insira um item.');
        return;
    }

    const itemDaLista = document.createElement('li');
    const containerItemLista = document.createElement('div');
    containerItemLista.classList.add('lista-item-container');

    const containerNomeDoItem = document.createElement('div');
    const containerCheckbox = document.createElement('div');
    containerCheckbox.classList.add('container-checkbox');

    const checkboxInput = document.createElement('input');
    checkboxInput.type = 'checkbox';
    checkboxInput.classList.add('input-checkbox');
    checkboxInput.id = 'checkbox-' + contador++; // Cada checkbox recebe um id único

    const checkBoxCustomizado = document.createElement('div');
    checkBoxCustomizado.classList.add('checkbox-customizado');
    
    const checkboxLabel = document.createElement('label');
    checkboxLabel.setAttribute('for', checkboxInput.id); // Relaciona o label ao checkbox
    checkboxLabel.appendChild(checkboxInput);
    checkboxLabel.appendChild(checkBoxCustomizado);

    containerCheckbox.appendChild(checkboxLabel);
    containerNomeDoItem.appendChild(containerCheckbox);

    const nomeDoItem = document.createElement('label'); // Mantém o texto original do item
    nomeDoItem.innerText = item.value;
    containerNomeDoItem.appendChild(nomeDoItem);

    const containerBotoes = document.createElement('div');
    
    // Botão remover
    const botaoRemover = document.createElement('button');
    botaoRemover.classList.add('item-lista-button');
    const imagemRemover = document.createElement('img');
    imagemRemover.src = 'img/delete.svg';
    imagemRemover.alt = 'Remover';

    botaoRemover.appendChild(imagemRemover);

    // Função de remover item
    botaoRemover.addEventListener('click', () => {
        itemDaLista.remove(); // Remove o item da lista quando o botão "Remover" é clicado
    });

    // Botão editar
    const botaoEditar = document.createElement('button');
    botaoEditar.classList.add('item-lista-button');
    const imagemEditar = document.createElement('img');
    imagemEditar.src = 'img/edit.svg';
    imagemEditar.alt = 'Editar';

    botaoEditar.appendChild(imagemEditar);

    // Função de editar item usando um alert (prompt)
    botaoEditar.addEventListener('click', () => {
        const novoValor = prompt('Edite o item:', nomeDoItem.innerText); // Abre o prompt com o valor atual
        if (novoValor !== null && novoValor.trim() !== '') {
            nomeDoItem.innerText = novoValor; // Atualiza o texto do item com o valor inserido no prompt
        }
    });

    // Adicionando os botões ao container
    containerBotoes.appendChild(botaoRemover);
    containerBotoes.appendChild(botaoEditar);
    
    containerItemLista.appendChild(containerNomeDoItem);
    containerItemLista.appendChild(containerBotoes);

    itemDaLista.appendChild(containerItemLista);
    listaDeCompras.appendChild(itemDaLista);

    item.value = ''; // Limpa o campo de entrada
}