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

[Dúvida] Como fazer a lista de exercícios?

Olá. Não ficou muito claro a lista de exercícios para esse curso (assim que eu terminei o curso, percebi que tinham atualizado colocando esse item em cada aula). Eu vou ter que escrever o código do zero? Esse 'TaskFlow' vai ser baseado no projeto 'Fokus'? Tem algum projeto base? As atividades estão de acordo com o que foi ensinado na aula, mas faltou saber onde eu vou escrever e testar essa lista de exercícios. Agradeço!

2 respostas
solução!

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!

Obrigado pelos esclarecimentos!