Neste artigo, serão disponibilizados e explicados os códigos utilizados na parte dois do nosso projeto de calculadora. Caso ainda não tenha visto a Parte 1 do projeto da Calculadora, acesse e obtenha o HTML e CSS necessários para a criação do layout desta calculadora: JavaScript Básico 15 – Projeto Calculadora (Parte 1)
Dentro de nosso projeto, precisamos criar uma variável para mostrar os elementos no nosso display.
// Criando uma variável para capturar o elemento
// do HTML pelo Id. Este elemento mostrará os valores no display.
let inputResultado = document.getElementById("inputDisplayResultado");
Após isso, criaremos um objeto com os dados e a função para calcular.
// Objeto para mantermos controle dos dados e funcão para calcular.
let calculo = {
primeiroValor: 0,
segundoValor: 0,
funcaoParaCalular: null
}
Utilizando o window.addEventListener, ao carregar a janela, inicializaremos todos os métodos e variáveis criados:
// Ao carregar a janela, inicializa os métodos e variaveis
window.addEventListener("load", function () {
atribuirEventos();
})
Agora, precisamos de uma função para a inserção de números na tela. Para isso:
- Utilizaremos o inputResultado.value para exibir os valores preenchidos pelo usuário no display.
- Se este valor não for um número, ele será substituído pelo próximo número clicado.
- Se o valor for zero, também será substituído pelo próximo número clicado.
- Se o valor for diferente de zero e for um número, a calculadora adicionará este número ao input, para que as operações sejam realizadas.
// Adiciona o número na tela
function inserirNumero() {
// Se o valor na tela não for um número,
// substitui pelo número/valor do botão
if (isNaN(inputResultado.value)) {
inputResultado.value = event.target.textContent;
// Senão, adiciona o texto junto com o existente
} else {
// Se o valor na tela for zero, substitui o valor na tela pelo número clicado
if (inputResultado.value == 0) {
inputResultado.value = event.target.textContent;
// Senão adiciona o número ao input para criar digitos maiores que 0
} else {
inputResultado.value += event.target.textContent;
}
}
}
Adicionaremos a função inserirNumero no evento de click de cada um dos botões de números da calculadora, para que, assim que clicados, o valor do respectivo botão apareça na tela do usuário.
//Atribui os eventos a todos os botões da calculadora
function atribuirEventos() {
//Atribui eventos aos números
document.getElementById("btnValor0").addEventListener("click", inserirNumero);
document.getElementById("btnValor1").addEventListener("click", inserirNumero);
document.getElementById("btnValor2").addEventListener("click", inserirNumero);
document.getElementById("btnValor3").addEventListener("click", inserirNumero);
document.getElementById("btnValor4").addEventListener("click", inserirNumero);
document.getElementById("btnValor5").addEventListener("click", inserirNumero);
document.getElementById("btnValor6").addEventListener("click", inserirNumero);
document.getElementById("btnValor7").addEventListener("click", inserirNumero);
document.getElementById("btnValor8").addEventListener("click", inserirNumero);
document.getElementById("btnValor9").addEventListener("click", inserirNumero);
}
Está gostando deste projeto? Deixe o seu comentário!
Bons estudos!