Documentação

Projeto: Calculadora Básica.

Autor: Marcos Marques.

Objetivo: Objetiva-se obter uma calculadora básica envolvendo as 4 operações: soma, subtração, multiplicação e divisão, utilizando somente html, css, js, sem nenhum tipo de framework. Esta solução é de autoria minha, sendo uma solução autêntica e não a mais otimizada.

Base da calculadora

A principio comecei criando o arquivo index.html, fazendo os botões dos números e das operações que vão estar envolvidas no projeto final da calculadora, como: + (soma), - (subtração), * (multiplicação) , / (divisão). Após isso, linkei o html com um arquivo style.css, e fiz as primeiras classes para estilizar os botões de números, operações, desfazer, e resultado.

Untitled

Utilizando de exemplo o modelo da calculadora do Ubuntu, distribuição linux, que há uma seção para mostar os resultados dos calculos pedidos, botões para dar entrada com os valores e operadores, além de um campo que mostra o que está sendo digitado. Mais adiante usarei o Java Script para atualizar o display em tempo real apartir dos clicks nos botões da calculadora.

Untitled

Em suma, a ideia principal é conseguir uma calculadora básica parecida com a mostrada acima.

Tempo: Demorei 5 minutos para fazer este simples molde.

Após isso criei as seções resultados e conta para ficarem mais claras visualmente em como eu estava pensando o modelo da calculadora, com css alinhei os itens ao meio.

Untitled

A ideia era que com JavaScript, o botão que fosse clicado embaixo apareceria na seção conta, e caso o usuário clicasse no resultado, o resultado apareceria na seção resultados, á direita, a esquerda ficaria a expressão que foi utilizada para gerar aquele resultado.

A lógica inicial para construção da base da calculadora

Para construir a base da calculadora, pensei em deixar um pouco de lado a função que de fato calcula o resultado e trabalhar em deixar os botões clicáveis além de conseguir exibir no display o que foi digitado.