Como Criar uma Calculadora Usando HTML
Se você precisa de uma calculadora rápida e simples com funcionalidades básicas como adição, subtração, multiplicação e divisão, basta usar o código abaixo. Você pode inserir esse código HTML no seu arquivo HTML e verificar como tudo funciona. O código contém comentários para que você entenda como tudo opera e possa fazer alterações no estilo e no layout deste aplicativo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
/* Style for the entire body, centering the calculator */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
/* Style for the calculator container */
.calculator {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Style for the display area */
.display {
width: 160px;
height: 40px;
text-align: right;
margin-bottom: 10px;
font-size: 1.5em;
padding: 5px;
}
/* Grid layout for the calculator buttons */
.buttons {
display: grid;
grid-template-columns: repeat(4, 40px);
gap: 10px;
}
/* Style for the buttons */
.buttons button {
width: 40px;
height: 40px;
font-size: 1.2em;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
cursor: pointer;
}
/* Hover effect for the buttons */
.buttons button:hover {
background-color: #45a049;
}
/* Special style for the equals button */
.buttons .equals {
grid-column: span 2; /* Spans over 2 columns */
background-color: #2196F3;
}
/* Hover effect for the equals button */
.buttons .equals:hover {
background-color: #0b7dda;
}
</style>
</head>
<body>
<div class="calculator">
<!-- Input field to display the calculator results -->
<input type="text" class="display" id="display" disabled>
<!-- Calculator buttons laid out in a grid -->
<div class="buttons">
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="setOperator('+')">+</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="setOperator('-')">-</button>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="setOperator('*')">*</button>
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber('0')">0</button>
<button onclick="calculate()" class="equals">=</button>
<button onclick="setOperator('/')">/</button>
</div>
</div>
<script>
/* Variables to store current input, previous input, and operator */
let currentInput = '';
let operator = '';
let previousInput = '';
/* Function to append numbers to the current input */
function appendNumber(number) {
currentInput += number; // Append the clicked number to current input
document.getElementById('display').value = currentInput; // Update the display
}
/* Function to set the operator and prepare for the next input */
function setOperator(op) {
operator = op; // Store the chosen operator
previousInput = currentInput; // Store the current input as previous
currentInput = ''; // Clear the current input for the next number
}
/* Function to perform the calculation based on the operator */
function calculate() {
let result;
// Perform the appropriate operation based on the operator
if (operator === '+') {
result = parseFloat(previousInput) + parseFloat(currentInput);
} else if (operator === '-') {
result = parseFloat(previousInput) - parseFloat(currentInput);
} else if (operator === '*') {
result = parseFloat(previousInput) * parseFloat(currentInput);
} else if (operator === '/') {
result = parseFloat(previousInput) / parseFloat(currentInput);
}
document.getElementById('display').value = result; // Display the result
currentInput = result.toString(); // Store the result as the new current input
operator = ''; // Reset the operator
}
/* Function to clear the display and reset the calculator */
function clearDisplay() {
currentInput = '';
previousInput = '';
operator = '';
document.getElementById('display').value = ''; // Clear the display
}
</script>
</body>
</html>Explicação das principais seções
Para ajudá-lo a gerenciar e ajustar a calculadora, escrevemos algumas orientações adicionais sobre suas funcionalidades:
Estrutura HTML
- A calculadora está contida dentro de um elemento div com a classe calculator.
- Um elemento input é usado como o visor da calculadora e está desativado para que os usuários não possam digitar manualmente.
- Os botões são organizados em um formato de grade dentro da div buttons e dispostos para parecerem com uma calculadora.
Estilização CSS
- O corpo da página é estilizado para centralizar a calculadora vertical e horizontalmente.
- A própria calculadora tem um fundo branco com cantos arredondados e sombra para dar um efeito de cartão.
- Os botões são estilizados com tamanho, cor e efeito de hover consistentes para fornecer feedback visual.
Funcionalidade JavaScript
- appendNumber() adiciona números ao visor quando um usuário clica em um botão.
- setOperator() armazena o operador selecionado (+, -, *, /) e salva a entrada atual como previousInput.
- calculate() executa a operação matemática apropriada com base no operador selecionado e exibe o resultado.
- clearDisplay() redefine a calculadora, limpando todas as entradas e o visor.
Esta é uma calculadora simples que utiliza apenas HTML, CSS e JS básicos. Portanto, seus recursos visuais e funcionalidades são bastante limitados.
Como Criar uma Calculadora para Tarefas Complexas
Nossa calculadora simples em HTML acima é suficiente para operações básicas e tem um design funcional e limpo. É útil para diversão ou para acompanhar seu progresso no aprendizado de programação. Mas quando se trata de tarefas mais profissionais ou complexas, você pode precisar de algo mais avançado. Seja para planejar um orçamento familiar ou organizar uma viagem, recursos aprimorados de cálculo podem fazer uma grande diferença. Então, quais são suas opções?
Aprofunde seus conhecimentos em programação
A melhor maneira de lidar com projetos mais complexos é aprofundar-se em HTML, CSS e JavaScript. Com um conhecimento avançado, você poderá criar cálculos com múltiplos campos, opções, condições e variáveis. Nesse ponto, suas habilidades de programação irão muito além da construção de uma simples calculadora em HTML. Ainda há um longo caminho a percorrer.
Experimente um widget de Calculadora sem código para HTML
Se suas habilidades de programação ainda não são tão avançadas e você precisa de uma solução poderosa agora, temos boas notícias para você. Você pode criar um widget de Calculadora em HTML personalizado sem precisar programar nada. Você pode adicionar diversos campos, ajustar condições e nomear tudo de forma clara para o seu cenário. Basta testá-lo no editor abaixo antes de continuarmos.
Criando um Widget de Calculadora em HTML: Sem Programação
Nesta seção, descreveremos em mais detalhes como criar seu próprio widget de Calculadora em HTML. Além disso, ele pode ser facilmente incorporado a qualquer site e funcionará imediatamente. Vamos ver como tudo acontece.
- Escolha um modelo adequado. Você pode continuar no editor que viu acima ou explorar nossa lista de modelos de Calculadora pré-projetados e escolher a opção mais relevante para o seu caso.
- Adicione os campos necessários. O widget oferece controles deslizantes, números, opções, menus suspensos e outros campos para ajudar a representar com precisão seu cenário.
- Personalize o estilo. Use a guia ‘Estilo’ no editor para decorar sua calculadora e ajustá-la ao seu gosto, marca ou cores do site.
- Ajuste outras configurações. Acesse a guia ‘Configurações’ para finalizar seu widget, definindo separadores e outras regras para sua calculadora. Se tiver ideias próprias em HTML e JS, pode inseri-las aqui.
- Salve e comece a usar. Quando estiver satisfeito com o resultado, publique seu widget para obter o código HTML da sua calculadora. Você verá algumas linhas de código que podem ser adicionadas a qualquer plataforma de site.
Quando estiver em um site, você pode usar este widget de Calculadora em HTML pelo tempo que precisar. Planeje seus custos ou economias, use-o para promover seus serviços comerciais ou adicione interatividade ao seu blog. Agora você pode ler guias rápidos sobre como adicionar sua Calculadora nas plataformas CMS mais populares ou encontrar seu construtor de sites na lista de plataformas.
Exemplos de Calculadoras em HTML
Aqui estão apenas alguns exemplos do que você pode criar sem precisar programar, em apenas 5-10 minutos. Basta ter seu caso de uso em mente e tentar incluir todas as ideias no formulário da calculadora ao trabalhar no editor.
Calculadora de Hipoteca
Ajude os usuários a estimar facilmente seus pagamentos mensais de hipoteca com base no valor do empréstimo, taxa de juros e prazo. Experimente nossa Calculadora de Hipoteca personalizável.
Calculadora de ROI
Permita que empresas calculem facilmente o retorno potencial sobre seus investimentos. Confira nosso modelo de Calculadora de ROI.
Calculadora de IMC
Calcule o Índice de Massa Corporal com base em altura e peso para fornecer informações valiosas sobre a saúde. Comece agora com nossa Calculadora de IMC.
Considerações Finais
Concluindo, mostramos como criar uma calculadora simples em HTML, com um código pronto para ajudá-lo a começar. Embora seja perfeita para tarefas básicas e aprendizado, para cálculos mais avançados e cenários complexos, um widget versátil é a melhor opção.
Nosso widget se integra perfeitamente a qualquer site e atende a uma ampla variedade de casos de uso populares, oferecendo funcionalidade e flexibilidade aprimoradas. Seja para gerenciar finanças ou cálculos mais detalhados, nossa solução oferece as ferramentas necessárias para facilitar seu trabalho.
Editor: Crie uma Calculadora em HTML Gratuitamente
Pronto para criar sua própria calculadora HTML personalizada e explorar todos os recursos? Experimente o editor de Calculadora e veja o widget em ação!
Entre em Contato
Esperamos que este guia tenha sido útil para você! Se deseja criar uma calculadora personalizada para seu site, entre em contato. Nossa missão na Elfsight é proporcionar uma experiência sem complicações com nossos widgets sem código.
Faça parte da nossa Comunidade, onde ideias e insights são sempre compartilhados. Suas sugestões são bem-vindas! Deixe-as na nossa Lista de Desejos!