/challenge-F-008-to-do-list

Primary LanguageHTML

📋 Indíce

🚀 Proposta

Assim como Linus Torvalds disse "Falar é fácil, me mostre o código". Nós desenvolvedores nunca vamos aprender a programar e desenvolver software sem efetivamente codar, é como tentar aprender a andar de bicicleta lendo livros e vendo vídeos.

E foi assim que essa abordagem nasceu, um roadmap baseado em projetos. A ideia em seu princípio é simples, essa é uma demanda, tente encarar como um desafio técnico e completá-lo em até 7 dias.

Ao completar, não esqueça de publicar no linkedin e adicionar #handsOnRoadmap

🏆 O desafio


Um amigo seu é muito esquecido, e sabendo que você está mandando muito bem nos projetos de front-end ele te pede para ajudar a criar um to-do list para ele.

Assim por ser algo personalizado ele iria usar mais e marcar as tarefas dele para não exquecer.


🎯 Os requisitos

🎯 Requisitos funcionais


Seu to-do list deve:


  • Permitir criar novas tarefas
  • Concluir uma tarefa (ela ainda não é apagada, somente concluída)
  • Editar uma tarefa
  • Apagar uma tarefa
  • Deve ser possível filtrar por concluídas ou não concluídas
  • Limpar todas as concluídas
  • Persistir dados no localStorage.

🎯 Requisitos não funcionais


É obrigatório a utilização de:

  • HTML
  • CSS
  • js
  • fazer deploy

📌 Requisitos não obrigatórios


Você será bem avaliado se usar:


  • usar HTML semântico, como tags main, section...
  • usar responsividade
  • organizar e dividir bem os arquivos
  • Estrutura seu código de forma mais limpa e desacoplada usando poo, paradigma funcional ou mesclar ambos.
  • Permitir ordenar as tarefas
  • Poder pesquisar dentro das tarefas pelo nome

📸 Screenshots


📱 Mobile design

📱 Tablets design

🖥️ Desktop design

✔️ O que aprendi

🛠 Mão a obra...

Você pode forkar esse projeto e reutilizar o readme e estrutura, mas também se sinta livre para mudar ela ou mesmo criar a sua.

☑️ Pré-requisitos para rodar


  • Editor de código de sua preferência (recomendado VS code)
  • Git
  • ?

📝 Procedimentos de instalação


Clone este repositório usando o comando:

git clone https://github.com/<meu_user>/<my-repo>.git
#processos adicionais aqui

👨🏾‍💻 Desafios similares e dicas

Antes ou depois de realizar esse desafio, você pode pegar desafios parecidos do front-end mentor ou similares. Isso te ajuda a fixar e melhorar. Vou deixar alguns a seguir, pode te ajudar a se inspirar.

O segredo aqui é fazer modelos parecidos até ganhar algum conforto com fazer algo com essas técnicas e esse modelo de desafio, então quem sabe pegar outros mais difíceis.

Todo app


Você também pode usar o dribbble para se inspirar.

Dribbble

😎 Autor