1
resposta

[Sugestão] Conclusão dos desafios.

Conclusão do primeiro desafio desafio:

Crio o arquivo para adicionar as Datas.

adicionarDatas.js

export function adicionarData(item){
    const itemData = document.createElement("p");
    itemData.innerText = `${new Date().toLocaleDateString("pt-BR", {weekday: "long"})} (${new Date().toLocaleDateString()}) às ${new Date().toLocaleTimeString("pt-BR", {hour:"numeric",minute:"numeric"})}`;
    itemData.classList.add("texto-data");

    return item.appendChild(itemData)
}

Ao final do código de criar item, adiciono a function usando o itemDaLista como parâmetro.

criarItemDaLista.js

import { adicionarData } from "./adicionarData.js";

    //Código anterior
    adicionarData(itemDaLista);

    return itemDaLista;

conclusão do segundo desafio:

altero o código que verifica a lista vazia

verificarListaVazia.js

const listaDeCompras = document.getElementById("lista-de-compras");
const listaComprados = document.getElementById("lista-comprados");

const mensagemListaVazia = document.getElementById("mensagem-lista-vazia");
const tituloListaComprados = document.getElementById("titulo-lista-comprado");

export function verificarListaVazia() {
    if (listaDeCompras.childElementCount === 0){
        mensagemListaVazia.style.display = "block";
    }
    else{
        mensagemListaVazia.style.display = "none";
    }

    if (listaComprados.childElementCount != 1){
        tituloListaComprados.style.display = "block";
    }
    else{
        tituloListaComprados.style.display = "none";
    }
}

Adicionar a function verificarListaVazia() em dois locais:

no arquivo adicionarItem

adicionarItem.js

import { verificarListaVazia } from "./verificarListaVazia.js";

//código ocultado.

export function adicionarItem(evento){
    evento.preventDefault();

    const itemDaLista = criarItemDaLista(item.value);
    listaDeCompras.appendChild(itemDaLista);
    verificarListaVazia();

}

e no arquivo criarItemDaLista dentro da verificação do checkbox:

criarItemDaLista.js

import { verificarListaVazia } from "./verificarListaVazia.js";

//código ocultado.

        if (checkboxInput.checked) {
            checkboxCustomizado.classList.add("checked");
            itemTitulo.style.textDecoration = "line-through";
            listaComprados.appendChild(itemDaLista);
            verificarListaVazia()
        }
        else{
            checkboxCustomizado.classList.remove("checked");
            itemTitulo.style.textDecoration = "none";
            listaDeCompras.appendChild(itemDaLista);
            verificarListaVazia()
        }
        
    //código ocultado.
1 resposta

Oi, Lorenzo, tudo bem?

Muito obrigada por compartilhar seu código com a comunidade Alura! Muito bacana ver como você está utilizando funções para adicionar feedbacks visuais e verificar o estado da lista de compras. Sua implementação do desafio está bem feita e a verificação da lista vazia ajuda a manter a interface limpa e amigável. Parabéns por solucionar esse desafio!

Recomendo que confira a o gabarito da atividade para entender diferentes formas de encontrar as mesmas soluções e ampliar seus conhecimentos.

Parabéns por sua dedicação! Conte com o apoio do Fórum na sua jornada :)

Abraços e bons estudos!