[Projeto] incremento de um contador em cada tarefa adicionada. | JavaScript: construindo páginas dinâmicas

Realizei o exercício utilizando modulo... não entendi muito bem a parte do contador para cada tarefa adicionada?

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de tarefas</title>
</head>
<body>
    <h1>Lista de tarefas</h1>
    <div>
        <input type="text" id="tarefaInput" placeholder="Digite uma tarefa">
        <button id="adicionarButton">Adicionar</button>
    </div>
    <ul id="listaTarefas"></ul>
    <script src="index.js" type="module"></script>
</body>
</html>

function criarTarefa(tarefaInput, diaCompleto){
    const data = diaCompleto()
    const listaTarefa = document.getElementById("listaTarefas")
    const tarefa = tarefaInput.value;
    const lista = document.createElement("li");
    lista.textContent = `${tarefa} - ${data}` 
    listaTarefa.appendChild(lista)

    tarefaInput.value = ""
}

export default criarTarefa;

function diaCompleto(){
    
    const diaDaSemana = new Date().toLocaleDateString("pt-br",{weekday:"long"});
    const data = new Date(). toLocaleDateString("pt-br");
    const hora = new Date(). toLocaleTimeString("pt-br", {hour:"numeric", minute:"numeric"})
    const dataCompleta = `${diaDaSemana}, ${data} ${hora}`
    return dataCompleta;
}


export default diaCompleto;

import diaCompleto from "./dataCompleta.js";
import criarTarefa from "./criandoTarefa.js";
const tarefaInput = document.getElementById("tarefaInput");
const addtarefa = document.getElementById("adicionarButton")

addtarefa.addEventListener("click", listaTarefa); 



function listaTarefa(){
    if(tarefaInput === ""){
        alert("Preencha o campo tarefa.")
    }else{
       criarTarefa(tarefaInput,diaCompleto)

    }        
}

Olá, Hebert, como vai?

Parabéns pelo código! Ele está bem estruturado e segue uma boa lógica. Só identifiquei um pequeno detalhe que pode ser ajustado. Na função listaTarefa(), você está verificando se o tarefaInput é igual a uma string vazia, mas o correto seria verificar o valor do tarefaInput.value, já que a referência que você tem é o próprio elemento de input e não o seu valor.

Ou seja, a condição correta seria:

if (tarefaInput.value === "") {
    alert("Preencha o campo tarefa.");
} else {
    criarTarefa(tarefaInput, diaCompleto);
}

Dessa forma, a validação vai funcionar corretamente, verificando se o campo de input está vazio.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)