Só um comentário

Essa formação esta equivocada, sugiro que procure outros planos de estudo de outros alunos aqui da plataforma

To me sentindo da mesma forma. Nao compreendo como o meu ritmo ta tao diferente dos outros cursos que fiz.

E essa mistura de ingles em algumas partes e um portugeus na outra, nao sei quanto aos outros, me confunde demais.

Complicado tentar lembrar de 5 ou 6 variaveis em ingles enquanto boa parte esta em portugues...

Tá complicado mesmo, eu mesmo que já cheguei a fazer os cursos anteriores desse, to me sentindo perdido, mas vou tentar ajudar com algumas duvidas;

1 -

`let tarefaSelecionada = null; let itemTarefaSelecionada = null;

let tarefaEmEdicao = null; let paragraphEmEdicao = null; `

tarefaSelecionada, itemTarefaSelecionada, tarefaEmEdicao, paragraphEmEdicao: Essas variáveis são inicializadas com null como um estado inicial. Elas são usadas para controlar o estado da aplicação. Por exemplo, tarefaSelecionada e itemTarefaSelecionada podem ser usadas para rastrear a tarefa atualmente selecionada ou em andamento, enquanto tarefaEmEdicao e paragraphEmEdicao podem ser usadas para controlar o estado de edição. Iniciar com null é uma maneira comum de definir um valor inicial quando o valor real ainda não é conhecido.

2 -** Função para Selecionar uma Tarefa em Andamento**

const selecionaTarefa = (tarefa, elemento) => { Esta função é chamada quando o usuário clica em uma tarefa na lista. Ela é usada para destacar a tarefa selecionada e exibir sua descrição em uma área específica da página.

Remoção de Seleção de Tarefas Anteriores

document.querySelectorAll('.app__section-task-list-item-active').forEach(function (button) {
    button.classList.remove('app__section-task-list-item-active')
})

Antes de selecionar a nova tarefa, essa parte do código remove qualquer seleção anterior. Ela pesquisa todos os elementos com a classe CSS .app__section-task-list-item-active, que indicam tarefas previamente selecionadas, e remove essa classe, desmarcando todas as tarefas anteriormente selecionadas.

Verificação de Tarefa Selecionada

if (tarefaSelecionada == tarefa) {
    taskAtiveDescription.textContent = null;
    itemTarefaSelecionada = null;
    tarefaSelecionada = null;
    return
}

Esta parte verifica se a tarefa que o usuário acabou de clicar é a mesma que já estava selecionada. Se for o caso, a função desmarca a tarefa e limpa a descrição da tarefa em andamento. Ela também redefine as variáveis itemTarefaSelecionada e tarefaSelecionada como null para indicar que nenhuma tarefa está selecionada.

Seleção da Nova Tarefa

tarefaSelecionada = tarefa;
itemTarefaSelecionada = elemento;
taskAtiveDescription.textContent = tarefa.descricao;
elemento.classList.add("app__section-task-list-item-active");

Se a tarefa clicada não for a mesma que já estava selecionada, essa parte do código atualiza as variáveis tarefaSelecionada e itemTarefaSelecionada para representar a nova tarefa selecionada. A descrição da tarefa é exibida na área de descrição da tarefa em andamento, e a classe app__section-task-list-item-active é adicionada ao elemento da lista para destacar visualmente a tarefa selecionada.

3 - Classe 'hidden':

A classe 'hidden' É uma classe muito comundo nos cursos de css & html, geralmente é usada para ocultar elementos no HTML ou no CSS, tornando-os invisíveis na interface do usuário. A função limparForm está ocultando o elemento formAddTask definindo a classe 'hidden'. Isso é comum quando você deseja ocultar ou mostrar elementos interativamente. O textArea.value = ""; está limpando o valor de um campo de entrada de texto dentro desse formulário.

por fim deixarei a ultima parte me outro comentario por questão de tamanho.

continuação da explicção do 4 - Documentação: Função para Criar uma Tarefa (createTask)

Essa função, chamada createTask, é responsável por criar um elemento visual representando uma tarefa na lista de tarefas. Vou tentar explicar cada parte dela em detalhes.

Criação do Elemento de Lista (li):

const li = document.createElement("li");
li.classList.add("app__section-task-list-item");

• Aqui, estamos criando um elemento li (item de lista) que representará uma tarefa na lista. Também estamos atribuindo a ele a classe CSS app__section-task-list-item para aplicar estilos específicos.

Criação do Ícone (svg):

const svgIcon = document.createElement("svg");
svgIcon.innerHTML = taskIconSvg;

• Este trecho cria um elemento svg, que geralmente é usado para ícones. O conteúdo do ícone é definido pela variável taskIconSvg, que pode conter o código SVG para o ícone desejado.

.Criação do Texto da Descrição (paragraph):

const paragraph = document.createElement("p");
paragraph.classList.add("app__section-task-list-item-description");
paragraph.textContent = tarefa.descricao;

• Um elemento p (parágrafo) é criado para conter a descrição da tarefa. A classe app__section-task-list-item-description é atribuída para estilização. O texto da descrição da tarefa é definido como o valor da propriedade descricao da tarefa.

Criação do Botão de Edição (button):

const button = document.createElement("button");
button.classList.add("app__button-edit");

• Um botão é criado para permitir a edição da tarefa. É atribuída a classe app__button-edit para aplicar estilos ao botão. Esta classe pode conter estilos de edição, como um ícone de lápis.

Evento de Clique para Selecionar a Tarefa:

li.onclick = () => {
    selecionaTarefa(tarefa, li)
}

• Um evento de clique é associado ao elemento li. Quando o usuário clica na tarefa, a função selecionaTarefa é chamada, passando a tarefa e o próprio elemento li. Isso permite selecionar a tarefa na lista.

Evento de Clique no Ícone (SVG) para Marcar a Tarefa como Concluída:

svgIcon.addEventListener("click", (event) => {
    event.stopPropagation();
    button.setAttribute("disable", true);
    li.classList.add("app__section-task-list-item-complete");
})

• Este trecho adiciona um evento de clique ao ícone (SVG) da tarefa. Quando o ícone é clicado, a função é chamada. Aqui, estamos usando event.stopPropagation() para evitar que o evento de clique se propague para o elemento li. Isso significa que clicar no ícone não selecionará a tarefa.
• Também desabilitamos o botão para edição da tarefa, adicionamos a classe app__section-task-list-item-complete ao elemento li para indicar visualmente que a tarefa foi concluída.

Verificação de Tarefa Concluída:

if (tarefa.concluida) {
    button.setAttribute("disable", true);
    li.classList.add("app__section-task-list-item-complete");
}

• Antes de retornar o elemento li, verificamos se a tarefa já está concluída. Se estiver, desabilitamos o botão de edição e adicionamos a classe app__section-task-list-item-complete para destacar visualmente que a tarefa já foi concluída.

Construção Final do Elemento:

li.appendChild(svgIcon);
li.appendChild(paragraph);
li.appendChild(button);
button.appendChild(editIcon);

• Finalmente, construímos o elemento li anexando o ícone, o texto da descrição e o botão de edição a ele. O ícone do botão de edição é definido como editIcon.

Retorno do Elemento:

return li;

• A função retorna o elemento li completamente construído, que representa uma tarefa na lista.

Essa função é fundamental para a criação de elementos visuais que representam tarefas na interface da aplicação. Ela permite que o usuário veja as tarefas, marque-as como concluídas e até mesmo edite-as.

me sinto da mesma forma.

Também me sinto da mesma forma. Senti em diversos momentos como se o instrutor estivesse apenas lendo o conteúdo e não nos explicando/ensinando. Muitas vezes consegui entender um pouco melhor lendo os comentários no fórum do que nas aulas assistidas.