Giter Club home page Giter Club logo

todo's Introduction

Projeto ToDo - Checkpoint II - Front End II

Olá, este web app ToDo (lista de coisas a fazer) tem como objetivo servir como segundo instrumento avaliativo da disciplina de Front End II e está sendo desenvolvido pelos integrandes da mesa 02:

GitHub Pages

Usando session storage

Usando Firebase pra persistência de dados Branch with-dtabase

O projeto

A equipe optou por não seguir o esqueleto do HTML & CSS disponiblizado em aula pelo professor, fora criado um wirefame e trabalhamos no projeto do zero, criando nossa própria estrutura HTML e aplicando nossa própria estilização.

Screenshot

Versão Session Storage (Tema Light):

Versão Session Storage (Tema Dark):

Versão com Database (Tema Light):

Versão com Database (Tema Dark):

Instruções e requisitos do projeto

  1. A primeira página deve ter um formulário com os inputs:

    • a. Data de criação: o usuário não poderá alterar esse input, mas ele deve ser exibido.
    • b. Data limite da tarefa: data que o usuário deseja terminar aquela tarefa.
    • c. Descrição: texto da tarefa.
    • d. Botão de submit.
  2. Validações:

    • a. Nenhum campo pode ser vazio.
    • b. A descrição deve ter mais que 10 caracteres.
    • c. IMPORTANTE: Quando o usuário não preencher corretamente deve ser exibido um alerta indicando que existem erros na criação da tarefa.
    • d. OPCIONAL: a data limite da tarefa deve ser hoje ou no futuro.
  3. Funcionalidades:

    • a. Quando o usuário clicar em submit, se ele passar pela validação, a anotação deve ser exibida na tela por meio de um card.
    • b. No card da anotação deve ter um botão para excluir a anotação. Quando ele for clicado deverá ser exibido um aviso confirmando a intenção de excluir a anotação. Se o usuário confirmar a intenção de excluir, o card desta nota deve desaparecer.
    • c. Ainda no card da anotação deverá existir um checkbox que ao ser clicado faz o texto daquela anotação ficar tachado. Tarefa concluida.
    • d. Opcional: Escolher cor do fundo do card - (versão dark)
  4. Agora nós vamos criar uma outra página, onde iremos consumir uma api de lista de tarefas.

    • a. O end-point “https://jsonplaceholder.typicode.com/todos/” responde com um JSON com 200 tarefas. Essas 200 tarefas devem ser consumidas pelo JS e renderizadas também como cards na página.
    • b. Nas tarefas onde o atributo “completed": true” o texto do atributo title deve estar tachado. Pois significa que a tarefa ja foi completada.
    • c. Nas tarefas onde o atributo “completed": false” o texto do atributo title deve estar em negrito. Pois significa que a tarefa está a fazer.
    • d. Exiba também o conteúdo do atributo “id”.
  5. ENTREGA:

    • a. Devem ser entregues os arquivos HTML5, CSS3 e Javascript do projeto via Git/Github. Você deverá enviar o link do repositório pelo Google Forms até o dia 28/09/2021 às 23h59.

todo's People

Contributors

aloisiot avatar ronilsonalves avatar gsantosp avatar samuelfxavier avatar patriciaruffino avatar henriquetebet avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.