Scribd
Upload
3 views2 pages

Calc.html

The document is an HTML code for a simple calculator web application. It includes a user interface with buttons for numbers, operations, and functionalities to clear the input and calculate results. The design utilizes CSS for styling and JavaScript for handling user interactions and calculations.

Uploaded by

4b5qxp88b8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views2 pages

Calc.html

The document is an HTML code for a simple calculator web application. It includes a user interface with buttons for numbers, operations, and functionalities to clear the input and calculate results. The design utilizes CSS for styling and JavaScript for handling user interactions and calculations.

Uploaded by

4b5qxp88b8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Calculadora</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f3f3f3;
}
.calculadora {
background: #222;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.tela {
width: 100%;
height: 50px;
font-size: 24px;
margin-bottom: 10px;
padding: 10px;
text-align: right;
background: #fff;
border: none;
border-radius: 5px;
}
.botoes {
display: grid;
grid-template-columns: repeat(4, 60px);
gap: 10px;
}
button {
height: 60px;
font-size: 20px;
border: none;
border-radius: 5px;
background: #444;
color: white;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #666;
}
.igual {
grid-column: span 2;
background: #ff9500;
}
.limpar {
background: #d11a2a;
}
</style>
</head>
<body>
<div class="calculadora">
<input type="text" id="tela" class="tela" disabled>
<div class="botoes">
<button onclick="limpar()" class="limpar">C</button>
<button onclick="adicionar('/')">/</button>
<button onclick="adicionar('*')">*</button>
<button onclick="adicionar('-')">-</button>

<button onclick="adicionar('7')">7</button>
<button onclick="adicionar('8')">8</button>
<button onclick="adicionar('9')">9</button>
<button onclick="adicionar('+')">+</button>

<button onclick="adicionar('4')">4</button>
<button onclick="adicionar('5')">5</button>
<button onclick="adicionar('6')">6</button>
<button onclick="calcular()" class="igual">=</button>

<button onclick="adicionar('1')">1</button>
<button onclick="adicionar('2')">2</button>
<button onclick="adicionar('3')">3</button>
<button onclick="adicionar('0')">0</button>
<button onclick="adicionar('.')">.</button>
</div>
</div>

<script>
let tela = document.getElementById('tela');

function adicionar(valor) {
tela.value += valor;
}

function limpar() {
tela.value = '';
}

function calcular() {
try {
tela.value = eval(tela.value);
} catch {
tela.value = 'Erro';
}
}
</script>
</body>
</html>

You might also like