Projeto T1: JavaScript + HTML DOM

João Eduardo Montandon

Setor de Informática - COLTEC/MG

Valor: 7 pontos

Data de Apresentação: 12/05/2023

No de integrantes: até quatro alunos.

• Bernardo Alvim
• Raphael
• Rafael
• Leonardo

Componentes JavaScript

Utilizando seus conhecimentos em JavaScript e HTML DOM, implemente um dos seguintes componentes:

1. Abas: um componente que contenha um painel e um conjunto de botões. O conteúdo deste painel muda de acordo com o o botão selecionado. Exemplo (Tópicos no topo da tela).
   • Deverão ser utilizados containers para exibir os conteúdos, e um conjunto de botões que definir o container a ser exibido.
2. Popover: Uma espécie de balão que é acionado quando o usuário interage com um botão. Exemplo (arrastar o mouse para faça seu login).
3. Toast: Uma notificação que aparece no canto da tela após uma determinada ação, como clique de um botão. Exemplo (Mensagem que surge quando e-mail é enviado).
   • Deverá ser possível customizar em qual canto da página o Toast deverá aparecer.
4. Barra lateral: uma barra lateral que ficará escondida/reduzida no site, e deverá ser exibida interação com usuário. Exemplo (Barra localizada a esquerda, expandida quando usuário interage com ela).
5. Exibidor de senha: componente que será anexado ao lado de um campo de senha. Ao ser clicado, esse componente deverá exibir a senha que está sendo digitada no campo ao lado. Exemplo.
6. Contador de caracteres: um componente localizado abaixo de campos de texto que contém o número de caracteres digitados. Exemplo (Contador de caracteres ao postar um tweet).
   • Deve ser atualizado toda vez que um novo caractere é adicionado ou removido do campo.
7. Menu: um componente que ficará no topo da página. Deverá exibir todas as opções no modo desktop, mas deverá ser expansível no modo mobile. Exemplo (Menu superior nos modos desktop e mobile).
8. Cronômetro: um componente que apresentará o tempo corrido de um cronômetro. Exemplo.
   • O componente deverá apresentar o tempo corrido no formato mm:ss.milisegs, e o botão iniciar/parar.
9. Contagem regressiva: um relógio de contagem regressiva. Deverá apresentar o número de dias, horas, minutos e segundos restantes. Exemplo.
   • O componente deverá ter um container para cada um dos dígitos (dia, hora, minuto, segundo) a serem exibidos pelo contador.

Avaliação

Os componentes serão avaliados quanto a:

1. Funcionalidade: Eles funcionam corretamente?
2. Reúso: Quão simples é utilizar este componente dentro de uma página HTML?
3. Aspecto Visual: Eles estão estilizados?
4. Aspecto Responsivo: Eles se adaptam para versões mobile e desktop?
5. Código: O código está bem organizado e modularizado?

Apresentação

Os componentes deverão ser apresentados para o professor no dia 12/05/2023. O grupo deverá mostrar um exemplo do componente em funcionamento, bem como explicar os passos necessários para inicializá-lo na página, seus parâmetros de configuração, e as decisões de implementação tomadas para criação do componente.