Calculadora Simples em HTML

Html5, Css3, Javascript

•

ESTÁCIO

Moreira Sousa

22/05/2024

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 6 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 6 páginas

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.