Construa uma calculadora usando JavaScript, HTML e CSS em 2022
Publicados: 2021-01-02Esteja você aprendendo uma nova linguagem de programação ou uma estrutura de desenvolvimento, chega um momento em que você precisa trabalhar em projetos do mundo real. À medida que você avança no assunto, você deve testar suas habilidades e compreensão do idioma. Construir um projeto usando tecnologia ou estrutura recém-aprendida é uma boa ideia. Há muitas ideias disponíveis on-line sobre o que você deve criar com seu conhecimento.
As sugestões mais comumente encontradas incluem uma Calculadora em JavaScript e uma Lista de Tarefas. Embora pareçam fáceis, pode ser uma tarefa e tanto quando você começa a trabalhar nesses projetos. Aqui, vamos torná-lo fácil e lógico, bem como agitado para você.
Vamos começar?
Índice
Lógica antes de tudo
Quando você começa a trabalhar em um projeto, seja uma calculadora ou uma lista de tarefas, a primeira coisa que você precisa identificar é a lógica.
Como funciona a calculadora?
- Você adiciona dois ou mais números (qualquer número de dígitos) usando as teclas numéricas fornecidas na calculadora.
- Você então executa funções aritméticas fundamentais, ou seja, adição, subtração, multiplicação e divisão nesses números.
- A calculadora deve ser capaz de calcular e fornecer as soluções corretas.
Esta é a premissa da sua ferramenta calculadora. Então você precisa de um teclado, uma unidade de exibição e elementos de função.
O botão “igual a” avaliará a resposta enquanto o botão “limpar” garantirá a remoção de todas as entradas no visor da calculadora.
Aprenda cursos de desenvolvimento de software online das melhores universidades do mundo. Ganhe Programas PG Executivos, Programas de Certificado Avançado ou Programas de Mestrado para acelerar sua carreira.
Enfrentando o Projeto: Chave para Construir o Código
Em vez de ir direto para o código, você precisa aprender a lidar com um novo projeto. Você tem duas coisas prontas para você: a lógica e um entendimento básico das tecnologias front-end, ou seja, JavaScript, HTML e CSS.
Antes de começar a construir sua calculadora usando JavaScript , você precisa do seguinte:
- Um Ambiente de Desenvolvimento Integrado que o ajudará a construir seu projeto usando todas as três tecnologias.
- Um servidor local que irá ajudá-lo a testar seus códigos e remover os bugs. Como resultado, você poderá iniciar o aplicativo com mais rapidez e agilidade.
#1 Introdução ao HTML
O primeiro passo é sujar um pouco as mãos com HTML para que você tenha construído o contorno da sua calculadora.
Há dez botões na calculadora, variando de 0 a 9. O HTML é responsável por construir as teclas para cada dígito.
Além disso, você precisará usar HTML para criar teclas separadas para as diferentes funções aritméticas, bem como ao construir uma calculadora usando JavaScript .
Você pode usar HTML para adicionar o botão para exibir os dígitos inseridos ou os resultados, bem como para limpar a exibição.
A unidade visual de sua calculadora é totalmente dependente de HTML e CSS, dos quais os botões e seus IDs precisam ser criados usando HTML.
O Código da Caldeira
<!DOCTYPEhtml>
<html lang=”pt”>
<cabeça>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” type=”text/css” href=”css/styles.css”>
<title>Calculadora</title>
</head>
<corpo>
O código real para criar o esboço da calculadora
(
<!– calculadora –>
<div class="calculadora">
<!– exibição –>
<input type=”text” class=”display” desativado>
<!– teclas –>
<div class=”chaves”>
<!– 4 linhas de teclas –>
<div class="linha">
<button value=”7″>7</button>
<button value=”8″>8</button>
<button value=”9″>9</button>
<button value="+" class="operator">+</button>
</div>
<div class="linha">
<button value="4″>4</button>
<button value="5″>5</button>
<button value=”6″>6</button>
<button value=”-” class=”operator”>-</button>
</div>
<div class="linha">
<button value="1″>1</button>
<button value="2″>2</button>
<button value="3″>3</button>
<button value="*" class="operator">*</button>
</div>
<div class="linha">
<button value=”C” class=”operator”>C</button>
<button value="0″>0</button>
<button value="/" class="operator">/</button>
<button value="=" class="operator">=</button>
</div>
</div>
</div>
<!– fim do corpo da calculadora –>
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>
Aprenda: os 20 principais projetos Javascript no Github para iniciantes
#2 Estilo com CSS
Depois de definir a estrutura da calculadora, você usará os elementos CSS embutidos para estilizar sua calculadora e torná-la visualmente atraente e fácil de usar.
Embora o CSS embutido seja excelente quando se trata de projetar e estilizar a aparência do seu aplicativo, ele pode não ser amigável para SEO. Além disso, você também pode usar elementos CSS externos marcando-os no mesmo diretório raiz. Você pode até usar elementos CSS internos ou incorporados que estão presentes nas tags <style></style> na seção head.
Aqui, mostraremos o código que você pode usar para estilizar sua calculadora.
(Você pode criar variações para este código, se desejar.)
/* estilos comuns */
* {
preenchimento: 0;
margem: 0;
}
corpo {
largura: 100vw;
altura: 100vh;
estouro: oculto;
exibição: flexível;
justificar-conteúdo: centro;
alinhar-itens: centro;
cor de fundo: #222831;
família de fontes: sem serifa;
}
/* estilos comuns terminam */
/* calculadora */
.calculadora {
largura: 300px;
fundo de preenchimento: 15px;
raio da borda: 7px;
cor de fundo: #000;
box-shadow: 5px 8px 8px -2px rgba(0, 0, 0, 0,61);
}
/* fim do estilo da calculadora */
/* tela */
.tela {
largura: 100%;
altura: 80px;
borda: nenhuma;
dimensionamento de caixa: caixa de borda;
preenchimento: 10px;
tamanho da fonte: 2rem;
cor de fundo: #00ff44;
cor: #000;
text-align: direita;
raio superior esquerdo da borda: 7px;
raio superior direito da borda: 7px;
}
/* fim do estilo de exibição */
/* fila */
.fila {
exibição: flexível;
justificar-conteúdo: espaço-entre;
}
/* fim do estilo de linha */
/* botão */
botão {
largura: 50px;
altura: 50px;
raio de borda: 50%;
borda: nenhuma;
contorno: nenhum;
tamanho da fonte: 1.5rem;
cor de fundo: #222;
cor: #ff;
margem: 10px;
}
botão: passar {
cursor: ponteiro;
}
/* fim do estilo do botão */
/* operador */
.operador {
cor de fundo: #00ff44;
cor: #000;
}
/* fim do estilo do operador */
#3 Adicionando funcionalidades com JavaScript
Já discutimos em detalhes os aspectos visíveis da construção de uma calculadora usando JavaScript . Vamos fazer alguns scripts para ajudar a tornar a calculadora funcional e realizar as tarefas de cálculo. Vamos entender as poucas etapas envolvidas na construção do código JS, que o ajudarão a desenvolver o código mais rapidamente.
- Você precisará chamar as tags HTML que criou para funções individuais usando JavaScript. Você usará seletores para chamar cada uma dessas entradas e armazená-las em uma variável. Para cada função, você precisará de uma variável. Por exemplo, há uma variável separada para exibição, os dígitos, função de limpeza e igual a função. A função getElementbyID() pode ser usada neste caso.
- Digamos que você queira realizar um cálculo simples de 20+30, você chamará 20 primeiro usando o método mencionado acima. Antes de chamar 30 e a função aritmética, você precisará armazenar o 20 chamado anteriormente em algum lugar. Seu código deve liberar espaço para o armazenamento temporário dos números para facilitar os cálculos. Uma matriz vazia conterá o número como uma string. Depois de adicionar o outro número e a função aritmética, usando eval(), você pode avaliar os números e obter a resposta.
- Ao clicar nos botões da calculadora, você deseja que alguns resultados sejam exibidos ou avaliados. Para isso, você deve adicionar ouvintes de eventos ao seu código. Dessa forma, os botões ouvirão o clique. Quando você adiciona funções aos ouvintes de eventos, eles executarão automaticamente a tarefa no som do clique.
- A unidade de exibição deve retornar o valor do botão em que você clicou. Você pode usar o objeto event.target, pois ele retornará o valor do elemento no qual o evento ocorreu. Por exemplo, você deseja que o número “1” seja exibido assim que você clicar nele. Para isso, você precisará armazenar o número na forma de uma variável. Usando a função “if”, você irá comparar a variável existente para identificar se é zero ou não. Caso seja um zero, você o anexará a uma string vazia para que nenhum número comece com zero. Por fim, você adicionará o conteúdo da chave “1” à variável de exibição. Como resultado, assim que a tecla numérica for acionada, você verá o conteúdo na caixa de exibição.
- Por fim, você precisa criar a função que ajudará a aplicar operações matemáticas aos números exibidos. Certifique-se de que sua calculadora em JavaScript possa realizar os cálculos matemáticos com facilidade. Para habilitar essa funcionalidade, você pode usar uma combinação de sintaxes e métodos. Especificamos o código para os elementos JavaScript abaixo para sua leitura.
// seleciona todos os botões
botões const = document.querySelectorAll('button');
// seleciona o elemento <input type=”text” class=”display” disabled>
const display = document.querySelector('.display');
// adiciona eventListener a cada botão
botões.forEach(função(botão) {
button.addEventListener('click', calcular);
});
// calcula a função
função calcular(evento) {
// valor atual dos botões clicados
const clickedButtonValue = event.target.value;
if (clickedButtonValue === '=') {
// verifica se o display não está vazio então apenas faz o cálculo
if (valor.exibição !== ”) {
// calcula e mostra a resposta para exibir
valor.exibição = eval(valor.exibição);
}
} else if (clickedButtonValue === 'C') {
//limpa tudo no display
valor.exibição = ”;
} outro {
// caso contrário, concatena-o para o display
valor.exibição += clickedButtonValue;
}
}
Deve ler: Arquitetura Java e componentes explicados
Resumindo
Esteja você construindo uma calculadora em JavaScript ou trabalhando em um projeto mais complexo, a ideia é dividir o conteúdo de maneira lógica e construída. Isso ajudará você a derivar a sintaxe exata e levará a um aplicativo da Web fluido. Em vez de começar com a codificação diretamente, tente entender qual é o real propósito da tecnologia que você está usando e ela o levará ao código.
Se você estiver interessado em aprender mais sobre Java, desenvolvimento de software full-stack, confira o Executive PG Program in Software Development – Specialization in Full Stack Development do upGrad & IIIT-B, que é projetado para profissionais que trabalham e oferece mais de 500 horas de treinamento rigoroso , mais de 9 projetos e atribuições, status de ex-alunos do IIIT-B, projetos práticos práticos e assistência de trabalho com as principais empresas.
