//INDEX.HTLM

Ola

  <div class="container-lista">
    <h2>Lista de compras</h2>
    <hr />

    <ul id="lista-de-compras"></ul>
    <p class="mensagem-lista-vazia">Não há nenhum item na lista no momento!</p>
  </div>
</main>
<script src="index.js" type="module"></script>

INDEX.JS

import { criarItemDaLista } from "./scripts/criarItemDaLista.js"
const listaDeCompra = document.getElementById("lista-de-compras");
const botaoAdicionar = document.getElementById("adicionar-item");

botaoAdicionar.addEventListener("click", (evento) => {
    evento.preventDefault();
    const itemDaLista = document.createElement("li");
    listaDeCompra.appendChild(itemDaLista);
    verificarListaVazia();
})![Insira aqui a descrição dessa imagem para ajudar na acessibilidade](https://cdn1.gnarususercontent.com.br/1/4702425/b273c4f4-1c18-448b-be57-681f28dcb4e7.png)  

const mensagemListaVazia = document.querySelector(".mensagem-lista-vazia");

function verificarListaVazia(){
    const itensDaLista = listaDeCompra.querySelectorAll("li");
    if(itensDaLista.length === 0){
        mensagemListaVazia.style.display = "block";
    }else{
        mensagemListaVazia.style.display = "none";
    }
}

verificarListaVazia()

CRIARITEMDALISTA

const inputItem = document.getElementById("input-item");
let contador = 0

export function criarItemDaLista(){
    if(inputItem.value === ""){
        alert("Por favor, insira um item!");
        return
    }

    const itemDaLista = document.createElement("li");
    const containerItemDaLista = document.createElement("div");
    containerItemDaLista.classList.add("lista-item-container");
    const inputCheckBox = document.createElement ("input");
    inputCheckBox.type = "checkbox";
    inputCheckBox.id = "checkbox-" + contador++;
    const nomeItem = document.createElement ("p");
    nomeItem.innerHTML = inputItem.value;

    inputCheckBox.addEventListener("click", function(){
        if(inputCheckBox.checked){
            nomeItem.style.textDecoration = "line-through";
        }else{
            nomeItem.style.textDecoration = "none";
        }
    })

    containerItemDaLista.appendChild(inputCheckBox);
    containerItemDaLista.appendChild(nomeItem);

    itemDaLista.appendChild(containerItemDaLista);

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