Projeto Prático

Terminal Cargueiro Monte Névoa

Crie uma interface e validação de carga para o bonde de uma estação

Nível
Fácil
Categoria
Programação
Tecnologias
HTML, CSS, JS

Posto Avançado Monte Névoa

A estação de pesquisas geológicas de Monte Névoa depende de um bonde cargueiro suspenso por cabos para receber suprimentos, equipamentos e correspondências durante as tempestades de inverno. Como único operador da estação, você precisa criar uma página web completa para monitorar a estação, registrar manifestos de carga e processar dados técnicos de rota.

Conceitos Praticados Neste Desafio

Este projeto exige a aplicação direta dos seguintes conhecimentos técnicos:

  • Como a Web funciona: Compreensão do fluxo cliente-servidor, requisições HTTP e resolução DNS na entrega do documento HTML/CSS ao navegador.
  • Estrutura básica do HTML: Declaração correta do documento com tags estruturais principais (head, body e metadados).
  • Tags semânticas: Organização do layout usando header, nav, main, section, article e footer.
  • Formulários em HTML: Construção de controles de despacho com input, select, textarea, label e validações nativas do HTML5.
  • Introdução ao CSS: Vinculação de folha de estilo externa, seletores de classe/elemento e estilização base.
  • Box Model: Controle rigoroso de dimensões, espaçamentos internos (padding), externos (margin) e bordas do painel.
  • Cores, fontes e texto: Paleta em hexadecimal/RGB, hierarquia tipográfica e importação de tipografia via Google Fonts.
  • Flexbox: Alinhamento e distribuição espacial dos módulos da estação via display: flex.
  • Introdução ao JavaScript: Declaração de variáveis, tipos de dados e operadores matemáticos/lógicos.
  • Estruturas de controle em JS: Aplicação de condicionais (if, else, switch) e laços de repetição (for, while) no processamento dos dados do bonde.

Requisitos de Interface e Marcação

1. Arquitetura Semântica

Estruture a aplicação em uma única página HTML dividida em blocos bem definidos:

  • Cabeçalho (header): Identificação da estação, indicador visual de status do cabo (Ativo/Interrompido) e navegação rápida (nav).
  • Conteúdo Principal (main): Dividido em duas seções principais (section): o painel estatístico do bonde e o formulário de despacho de carga.
  • Cartões de Dados (article): Cada indicador de telemetria (Ex: Altitude, Capacidade Atual, Velocidade do Vento) deve ser um artigo isolado.
  • Rodapé (footer): Informações do operador de turno, dados do servidor local e notas de segurança.

2. Formulário de Despacho de Carga

Crie um formulário funcional contendo as seguintes entradas com suas respectivas labels vinculadas:

  • Identificador do Contêiner: Campo de texto obrigatório com limite mínimo de caracteres.
  • Categoria de Carga: Caixa de seleção (select) com as opções: Alimentos/Mantimentos, Equipamento Científico, Combustível e Aposentadoria de Material.
  • Peso Estimado (kg): Campo numérico com limites estipulados via atributos min e max.
  • Turno de Envio: Botões de opção ou seleção para definir envio matutino, vespertino ou noturno.
  • Observações de Risco: Área de texto (textarea) para notas do despachante.

Estilização e Layout com CSS

Aplique regras visuais para garantir que o painel pareça um terminal técnico robusto e funcional:

  • Tipografia do Terminal: Importe e aplique uma fonte monoespaçada do Google Fonts (como Share Tech Mono ou Roboto Mono).
  • Cores e Visibilidade: Defina uma paleta escura industrial usando valores HEX ou HSL, destacando alertas com cores quentes de alto contraste.
  • Ajuste por Box Model: Garanta que os cartões de telemetria utilizem limites de largura bem definidos, bordas industriais estilizadas e espaçamento interno proporcional sem quebrar a grade.
  • Organização em Flexbox: Monte o layout dos cartões de métricas e dos campos do formulário em alinhamentos flexíveis, usando flex-direction, gap e justify-content.

Módulo de Lógica e Validação (JavaScript)

Construa um script interno ou externo que execute a análise de dados do manifesto de carga diretamente nas estruturas de controle do JavaScript:

Regras de Processamento

  1. Validação de Capacidade com Condicionais: Declare variáveis com o limite máximo suportado pelo bonde (ex: 850 kg) e o peso atual carregado. Use if/else para determinar se um novo contêiner pode ser adicionado ou se excede o limite.
  2. Classificação por Código de Carga (Switch): Crie uma estrutura switch baseada no código da categoria selecionada para aplicar um fator de risco ou prioridade de transporte no console.
  3. Varredura de Lote com Laços: Crie um array fictício de pesos de contêineres aguardando no pátio. Utilize um laço for ou while para somar o peso total do lote e exibir quantos contêineres conseguirão subir na viagem atual antes do limite ser atingido.

Critérios de Aceite

  • O código HTML deve passar na validação estrutural sem erros de abertura/fechamento de tags ou labels órfãs.
  • Todas as seções do documento devem utilizar tags semânticas apropriadas ao contexto.
  • O visual deve refletir um design responsivo básico e organizado exclusivamente com Flexbox e regras de Box Model.
  • A lógica em JavaScript deve rodar sem erros de sintaxe no console do navegador, atendendo às três regras de processamento.

Expansões Opcionais para Evolução

  • Alertas Visuais CSS: Utilizar seletores CSS de estado como :focus e :invalid para destacar os campos do formulário preenchidos incorretamente.
  • Simulação de Sensores: Criar um laço de repetição no JavaScript que gere leituras simuladas de temperatura da montanha para os últimos 5 dias e calcule a média de congelamento dos cabos.
  • Temas de Interface: Criar uma classe CSS alternativa representando "Modo de Tempestade" que altera completamente as cores do painel para tons de alerta extremo.
Boa sorte ;)