/on20-tet-s8-projeto-2

Primary LanguageJavaScript

logo reprograma

Tema da Aula

Turma Online 20 - Todas em Tech | Front-end | Semana 8 | 2022 | Professora Ana Beatriz Morita

Instruções

Antes de começar, vamos organizar nosso setup.

  • Fork esse repositório
  • Clone o fork na sua máquina (Para isso basta abrir o seu terminal e digitar git clone url-do-seu-repositorio-forkado)
  • Entre na pasta do seu repositório (Para isso basta abrir o seu terminal e digitar cd nome-do-seu-repositorio-forkado)
  • [Add outras intrucoes caso necessario]

Projeto To do list

Passos

  • 1. HTML
    • ESTRUTURAR HTML
  • 2. CSS
    • ESTILIZAR O SITE (MOBILE FIRST)
  • 3. JavaScript
    • 3.1 CADASTRAR TAREFA
      • 3.1.1 PEGAR O INPUT E O QUE ESTÁ ESCRITO NELE
      • 3.1.2 ADICIONAR O EVENTO DE CADASTRAR A TAREFA
      • 3.1.3 PEGAR AS INFORMAÇÕES E ADICIONAR NA TELA
        • 3.1.3.1 CRIAR UM ELEMENTO PARA COLOCAR AS INFOS DA TAREFA
        • 3.1.3.2 COLOCAR AS INFOS DA TAREFA NO ELEMENTO CRIADO
        • 3.1.3.3 COLOCAR ELEMENTO CRIADO NO HTML
    • 3.2 MARCAR TAREFA COMO FEITA
      • 3.2.1 PINTAR DE VERDE E COLOCAR UM RISQUINHO NO TEXTO (LINE THROUGH)
    • 3.3 APAGAR UMA TAREFA
      • 3.3.1 CRIAR BOTÃO DE DELETAR TAREFA
      • 3.3.2 ADICIONAR BOTÃO AO ITEM DA LISTA
      • 3.3.3 ADICIONAR EVENTO AO BOTÃO CRIADO
      • 3.3.4 ADICIONAR EVENTO AO BOTÃO CRIADO
      • 3.3.5 PEGAR BOTÃO QUE FOI CLICADO E CHAMOU A FUNÇÃO DE DELETAR
      • 3.3.6 REMOVER O LI QUE CONTÉM O BOTÃO CLICADO
    • 3.4 MARCAR TODAS AS TAREFAS COMO FEITAS
      • 3.4.1 PEGAR TODOS ITENS DA LISTA
      • 3.4.2 ADICIONAR ESTILO DE CHECKED EM CADA ITEM DA LISTA
    • 3.5 APAGAR TODAS AS TAREFAS
      • 3.5.1 PEGAR TODOS ITENS DA LISTA
      • 3.5.2 REMOVER CADA ITEM DA LISTA
    • 3.6 ADICIONAR MENSAGEM DE ERRO CASO O USUÁRIO TENTE ENTRAR COM TAREFA VAZIA

Desafio

  • colocar a mensagem de erro caso o usuário tente colocar uma tarefa vazia ou com apenas espaços logo embaixo do input ao invés de utilizar o alert.
  • trocar o texto do botão marcar todos quando todos os elementos estiverem marcados e desmarcar todos os itens também. Se tiver pelo menos um item sem marcar manter o botão como marcar todos e marcar todos ao clicar

Desenvolvido com 💜