Olá, Maitê! Entendo que a similaridade dos códigos possa causar confusão, mas eles têm propósitos diferentes.
O primeiro bloco de código que você mencionou:
tarefas.forEach(task => {
const taskItem = createTask(task);
tasklistcontainer.appendChild(taskItem);
});
Este código é usado para iterar sobre o array tarefas
e para cada tarefa (task
) no array, ele cria um item de tarefa (taskItem
) usando a função createTask(task)
. Em seguida, ele adiciona esse item de tarefa ao container de lista de tarefas (tasklistcontainer
) usando appendChild(taskItem)
. Isso é útil para quando você tem várias tarefas no array tarefas
e deseja exibir todas elas na interface do usuário.
Por outro lado, o segundo bloco de código que você mencionou:
formTask.addEventListener('submit', (evento)=>{
evento.preventDefault();
const task = {
descricao: textArea.value,
concluida: false
}
tarefas.push(task);
const taskItem = createTask(task);
tasklistcontainer.appendChild(taskItem);
})
Este código é um manipulador de eventos que é acionado quando o formulário é enviado. Ele cria uma nova tarefa com a descrição da tarefa sendo o valor atual do textArea
e um status de concluida
como false
. Em seguida, ele adiciona essa nova tarefa ao array tarefas
usando tarefas.push(task)
. Após isso, ele cria um item de tarefa para a nova tarefa e adiciona ao container de lista de tarefas.
Portanto, embora os dois blocos de código pareçam semelhantes, eles têm propósitos diferentes. O primeiro é usado para exibir todas as tarefas existentes no array tarefas
, enquanto o segundo é usado para adicionar uma nova tarefa ao array tarefas
e exibir essa nova tarefa na interface do usuário.
Espero ter ajudado e bons estudos!