Códigos necessários para o projeto:
Neste artigo, será disponibilizado para você os códigos que serão utilizados como base no nosso projeto de Calculadora, baseado em nossa Playlist do YouTube.
Para realização deste projeto, será necessário que você tenha conhecimentos básicos de HTML, e JavaScript. É Interessante que você tenha acompanhado a nossa Playlist no YouTube. Playlist JavaScript Básico
Copie o código HTML que será utilizado no projeto:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calculadora</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="container areaCalculadora">
<div class="row">
<input id="inputDisplayResultado" type="text" value="" readonly />
</div>
<div class="row justify-content-end">
<div class="col-3">
<button id="btnLimpar" type="button" class="btn btn-outline-warning">C</button>
</div>
</div>
<div class="row">
<div class="col-3">
<button id="btnValor7" type="button" class="btn btn-outline-primary">7</button>
</div>
<div class="col-3">
<button id="btnValor8" type="button" class="btn btn-outline-primary">8</button>
</div>
<div class="col-3">
<button id="btnValor9" type="button" class="btn btn-outline-primary">9</button>
</div>
<div class="col-3">
<button id="btnDividir" type="button" class="btn btn-outline-success">/</button>
</div>
</div>
<div class="row">
<div class="col-3">
<button id="btnValor4" type="button" class="btn btn-outline-primary">4</button>
</div>
<div class="col-3">
<button id="btnValor5" type="button" class="btn btn-outline-primary">5</button>
</div>
<div class="col-3">
<button id="btnValor6" type="button" class="btn btn-outline-primary">6</button>
</div>
<div class="col-3">
<button id="btnMultiplicar" type="button" class="btn btn-outline-success">*</button>
</div>
</div>
<div class="row">
<div class="col-3">
<button id="btnValor1" type="button" class="btn btn-outline-primary">1</button>
</div>
<div class="col-3">
<button id="btnValor2" type="button" class="btn btn-outline-primary">2</button>
</div>
<div class="col-3">
<button id="btnValor3" type="button" class="btn btn-outline-primary">3</button>
</div>
<div class="col-3">
<button id="btnSubtrair" type="button" class="btn btn-outline-success">-</button>
</div>
</div>
<div class="row">
<div class="col-3">
<button id="btnValor0" type="button" class="btn btn-outline-primary">0</button>
</div>
<div class="col-3">
<button id="btnPonto" type="button" class="btn btn-outline-success">.</button>
</div>
<div class="col-3">
<button id="btnResultado" type="button" class="btn btn-outline-success">=</button>
</div>
<div class="col-3">
<button id="btnSoma" type="button" class="btn btn-outline-success">+</button>
</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Você pode utilizar também este código CSS para formatar os botões e campo de preenchimento da sua calculadora:
#inputDisplayResultado{
font-size: 24px;
width: 100%;
text-align: right;
}
.areaCalculadora{
max-width: 600px;
margin: 0 auto;
}
.row div{
padding: 0
}
.row div button{
width: 100%;
}
A partir deste código, você deverá criar um arquivo chamado main.js e nele será inserida a lógica necessária para o funcionamento da calculadora.
Dicas:
- Você pode anexar eventos aos botões para que algo ocorra quando clicar neles;
- Comece criando funções que realizam as operações aritméticas da calculadora;
- Lembre que os números não podem ser divididos por zero;
- Observe que quando você capturar valores do HTML, eles virão como STRINGS.
Bons estudos e confira nossa playlist para saber as respostas!