Ads Top

Como criar uma Calculadora em Javascript

Bom, antes de tudo é importante deixar claro que aqui estamos falando de um projeto apenas para estudo. Nesse projeto vamos aprender a criar uma calculadora usando javascript e html.

Essa calculadora será bem básica, irá possuir apenas os operadores de adição e subtração. Ah! essa calculadora também vai trabalhar com os comandos de memória, para ler, somar e limpara a memória.

HTML da calculadora


789 = 456 - 123 + 0MCMR M+

CSS da calculadora

<style>
    #calc{
        text-align: center;
    }
    #display{
        width: 210px;
        margin: 0 auto;
        font-size:24px;
        font-weight: bold;
    }
    .numero{
        background: #D8CCCC;
        width:50px;
        height:50px;
        text-align: center;
        vertical-align:middle;
        font-size:24px;
        font-weight: bold;
        border-radius: 10px;
        margin:1px;
        border:1px solid white;
        display: inline-block;
        line-height: 50px;
    } 
    .numero:hover{
        cursor:pointer;
    }
</style>

Javascript da calculadora

Agora veja como ficaria o script para de fato fazer a calculadora funcionar:

<script>
var expressao ='';
var memoria = ''; 
document.querySelectorAll('.numero').forEach(item => {
    
    item.addEventListener('click',event => {
       
        switch(item.innerHTML){
               
            case '=':
               document.getElementById('expressao').innerHTML = document.getElementById('expressao').innerHTML + ' = ';
               document.getElementById('resultado').innerHTML = eval(expressao);
                expressao = '';
            break;
            case 'MC':
                memoria = '';
            break;
            case 'MR':
                if(memoria != ''){
                   expressao += memoria;
                    document.getElementById('resultado').innerHTML = '';
                    document.getElementById('expressao').innerHTML = expressao;
                }
            break;
            case 'M+':
                if(document.getElementById('resultado').innerHTML != ''){
                   
                    if(memoria != ''){
                       memoria = eval(memoria) + eval(document.getElementById('resultado').innerHTML);
                    }else{
                       memoria = eval(document.getElementById('resultado')).innerHTML;
                    }
                   
                }
            break;
            default:
                expressao += item.innerHTML;
                document.getElementById('resultado').innerHTML = '';
                document.getElementById('expressao').innerHTML = expressao;
        }
        
    });
    
});    
</script>

Aqui foi adicionado uma função que será executada sempre quando qualquer botão da calculadora for clicado. Essa função irá verificar qual botão foi clicado através da propriedade innerHTML, então com base no html do elemento uma ação será tomada. Em suma, tanto valores como operadores são acumulados em uma variável chamada expressao, e quando o botão de igual “=” é clicado, é usada a função eval para converter a expressão no respectivo valor.

Além disso essa função trabalha com memória, tal qual uma calculadora real possui. Os botões “MC”, “MR” e “M+” são para Limpar a Memória, Ler da Memória e Adicionar à Memória respectivamente.

Como dito anteriormente, isso é apenas para estudo, a partir dessa ideia você poderá criar projetos bem mais elaborados, calculadoras bem mais avançadas, quem sabe até uma calculadora científica, que tal?

Abraços e até um próximo artigo!

Na próxima semana farei mais um review com depoimento e resenha sobre Como criar uma Calculadora em Javascript.

Espero ter ajudado a esclarecer o que é, como usar, se funciona e se vale a pena mesmo Como criar uma Calculadora em Javascript. Se você tiver alguma dúvida ou quiser adicionar algum comentário deixe abaixo.

Nenhum comentário:

Tecnologia do Blogger.