Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida for.Each

Boa tarde, qual está sendo a função do for.Each no código abaixo???

Observei que dentro do evento formAdicionarTarefa as listas já serão criadas, ou seja, o for.Each está tendo alguma funcionalidade nesse código???

const btnAdicionarTarefa = document.querySelector('.app__button--add-task')
const formAdicionarTarefa = document.querySelector('.app__form-add-task')
const textarea = document.querySelector('.app__form-textarea')
const ulTarefas = document.querySelector('.app__section-task-list')

const tarefas = JSON.parse(localStorage.getItem('tarefas')) || []

function criarElementoTarefa(tarefa) {
    const li = document.createElement('li')
    li.classList.add('app__section-task-list-item')

    const svg = document.createElement('svg')
    svg.innerHTML = `
        <svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="12" fill="#FFF"></circle>
            <path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z"
                fill="#01080E"></path>
        </svg>
    `
    const paragrafo = document.createElement('p')
    paragrafo.textContent = tarefa.descricao
    paragrafo.classList.add('app__section-task-list-item-description')

    const botao = document.createElement('button')
    botao.classList.add('app_button-edit')

    const imagemBotao = document.createElement('img')
    imagemBotao.setAttribute('src', '/imagens/edit.png')
    botao.append(imagemBotao)

    li.append(svg)
    li.append(paragrafo)
    li.append(botao)

    return li
}   

btnAdicionarTarefa.addEventListener('click', () => {
    formAdicionarTarefa.classList.toggle('hidden')
})

formAdicionarTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const tarefa = {
        descricao: textarea.value
    }
    tarefas.push(tarefa)
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
    localStorage.setItem('tarefas', JSON.stringify(tarefas))
    textarea.value = ''
    formAdicionarTarefa.classList.add('hidden')
})

tarefas.forEach(tarefa => {
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
});
2 respostas
solução!

Oi Bruno, tudo bem?

A função do forEach no código que você compartilhou é percorrer o array tarefas e para cada tarefa, criar um elemento de tarefa e anexá-lo à lista de tarefas (ulTarefas).

Imagina que você já tenha algumas tarefas salvas no localStorage. Quando a página é carregada, essas tarefas são recuperadas do localStorage e armazenadas no array tarefas. O forEach então percorre esse array e para cada tarefa, ele chama a função criarElementoTarefa para criar um elemento de lista (li) para essa tarefa. Esse elemento de lista é então anexado à lista de tarefas (ulTarefas) na página.

O forEach é útil aqui porque ele permite que você trate cada tarefa individualmente, criando um elemento de lista para cada uma e adicionando-o à lista de tarefas. Sem o forEach, você teria que escrever código separado para cada tarefa, o que seria muito menos eficiente.

Um abraço e bons estudos.

Eu havia entendido que mesmo sem o uso do for.Each os elementos seriam criados para cada tarefas graças a esse trecho ;

Insira aqui a descrição dessa imagem para ajudar na acessibilidade