Neste artigo, serão disponibilizados e explicados os códigos utilizados na parte três do nosso projeto de calculadora. Caso ainda não tenha visto as partes 1, 2 e 3 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), JavaScript Básico 16 – Projeto Calculadora (Parte 2), JavaScript Básico 17 – Projeto Calculadora (Parte 3).
Dentro do nosso projeto, podemos criar uma função chamada inserirPonto. Nesta função, iremos adicionar a lógica para inserir o ponto na calculadora:
function inserirPonto(){
}
Criada a função, podemos determinar a primeira condicional (if). Esta condicional será utilizada de modo a testar se o input da calculadora está vazio (ou uma string vazia), ou se o input for isNaN (se não é um número). Satisfazendo alguma das condições, o ponto será inserido após o valor zero.
Nesta função, iremos criar um if para descobrir se o valor da calculadora está em branco, ou se ele não é um número. Precisamos realizar este teste pois em ambos os casos, iremos substituir o valor por “0.”.
Para fazer isso, temos que testar se o inputResultado.value === ” ” ou se isNan(inputResultado.value).
function inserirPonto(){
if(inputResultado.value === "" || isNaN(inputResultado.value)){
inputResultado.value = "0.";
}
}
isNaN:
O isNaN é uma função que retorna true caso o valor dentro da variável possa ser convertido para um número e false caso não consiga fazê-lo. Não iremos entrar em detalhes neste projeto, mas é importante saber que uma string vazia pode ser convertida para zero e por isso o isNaN retornará falso para este teste.
Caso o valor do input dê falso no primeiro teste (if), isto quer dizer que possuímos um número. Então, a única coisa que precisamos ainda conferir é se este número já possui um ponto, pois neste caso, não podemos adicionar um segundo ponto.
Para conferir isto, podemos usar uma função nativa do JavaScript, chamada includes. Ela retornará true caso o valor dentro do parênteses exista dentro do inputResultado.value. Como queremos que ela retorne o oposto, basta utilizar o sinal de exclamação (!) na frente da expressão. Com isso, obteremos a lógica de (“Se não possui ponto dentro da String”).
function inserirPonto(){
if(inputResultado.value === "" || isNaN(inputResultado.value)){
inputResultado.value = "0.";
}else if(!inputResultado.value.includes(".")){
inputResultado.value = inputResultado.value + ".";
}
}
Por último, teremos a situação em que o valor é número e possui ponto. Mas neste caso não será realizada nenhuma operação, ou seja, nada acontecerá ao clicar no ponto.
Está gostando do projeto? Comente abaixo e compartilhe!