Calculadora Simples:
Aprenda a criar uma calculadora simples e funcional com este tutorial passo a passo. Aprenda fazer usando as linguagens HTML, CSS e JavaScript.
Este projeto é muito bom pra quem está aprendendo linguagens de programação, principalmente nestas 3 linguagens: HTML, CSS e JavaScript.
Este projeto consiste em uma calculadora que faz qualquer conta , sendo adição, subtração, divisão, multiplicação e porcentagem.
Veja a Calculadora em funcionamento neste link. Calculadora.
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</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="calculator">
<div class="result">0</div>
<div class="buttons">
<button class="bg-gray">C</button>
<button class="bg-gray">±</button>
<button class="bg-gray">%</button>
<button class="bg-orange">÷</button>
<button class="bg-light-gray">7</button>
<button class="bg-light-gray">8</button>
<button class="bg-light-gray">9</button>
<button class="bg-orange">×</button>
<button class="bg-light-gray">4</button>
<button class="bg-light-gray">5</button>
<button class="bg-light-gray">6</button>
<button class="bg-orange">-</button>
<button class="bg-light-gray">1</button>
<button class="bg-light-gray">2</button>
<button class="bg-light-gray">3</button>
<button class="bg-orange">+</button>
<button class="bg-light-gray button-zero">0</button>
<button class="bg-light-gray">,</button>
<button class="bg-orange">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f7f7f7;
}
.calculator {
width: 300px;
background-color: #000000;
border-radius: 10px;
box-shadow: 0px 4px 4px #00000040;
font-family: "Helvetica Neue", sans-serif;
overflow: hidden;
}
.result {
height: 75px;
padding: 20px;
text-align: right;
color: #fff;
font-size: 2.5rem;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1px;
}
.buttons button {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 60px;
color: #fff;
font-size: 1.5rem;
font-weight: bold;
border: none;
outline: none;
cursor: pointer;
}
.button-zero {
grid-column: span 2;
}
.bg-gray {
background-color: #585858;
}
.bg-light-gray {
background-color: #747474;
}
button:active {
opacity: 0.9;
}
.bg-orange {
background-color: #FF0000;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
const result = document.querySelector(
".result");
const buttons = document
.querySelectorAll(".buttons button");
let currentNumber = "";
let firstOperand = null;
let operator = null;
let restart = false;
function updateResult(originClear =
false) {
result.innerText = originClear ? 0 :
currentNumber.replace(".", ",");
}
function addDigit(digit) {
if (digit === "," && (currentNumber
.includes(",") || !currentNumber))
return;
if (restart) {
currentNumber = digit;
restart = false;
} else {
currentNumber += digit;
}
updateResult();
}
function setOperator(newOperator) {
if (currentNumber) {
calculate();
firstOperand = parseFloat(
currentNumber.replace(",", "."));
currentNumber = "";
}
operator = newOperator;
}
function calculate() {
if (operator === null ||
firstOperand === null) return;
let secondOperand = parseFloat(
currentNumber.replace(",", "."));
let resultValue;
switch (operator) {
case "+":
resultValue = firstOperand +
secondOperand;
break;
case "-":
resultValue = firstOperand -
secondOperand;
break;
case "×":
resultValue = firstOperand *
secondOperand;
break;
case "÷":
resultValue = firstOperand /
secondOperand;
break;
default:
return;
}
if (resultValue.toString().split(".")[
1] ? .length > 5) {
currentNumber = parseFloat(
resultValue.toFixed(5)).toString();
} else {
currentNumber = resultValue
.toString();
}
operator = null;
firstOperand = null;
restart = true;
percentageValue = null;
updateResult();
}
function clearCalculator() {
currentNumber = "";
firstOperand = null;
operator = null;
updateResult(true);
}
function setPercentage() {
let result = parseFloat(
currentNumber) / 100;
if (["+", "-"].includes(operator)) {
result = result * (firstOperand ||
1);
}
if (result.toString().split(".")[1] ?
.length > 5) {
result = result.toFixed(5)
.toString();
}
currentNumber = result.toString();
updateResult();
}
buttons.forEach((button) => {
button.addEventListener("click",
() => {
const buttonText = button
.innerText;
if (/^[0-9,]+$/.test(
buttonText)) {
addDigit(buttonText);
} else if (["+", "-", "×", "÷"]
.includes(buttonText)) {
setOperator(buttonText);
} else if (buttonText === "=") {
calculate();
} else if (buttonText === "C") {
clearCalculator();
} else if (buttonText === "±") {
currentNumber = (
parseFloat(currentNumber ||
firstOperand) * -1
).toString();
updateResult();
} else if (buttonText === "%") {
setPercentage();
}
});
});
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!
Comentários
Postar um comentário
Obrigado pelo seu feedback!