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.
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
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
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
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
Os elementos adicionados ou modificados neste projeto foram obtidos de diversas fontes. Abaixo está a lista de onde cada elemento foi encontrado:
- Ícone de apagar: Fonte: Ícones criados por Tailwind Labs - icon-icons
- Ícone de github: Fonte: Github ícones criados por Pixel perfect - Flaticon
- Ícone de linkedin: Fonte: Linkedin ícones criados por Freepik - Flaticon
Agradeço aos criadores originais por disponibilizarem esses recursos.
Contribuições são bem-vindas! Sinta-se à vontade para abrir problemas e solicitações de pull para melhorar este projeto.
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.