Olá, Yuri! Tudo ok contigo?
A lista de exercícios é uma forma prática de aplicar o que foi aprendido durante o curso. Você vai escrever o código do zero, mas baseado nos conceitos e exemplos que foram apresentados nas aulas. O "TaskFlow" mencionado nos exercícios é um projeto hipotético que serve como contexto para os exercícios, não é necessário que seja baseado no projeto "Fokus", a menos que seja especificado no exercício.
Quanto ao local para escrever e testar o código, você pode usar o ambiente de codificação de sua preferência, como um editor de texto simples (Notepad++, Sublime Text, Atom), uma IDE (Integrated Development Environment, como o Visual Studio Code) ou até mesmo ferramentas online, como o JSFiddle ou o CodePen.
Por exemplo, para o exercício 1, você poderia começar da seguinte maneira em um ambiente de codificação:
// Seleciona o botão e o formulário
let btn = document.querySelector('.btn-add-task');
let form = document.querySelector('.form-add-task');
// Adiciona um ouvinte de evento de clique ao botão
btn.addEventListener('click', function() {
// Alterna a classe 'hidden' no formulário
form.classList.toggle('hidden');
});
E para o exercício 2, um exemplo de como você poderia começar:
// Seleciona o formulário e o textarea
let form = document.querySelector('.app__form-textarea');
let textarea = document.querySelector('.app__form-textarea');
// Adiciona um ouvinte de evento de submissão ao formulário
form.addEventListener('submit', function(event) {
// Impede o comportamento padrão de recarga da página
event.preventDefault();
// Cria um objeto de tarefa com o valor do textarea
let task = {description: textarea.value};
// Adiciona a tarefa a uma lista de tarefas
let tasks = [];
tasks.push(task);
// Salva a lista de tarefas no localStorage
localStorage.setItem('tasks', JSON.stringify(tasks));
});
Lembre-se de que esses são apenas exemplos iniciais, você precisará expandir o código para atender a todos os requisitos do exercício. E não se preocupe se não acertar de primeira, a prática leva à perfeição.
Para isso você pode usar o próprio código base do projeto "Fokus" que é o projeto do curso.
Era isso, se precisar conte com a comunidade do fórum!
Abraços e bons estudos!