Calculadora Científica:
Aprenda a criar uma poderosa calculadora científica com este tutorial passo a passo, utilizando HTML, CSS e JavaScript.
Este projeto consiste em uma calculadora científica linda e funcional que pode realizar funções como raiz quadrada, exponenciação, e funções trigonométricas (seno, cosseno, tangente) além das operações aritméticas básicas.
Veja a Calculadora Científica em funcionamento neste link. Calculadora Científica.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora Científica</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form name="calcul">
<table align="center">
<tr>
<td colspan="4"><input type="text" name="result" placeholder="0" readonly></td>
</tr>
<tr>
<td><button type="button" onclick="sin()">sin</button></td>
<td><button type="button" onclick="cos()">cos</button></td>
<td><button type="button" onclick="tan()">tan</button></td>
<td><button type="button" class="clear" onclick="remv()">C</button></td>
</tr>
<tr>
<td><button type="button" onclick="square()">x²</button></td>
<td><button type="button" onclick="cubed()">x³</button></td>
<td><button type="button" onclick="sqrt2()">√</button></td>
<td><button type="button" onclick="sqrt3()">∛</button></td>
</tr>
<tr>
<td><button type="button" value="1" onclick="number(value)">1</button></td>
<td><button type="button" value="2" onclick="number(value)">2</button></td>
<td><button type="button" value="3" onclick="number(value)">3</button></td>
<td><button type="button" onclick="BACKSPC()">←</button></td>
</tr>
<tr>
<td><button type="button" value="4" onclick="number(value)">4</button></td>
<td><button type="button" value="5" onclick="number(value)">5</button></td>
<td><button type="button" value="6" onclick="number(value)">6</button></td>
<td><button type="button" value="-" onclick="number(value)">-</button></td>
</tr>
<tr>
<td><button type="button" value="7" onclick="number(value)">7</button></td>
<td><button type="button" value="8" onclick="number(value)">8</button></td>
<td><button type="button" value="9" onclick="number(value)">9</button></td>
<td><button type="button" value="/" onclick="number(value)">/</button></td>
</tr>
<tr>
<td><button type="button" value="." onclick="number(value)">.</button></td>
<td><button type="button" value="0" onclick="number(value)">0</button></td>
<td><button type="button" value="*" onclick="number(value)">*</button></td>
<td><button type="button" onclick="percent()">%</button></td>
</tr>
<tr>
<td colspan="2"><button type="button" onclick="equal()" class="equal">=</button></td>
<td><button type="button" value="+" onclick="number(value)">+</button></td>
</tr>
</table>
</form>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
table {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
width: 94%;
height: 60px;
font-size: 26px;
margin-bottom: 20px;
text-align: right;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #e6e6e6;
color: #333;
font-weight: bold;
}
button {
width: 85%;
height: 50px;
font-size: 18px;
margin: 5px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
button.clear {
background-color: #dc3545;
}
button.clear:hover {
background-color: #c82333;
}
button.equal {
background-color: #28a745;
}
button.equal:hover {
background-color: #218838;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
function sin() {
document.calcul.result.value = Math
.sin(document.calcul.result.value);
}
function cos() {
document.calcul.result.value = Math
.cos(document.calcul.result.value);
}
function tan() {
document.calcul.result.value = Math
.tan(document.calcul.result.value);
}
function BACKSPC() {
var a = document.calcul.result.value;
document.calcul.result.value = a
.substr(0, a.length - 1);
}
function square() {
document.calcul.result.value = Math
.pow(document.calcul.result.value,
2);
}
function cubed() {
document.calcul.result.value = Math
.pow(document.calcul.result.value,
3);
}
function sqrt2() {
document.calcul.result.value = Math
.sqrt(document.calcul.result.value);
}
function sqrt3() {
document.calcul.result.value = Math
.cbrt(document.calcul.result.value);
}
function number(value) {
document.calcul.result.value += value;
}
function remv() {
document.calcul.result.value = "";
}
function percent() {
document.calcul.result.value =
document.calcul.result.value / 100;
}
function equal() {
try {
document.calcul.result.value = eval(
document.calcul.result.value);
} catch (e) {
document.calcul.result.value =
"Erro";
}
}
4° Passo: Testar o Projeto!
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Se preferir os códigos estão no meu Repositório no GitHub.
Resultado vai ser igual o da imagem abaixo:
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando!
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!