Projeto Final
Calculadora Web Responsiva
Neste projeto final, você deverá desenvolver uma aplicação web utilizando os conceitos estudados ao longo da disciplina:
- HTML e semântica
- CSS e estilização
- Formulários HTML
- JavaScript básico
- Bootstrap e responsividade
- Manipulação do DOM
- Eventos JavaScript
O projeto consiste em criar uma calculadora web moderna e responsiva, permitindo ao usuário realizar operações matemáticas básicas.
Estrutura do Projeto
/calculadora-web
index.html
style.css
script.js
Requisitos Obrigatórios
-
O projeto deve possuir:
- Um arquivo HTML
- Um arquivo CSS
- Um arquivo JavaScript
-
O arquivo HTML deve:
- Utilizar estrutura HTML completa
- Utilizar elementos semânticos
- Conter um formulário
- O projeto deve importar o Bootstrap via CDN.
- O projeto deve utilizar CSS personalizado além do Bootstrap.
- O resultado da operação deve ser exibido sem recarregar a página.
Layout Obrigatório
A aplicação deve possuir:
- Cabeçalho
- Área principal com a calculadora
- Rodapé
Cabeçalho
O cabeçalho deve conter:
- Nome do projeto
- Descrição curta
Calculadora
A calculadora deve ficar centralizada na tela utilizando Bootstrap.
O layout da calculadora deve ser organizado em linhas e colunas utilizando:
container
row
col
Organização do Layout
Linha 1 — Campos Numéricos
Criar uma linha contendo duas colunas:
- Número 1
- Número 2
Em telas pequenas:
- Os campos devem ficar um abaixo do outro
Em telas médias e grandes:
- Os campos devem ficar lado a lado
Linha 2 — Operação
Criar uma linha contendo um elemento
<select>.
O select deve possuir as opções:
- Soma
- Subtração
- Multiplicação
- Divisão
Linha 3 — Botão
Criar um botão:
- Calcular
O botão deve possuir destaque visual e efeito hover.
Linha 4 — Resultado
Criar uma área destacada para exibir:
- O resultado da operação
Responsividade
A aplicação deve funcionar corretamente em:
- Desktop
- Tablet
- Celular
Requisitos de Estilização
O projeto deve possuir:
- Layout centralizado
- Card com bordas arredondadas
- Sombra
- Cores harmoniosas
- Espaçamentos adequados
- Efeito hover em botões
JavaScript
O JavaScript deve:
- Capturar os valores digitados
- Capturar a operação escolhida
- Executar o cálculo
- Exibir o resultado na página
Operações obrigatórias:
- Soma
- Subtração
- Multiplicação
- Divisão
Desafios Extras (Opcional)
- Botão Limpar
- Histórico de operações
- Tema escuro
- Ícones
- Validação de divisão por zero