Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Prévia do material em texto
PASSO 1: ESTRUTURA HTML
Primeiro, crie a estrutura básica do HTML para a calculadora.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<div class="display" id="display"></div>
<div class="buttons">
<button class="btn" onclick="clearDisplay()">C</button>
<button class="btn" onclick="deleteLast()">DEL</button>
<button class="btn" onclick="appendToDisplay('/')">/</button>
<button class="btn" onclick="appendToDisplay('*')">*</button>
<button class="btn" onclick="appendToDisplay('7')">7</button>
<button class="btn" onclick="appendToDisplay('8')">8</button>
<button class="btn" onclick="appendToDisplay('9')">9</button>
<button class="btn" onclick="appendToDisplay('-')">-</button>
<button class="btn" onclick="appendToDisplay('4')">4</button>
<button class="btn" onclick="appendToDisplay('5')">5</button>
<button class="btn" onclick="appendToDisplay('6')">6</button>
<button class="btn" onclick="appendToDisplay('+')">+</button>
<button class="btn" onclick="appendToDisplay('1')">1</button>
<button class="btn" onclick="appendToDisplay('2')">2</button>
<button class="btn" onclick="appendToDisplay('3')">3</button>
<button class="btn span-two" onclick="calculateResult()">=</button>
<button class="btn span-two" onclick="appendToDisplay('0')">0</button>
<button class="btn" onclick="appendToDisplay('.')">.</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Passo 2: Estilo CSS
Depois, estilize a calculadora com CSS.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.calculator {
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
width: 400px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.display {
background-color: #222;
color: white;
font-size: 2rem;
text-align: right;
padding: 20px;
box-sizing: border-box;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.btn {
font-size: 1.5rem;
border: 1px solid #ccc;
padding: 20px;
background-color: #fff;
cursor: pointer;
}
.btn:hover {
background-color: #f0f0f0;
}
.span-two {
grid-column: span 2;
}
Passo 3: Lógica JavaScript
Por fim, adicione a lógica para fazer a calculadora funcionar com JavaScript.
javascript
let display = document.getElementById('display');
function appendToDisplay(value) {
display.innerText += value;
}
function clearDisplay() {
display.innerText = '';
}
function deleteLast() {
display.innerText = display.innerText.slice(0, -1);
}
function calculateResult() {
try {
display.innerText = eval(display.innerText);
} catch (e) {
display.innerText = 'Erro';
}
}
HTML: Define a estrutura básica da calculadora, com um display para mostrar os valores e
botões para cada número e operação.
CSS: Aplica estilos para dar uma aparência agradável à calculadora.
JavaScript: Implementa a funcionalidade da calculadora:
• `appendToDisplay(value)`: Adiciona valores ao display quando os botões são clicados.
• `clearDisplay()`: Limpa todo o conteúdo do display.
• `deleteLast()`: Remove o último caractere do display.
• `calculateResult()`: Avalia a expressão matemática no display e mostra o resultado,
usando `eval()`. Note que `eval()` deve ser usado com cuidado por questões de
segurança.
Após esses três passos, você terá uma calculadora básica funcionando em sua página web.Mais conteúdos dessa disciplina
Teste_ Atividade 4 pdf FRONTEND- Simulado 2
- Canva
- Certificado samuel
- Unidade 4 - Serviços internet - Camada de Aplicação
- Relatório de Página Responsiva
- desenvolvimento responsivo
- Desenvolvimento Web Completo - HTML - CSS e JavaScript para Iniciantes
- Acessibilidade À Web
- Associe corretamente as propriedades de estilo em CSS com suas descrições: Considere as seguintes propriedades de estilo em CSS: 1. background-c...
- No que se refere a enquadramentos, Detalhe (Cut Up) ou Extreme Close Up (ECU) mostra: Detalhes de uma região da face ou de um objeto. Detalhes dos pés
- De acordo com as especificações técnicas, por meio da retificação, a rugosidade mínima que conseguimos alcançar é Rt: 2,5µ. Na maioria das vezes, para
- Assinale a alternativa que exemplifica uma atração turística do Rio de Janeiro: a ) HTML image 10 b ) HTML image 11 c ) HTML image 12 d ) HTML image 1
- A linguagem HTML é composta por diversas tags que definem diferentes componentes como tabelas, campos de formulário e imagens. Algumas das tags de ...
- Referente à Informatização do Processo Judicial, podemos afirmar que: Documento Anônimo: Relaciona-se a um documento que possui a indicação do nome de
- Referente à Informatização do Processo Judicial, podemos afirmar que: Documento Anônimo: Relaciona-se a um documento que possui a indicação do nome de
- COLOQUEI 03 SOQUETES DE LAMPADA NA MESMA LINHA DE FIAÇÃO, SOMENTE A ULTIMA LIGA... O QUE PODE SER?
- Sobre a história da Exclusão no mundo, leia as afirmativas abaixo e assinale a alternativa correta: - Antes e durante a Idade Média a exclusão seguida
- Resolva a equação para x e assinale a alternativa com a resposta correta: 2x2−1=1 Questão 13Escolha uma opção: a. x=0 b. x=−1 c. x=±2 d. x=1 e. x=±1
- 20. Segundo as normas que regulamentam os procedimentos de trâmites processuais no âmbito da CLT, analise as sentenças a seguir e, em seguida, assinal
- O desenvolvimento de APIs RESTful com FastAPI, é comum que OS analistas precisem criar rotas que aceitem parâmetros dinâmicos. Esses parâmetros são es
- Atividades como as brincadeiras, além de construírem a corporeidade na criança, desenvolvem os aspectos inter-relacionais e também auxiliam na solu...
- Administração de Rede e Servidores
- Administração de Rede e Servidores