Como construir uma calculadora simples usando HTML, CSS e JavaScript

junho 22, 2021 gurinho

A melhor maneira de aprender JavaScript é construir projetos. Se você deseja se tornar um bom desenvolvedor web, você precisa começar a criar o mais rápido possível. Você pode começar criando projetos de nível iniciante, como uma calculadora simples, relógio digital, cronômetro, etc.

Neste artigo, você aprenderá como fazer uma calculadora simples usando HTML, CSS e JavaScript. Esta calculadora pode realizar operações matemáticas básicas como adição, subtração, multiplicação e divisão.

Vamos começar.

Componentes da Calculadora

A calculadora consiste nos seguintes componentes:

Operadores matemáticos : adição (+), subtração (-), multiplicação (*) e divisão (/).

Botão de dígitos e decimais : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,. .

Tela de Exibição : Mostra a expressão matemática e o resultado.

Botão Limpar tela : Limpa todos os valores matemáticos.

Botão Calcular (=) : avalia a expressão matemática e retorna o resultado.

Estrutura da pasta do projeto da calculadora

Crie uma pasta raiz que contenha os arquivos HTML, CSS e JavaScript. Você pode nomear os arquivos como quiser. Aqui, a pasta raiz é chamada de Calculadora . De acordo com a convenção de nomenclatura padrão, os arquivos HTML, CSS e JavaScript são denominados index.html , styles.css e script.js, respectivamente.

Código HTML

Abra o arquivo index.html e cole o seguinte código:

Relacionado: Passos para compreender o código HTML básico

 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title> Simple Calculator using HTML, CSS and JavaScript </title>
 <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 <table class = "calculator" >
 <tr>
 <td colspan = "3"> <input class = "display-box" type = "text" id = "result" disabled /> </td>
 <!-- clearScreen() function clear all the values -->
 <td> <input class = "button" type = "button" value = "C" onclick = "clearScreen()" style = "background-color: #fb0066;" /> </td>
 </tr>
 <tr>
 <!-- display() function display the value of clicked button -->
 <td> <input class = "button" type = "button" value = "1" onclick = "display('1')" /> </td>
 <td> <input class = "button" type = "button" value = "2" onclick = "display('2')" /> </td>
 <td> <input class = "button" type = "button" value = "3" onclick = "display('3')" /> </td>
 <td> <input class = "button" type = "button" value = "/" onclick = "display('/')" /> </td>
 </tr>
 <tr>
 <td> <input class = "button" type = "button" value = "4" onclick = "display('4')" /> </td>
 <td> <input class = "button" type = "button" value = "5" onclick = "display('5')" /> </td>
 <td> <input class = "button" type = "button" value = "6" onclick = "display('6')" /> </td>
 <td> <input class = "button" type = "button" value = "-" onclick = "display('-')" /> </td>
 </tr>
 <tr>
 <td> <input class = "button" type = "button" value = "7" onclick = "display('7')" /> </td>
 <td> <input class = "button" type = "button" value = "8" onclick = "display('8')" /> </td>
 <td> <input class = "button" type = "button" value = "9" onclick = "display('9')" /> </td>
 <td> <input class = "button" type = "button" value = "+" onclick = "display('+')" /> </td>
 </tr>
 <tr>
 <td> <input class = "button" type = "button" value = "." onclick = "display('.')" /> </td>
 <td> <input class = "button" type = "button" value = "0" onclick = "display('0')" /> </td>
 <!-- calculate() function evaluate the mathematical expression -->
 <td> <input class = "button" type = "button" value = "=" onclick = "calculate()" style = "background-color: #fb0066;" /> </td>
 <td> <input class = "button" type = "button" value = "*" onclick = "display('*')" /> </td>
 </tr>
 </table>
 <script type="text/javascript" src="script.js"></script>
 </body>
 </html>

A estrutura da calculadora é criada usando a tag <table> . A tag <table> contém cinco linhas que representam cinco seções horizontais da calculadora. Cada linha é criada usando a tag <tr> . Cada tag <tr> contém tags <td> (dados da tabela) que contêm a tela de exibição e os botões da calculadora.

Código CSS

Abra o arquivo styles.css e cole o seguinte código:

Relacionado: Exemplos de código CSS simples que você pode aprender em 10 minutos

 @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
 .calculator {
 padding: 10px;
 border-radius: 1em;
 height: 380px;
 width: 400px;
 margin: auto;
 background-color: #191b28;
 box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
 }
 .display-box {
 font-family: 'Orbitron', sans-serif;
 background-color: #dcdbe1;
 border: solid black 0.5px;
 color: black;
 border-radius: 5px;
 width: 100%;
 height: 65%;
 }
 .button {
 font-family: 'Orbitron', sans-serif;
 background-color: #64278f;
 color: white;
 border: solid black 0.5px;
 width: 100%;
 border-radius: 5px;
 height: 70%;
 outline: none;
 }
 .button:active {
 background: #e5e5e5;
 -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
 -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
 box-shadow: inset 0px 0px 5px #c1c1c1;
 }

O CSS acima é usado para estilizar a calculadora. O seletor .class é usado para selecionar elementos com um atributo de classe específico. Os seletores de classe .calculator , .display-box e .button são usados para estilizar a estrutura da tabela, a tela de exibição e os botões da calculadora, respectivamente. @import é usado para importar a família de fontes Orbitron das fontes do Google.

Relacionado: Como usar a sombra da caixa CSS: truques e exemplos

Código JavaScript

Abra o arquivo script.js e cole o seguinte código:

 // This function clear all the values
 function clearScreen() {
 document.getElementById("result").value = "";
 }

 // This function display values
 function display(value) {
 document.getElementById("result").value += value;
 }
 // This function evaluates the expression and return result
 function calculate() {
 var p = document.getElementById("result").value;
 var q = eval(p);
 document.getElementById("result").value = q;
 }

Compreendendo o código JavaScript

As funções clearScreen () , display () e calcule () são usadas para adicionar funcionalidade à Calculadora.

Valores de Compensação

A função clearScreen () acessa o DOM usando o id do resultado e limpa seu valor atribuindo a ele uma string vazia.

 function clearScreen() {
 document.getElementById("result").value = "";
 }

Exibindo Valores

A função display () acessa o DOM usando o id do resultado e anexa o valor do botão clicado ao resultado.

 function display(value) {
 document.getElementById("result").value += value;
 }

Avaliando Expressão

A função calcular () acessa o DOM usando o id do resultado e avalia a expressão usando a função eval () . O valor avaliado da expressão é novamente atribuído ao resultado.

Nota : A função eval () é usada em JavaScript para avaliar a expressão passada a ele como um parâmetro. Ele retorna o resultado avaliado da expressão matemática.

 function calculate() {
 var p = document.getElementById("result").value;
 var q = eval(p);
 document.getElementById("result").value = q;
 }

Se você quiser dar uma olhada no código-fonte completo usado neste artigo, aqui está o repositório GitHub . Além disso, se quiser dar uma olhada na versão ao vivo deste projeto, você também pode conferir por meio do GitHub .

Relacionado: Idéias de projetos Python adequadas para iniciantes

Desenvolva projetos interessantes de programação

Você pode elevar suas habilidades de engenharia ao próximo nível desenvolvendo projetos. Quer você seja um iniciante ou esteja voltando a programar depois de algum tempo, o desenvolvimento de projetos pode ser uma grande ajuda para aumentar sua confiança.

Você pode experimentar muitos projetos simples como um jogo de xadrez, aplicativo de lista de tarefas, ferramenta de conversão de peso, jogo Tic Tac Toe, jogo Rock Paper Scissors, Web Scraper com Python, Sistema de login, Chatbot, jogo Snake, jogo Tetris, Calculadora de dicas , Relógio de contagem regressiva, encurtador de URL, etc.

Suje as mãos a esses projetos e torne-se um desenvolvedor melhor.