Como criar uma calculadora simples usando HTML, CSS e JavaScript
A melhor forma de aprender JavaScript é criar projectos. Se quiser tornar-se um bom programador Web, tem de começar a criar projectos o mais rapidamente possível. Pode começar por criar projectos de nível iniciante, como uma calculadora simples, um relógio digital ou um cronómetro.
Utilizando tecnologias Web fundamentais, como HTML, CSS e JavaScript, é possível construir facilmente uma calculadora rudimentar capaz de efetuar operações aritméticas elementares, incluindo adição, subtração, multiplicação e divisão.
Características da calculadora
O objetivo desta tarefa é criar uma calculadora avançada com as seguintes capacidades:
O dispositivo é capaz de efetuar operações matemáticas fundamentais como a adição, a subtração, a divisão e a multiplicação.
⭐ Efectua operações decimais.
A calculadora deve apresentar o infinito como resultado quando tenta calcular o resultado da divisão de qualquer quantidade por um valor zero.
O motor de busca não dará resposta se a expressão introduzida for considerada inválida. A título de exemplo, introduzir “5\+\\+9” não produzirá resultados.
A função “Clear Screen” (Limpar ecrã) permite a remoção imediata de todo o conteúdo do ecrã, à sua discrição.
O código-fonte utilizado neste trabalho foi disponibilizado através de um repositório GitHub, que lhe concede permissão para o utilizar gratuitamente ao abrigo dos termos da licença MIT. Caso deseje examinar um exemplo operacional deste projeto, visite a nossa demonstração.
Componentes da calculadora
A calculadora é constituída pelos seguintes componentes:
O conjunto de operações matemáticas compreende a adição representada pelo símbolo “\+”, a subtração denotada por “-”, a multiplicação indicada por “*” e a divisão significada por “/”.
O botão de dígitos e decimais é constituído por números que vão de 0 a 9, bem como pelo símbolo de ponto decimal (.).
O ecrã de visualização apresenta uma representação visual da expressão matemática e do seu resultado correspondente.
O botão “Limpar ecrã” é uma ferramenta de fácil utilização que lhe permite apagar todas as expressões matemáticas actuais no visor, assegurando um novo quadro para os seus cálculos futuros.
O botão “Calcular” é um comando que avalia uma expressão matemática introduzida, resultando num valor de saída apresentado.
Estrutura de pastas do projeto Calculadora
Para criar uma aplicação Web de calculadora interactiva, estabeleça um diretório principal designado por “Calculadora”. Esta diretoria conterá vários componentes essenciais, tais como ficheiros HTML, CSS e JavaScript. Os nomes destes ficheiros podem ser escolhidos à sua discrição; no entanto, seria prudente aderir às convenções de nomenclatura estabelecidas para cada tipo de ficheiro respetivo. De acordo com as práticas típicas, o ficheiro HTML deve ter o título “index.html”, enquanto o ficheiro CSS que o acompanha deve ser rotulado “styles.css” e o ficheiro JavaScript deve ser chamado “script.js”. Recomenda-se geralmente o cumprimento das normas de nomenclatura JavaScript e HTML/CSS para garantir a consistência e facilitar a colaboração entre os programadores.
Adicionar estrutura à calculadora utilizando HTML
Abra o ficheiro “index.html” e insira o código HTML fornecido para a calculadora, como se segue:
<!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 clears all the values -->
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="\\+" onclick="display('\\+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>
<!-- calculate() function evaluates the mathematical expression -->
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
A presente tarefa utiliza atag para estabelecer a configuração geral da calculadora. Dentro deste, existem cinco etiquetas, cada uma representando uma secção horizontal da calculadora. Cada uma tem a sua própria tag correspondente, dentro da qual residem as tags que englobam o ecrã e as teclas de função da calculadora.
Estilizar a calculadora utilizando CSS
Abra o ficheiro “styles.css” e insira o código CSS subsequente para implementar uma calculadora no site:
@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%;
}
#btn {
background-color: #fb0066;
}
input[type=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;
}
input:active[type=button] {
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 código fornecido define uma etiqueta HTML personalizada, “calc”, que representa uma interface de calculadora, incluindo botões para várias operações matemáticas, como adição, subtração, multiplicação, divisão, limpar e igual a. Também inclui campos de entrada para dois números e um sinal de igual. A etiqueta do botão é apresentada na parte superior de cada botão, utilizando o posicionamento absoluto dentro do seu próprio elemento div, que tem um raio de preenchimento e de contorno aplicado. Além disso, utiliza classes CSS do Tailwind como flex, px-4, py-2, rounded-md, bg-white, text-red-500, hover:bg-gray-100, focus:outline-none e transition para estilizar o aspeto da etiqueta calc.Por fim, importa a família de fontes Orbitron do Google Fonts usando o comando “@import
Adicionar funcionalidade à calculadora usando JavaScript
Modifique o ficheiro “script.js” existente incorporando o código JavaScript fornecido, para melhorar a funcionalidade da calculadora básica da seguinte forma:
// This function clears all the values
function clearScreen() {
document.getElementById("result").value = "";
}
// This function displays the values
function display(value) {
document.getElementById("result").value \\+= value;
}
// This function evaluates the expression and returns the result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
Compreender o código JavaScript
As funções acima mencionadas dotam a calculadora de capacidades específicas, incluindo o apagamento do ecrã, a apresentação visual do resultado e a execução de operações matemáticas, respetivamente.
Apagar valores
A função clearScreen() utiliza o identificador do elemento com o ID especificado, conhecido como “resultado”, para aceder ao Document Object Model (DOM) e modificar o seu conteúdo, definindo-o como uma cadeia vazia. Esse processo é comumente chamado de manipulação do DOM. Várias partes de uma página Web podem ser acedidas e modificadas através da utilização de selectores DOM, que são códigos específicos que identificam determinados elementos na hierarquia DOM com o objetivo de alterar as suas propriedades ou conteúdos.
function clearScreen() {
document.getElementById("result").value = "";
}
Visualizar valores
A implementação da função display() implica aceder ao Document Object Model (DOM) através do identificador associado à opção selecionada e, posteriormente, associar o valor correspondente ao elemento identificado no DOM.
function display(value) {
document.getElementById("result").value \\+= value;
}
Avaliação de expressões
A função calculate() obtém o valor avaliado de uma expressão acedendo ao Modelo de Objectos de Documento (DOM) utilizando o identificador de um elemento específico e, em seguida, utilizando a função eval() para avaliar a expressão. Subsequentemente, o resultado calculado é reatribuído ao elemento designado.
A função JavaScript evaluate() tem por objetivo calcular uma determinada expressão, que é fornecida como entrada para a função, e, subsequentemente, produzir o resultado derivado dessa expressão.
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
Desenvolver projectos de programação interessantes
Uma forma eficaz de melhorar a proficiência em programação é desenvolver projectos, quer se trate de um principiante ou de um regresso à programação após um longo hiato. A conclusão e implementação bem sucedida de aplicações funcionais, incluindo aquelas com funcionalidade básica, pode aumentar a auto-confiança.
De facto, existe uma pletora de empreendimentos acessíveis que vão desde actividades recreativas como o xadrez e o jogo do galo a ferramentas práticas como listas de tarefas, conversores de peso e temporizadores de contagem decrescente que se podem experimentar.
Mergulhe nestes projectos para melhorar as suas competências de desenvolvimento, adquirindo experiência prática através da aprendizagem prática.