JavaScript Básico 20 - Projeto Calculadora (Parte 6)

Neste artigo, serão disponibilizados e explicados os códigos utilizados na parte seis do nosso projeto de calculadora. Caso ainda não tenha visto as partes 1, 2, 3, 4 e 5 do projeto da Calculadora, acesse e obtenha o HTML e CSS necessários para a criação do layout desta calculadora:

Chegamos na parte final de nossa calculadora! Durante este percurso, houve algumas alterações no código, como:

Foram removidos os elementos primeiroValor e segundoValor do objeto calculo, que foram substituídos pelo atributo valorSalvo: null

let calculo = {
    valorSalvo: null,
    funcaoParaCalcular: null
};

As funções inserirNumero, inserirPonto e inserirOperador foram substituídas por clicarNumero, clicarPonto e clicarOperador, respectivamente, a fins de padronização de código, pois são funções que disparam ao clique.

Na função limparDados(), os valores primeiroValor e segundoValor foram substituídos pelo valorSalvo = null

// Limpa todos os dados do input e objeto de calculo
function limparDados() {
    inputResultado.value = "";

    calculo.valorSalvo = null;
    calculo.funcaoParaCalcular = null;
}

Criaremos uma função chamada clicarResultado(). Nele, realizaremos o teste: se o inputResultado.value for um número e se o calculo.funcaoParaCalcular for diferente de null (ou seja, está preenchida), ele fará o seguinte:

Criaremos uma variável chamada resultado, que receberá a resposta da função, calculando o calculo.valorSalvo e o inputResultado.value, que deverá ser um Number().

O inputResultado.value receberá este resultado, e o calculo.valorSalvo receberá também este resultado, pois com isso podemos continuar calculando após receber o resultado de um cálculo anterior. Para isso, precisamos inserir o valor null no calculo.funcaoParaCalcular.

function clicarResultado() {
    if(!isNaN(inputResultado.value) && calculo.funcaoParaCalcular != null){
        let resultado = calculo.funcaoParaCalcular(calculo.valorSalvo, Number(inputResultado.value));

        inputResultado.value = resultado;
        calculo.valorSalvo = resultado;

        calculo.funcaoParaCalcular = null;
    }
}

Algumas operações também foram realizadas na função clicarOperador(). Se o valor do inputResultado.value for um número, precisamos descobrir se o cálculo com o valor salvo será null. Se for, armazenaremos a versão numérica de nosso inputResultado.value. Se o calculo.funcaoParaCalcular não for null, armazenaremos o a versão numérica da nossa funcaoParaCalcular no valorSalvo. Se o cálculo não for numérico, adicionaremos a função do operador (soma, subtração, multiplicação, divisão) aos nossos valores.

Todas as vezes que clicarmos no operador, usaremos o event.target.textContent para salvar o operador na variável operador criada. Utilizaremos a função atribuirOperador(), recebendo o operador clicado e mostrando-o no inputResultado.value.

// função que atualiza o objeto calculo ao clicar nos operadores
function clicarOperador() {
    if(!isNaN(inputResultado.value)){
        if(calculo.valorSalvo == null){
            calculo.valorSalvo = Number(inputResultado.value);
        }else if(calculo.funcaoParaCalcular != null){
            calculo.valorSalvo = calculo.funcaoParaCalcular(calculo.valorSalvo, Number(inputResultado.value));
        }
    }

    let operador = event.target.textContent;
    atribuirOperacao(operador);
    inputResultado.value = operador;
}

Gostou deste projeto? Comente abaixo e compartilhe!

JavaScript Básico 20 – Projeto Calculadora (Parte 6)

Deixe um comentário Cancelar resposta