Skip to content

Calculadora simples criada com HTML, JavaScript e CSS. Foi desenvolvido como parte do aprendizado dessas tecnologias, com foco especial na interação entre botões usando JavaScript.

License

Notifications You must be signed in to change notification settings

BrenoLira01/Calculadora-Javascript

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

99 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Calculadora JavaScript

Introdução

Este projeto é uma calculadora simples criada com HTML, JavaScript e CSS. Foi desenvolvido como parte do aprendizado dessas tecnologias, com foco especial na interação entre botões usando JavaScript.

Clique aqui para ver o projeto.

Dificuldades Enfrentadas

A parte mais desafiadora foi impedir a repetição do ponto e evitar a adição de operadores consecutivos. Além disso, a implementação da notação científica.

Como impedir a repetição do ponto

Como impedir a repetição do ponto

Primeiro precisamos checar se já existe ponto na tela. Pra isso, vamos utilizar o método includes().

Exemplo:

tela.value.includes(".")

Em seguida vamos usar uma estrutura de controle if e else.

Exemplo:

if (tela.value.includes(".")) {
    return; 
  } else {
    tela.value += ponto.innerText;
  }

O return serve para encerrar a execução da função, impedindo a inserção do ponto. E o else é pra caso o contrário o código segue normalmente.

Código completo:

tela.value.includes(".")

if (tela.value.includes(".")) {
    return; 
  } else {
    tela.value += ponto.innerText;
  }
Como evitar a adição de operadores consecutivos

Como evitar a adição de operadores consecutivos

Pra isso vamos obter o último caractere da tela utilizando o método slice().

// Obtêm o último caractere.
let ultimoCaractere = tela.value.slice(-1);

Em seguida, usamos o método includes() para verificar se ele é um operador.

// verifica se ele é um operador.
let substituirOperador = "+-x÷".includes(ultimoCaractere);

Agora que temos o último caractere e sabemos se ele é um operador vamos usar a estrutura de controleif e else para permitir a substituição caso necessário.

Exemplo:

if (substituirOperador) {
      tela.value = tela.value.slice(0, -1) + botao.innerText;
    } else {
      tela.value += botao.innerText;
    }

O trecho .slice(0, -1) seleciona todos os caracteres da String, exceto o último. É como se estivéssemos apagando o último caractere da tela. Em seguida o + botao.innerText coloca um novo.

O else é pra caso o contrário o código segue normalmente.

Código completo:

let ultimoCaractere = tela.value.slice(-1);

let substituirOperador = "+-x÷".includes(ultimoCaractere);

if (substituirOperador) {
      tela.value = tela.value.slice(0, -1) + botao.innerText;
    } else {
      tela.value += botao.innerText;
    }
Como implementar notação científica

Como implementar notação científica

Para aplicarmos a notação científica, é necessário definir um limite de tamanho para o resultado.

por exemplo:

Fazendo o calculo 9,6 x 3 = 28.799999999999997, temos o resultado de 18 caracteres. Para que o resultado não seja tão grande podemos usar uma estrutura de controle como if e else.

Vamos colocar um limite de 10 caracteres, quando ele for ultrapassado, sera feita a notação científica.

Mas antes precisamos converter o resultado do calculo para string para obtermos o seu tamanho utilizando .toString(). Assim podemos saber quantos caracteres tem o resultado.

Exemplo:

let resultadoString = resultado.toString();

Agora vamos definir um limite de 10 caracteres. Também utilizaremos o método toFixed() para formatar o resultado em uma casa decimal.

Exemplo:

if (resultadoString.length > 10) {
      resultado = resultado.toFixed(1);
    }

Com isso, temos 9,6 x 3 = 28.8

Tecnologias Utilizadas

JavaScript HTML5 CSS3

Fontes

Os elementos adicionados ou modificados neste projeto foram obtidos de diversas fontes. Abaixo está a lista de onde cada elemento foi encontrado:

Agradeço aos criadores originais por disponibilizarem esses recursos.

Contribuições

Contribuições são bem-vindas! Sinta-se à vontade para abrir problemas e solicitações de pull para melhorar este projeto.

Contato

Licença

Este projeto é licenciado sob os termos da Licença MIT. Leia o arquivo LICENSE para obter mais detalhes sobre as permissões e restrições da Licença MIT.

About

Calculadora simples criada com HTML, JavaScript e CSS. Foi desenvolvido como parte do aprendizado dessas tecnologias, com foco especial na interação entre botões usando JavaScript.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published