Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/calculator.markdown

Created May 29, 2021 19:05
Show Gist options
  • Save harunpehlivan/d7b3cbb399eda9af85425615ddd0dd0b to your computer and use it in GitHub Desktop.
Save harunpehlivan/d7b3cbb399eda9af85425615ddd0dd0b to your computer and use it in GitHub Desktop.
Download ZIP
Calculator
Raw
index.html
<html>
<head>
<title>
HARUN PEHLİVAN Calculator
</title>
</head>
<body>
<div class="container">
<h1 class="page-title">
Calculator
</h1>
<a href="https://harunpehlivantebimtebitagem.site123.me/" target="_blank">
<img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1606081378/logo_transparent_ru2klx.png" alt="" class="alura-logo">
</a>
<div class="espaçamento"></div>
<div class="calculadora">
<div class="tela" id="tela"></div>
<div class="botoes">
<div class="contas">
<div>&divide;</div>
<div>&times;</div>
<div>-</div>
<div>+</div>
</div>
<div class="painel-numeros">
<div class="numeros">
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="numeros">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="numeros">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="numeros">
<div>0</div>
<div>.</div>
<div id="limpar">C</div>
</div>
</div>
<div class="igual" id="resultado">=</div>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
var input = document.getElementById('tela'),
numero = document.querySelectorAll('.numeros div'),
conta = document.querySelectorAll('.contas div'),
resultado = document.getElementById('resultado'),
limpar = document.getElementById('limpar'),
resultadoEstaMostrado = false;
// adiconando evento de clique nos botões dos numeros
for (var i = 0; i < numero.length; i++) {
numero[i].addEventListener("click", function(e) {
// variaveis do texto na tela e o ultimo caractere
var textoNaTela = input.innerHTML;
var ultimoChar = textoNaTela[textoNaTela.length - 1];
// se o resultado ainda não foi mostrado continua adicionando
if (resultadoEstaMostrado === false) {
input.innerHTML += e.target.innerHTML;
} else if (resultadoEstaMostrado === true && ultimoChar === "+" || ultimoChar === "-" || ultimoChar === "×" || ultimoChar === "÷") {
// se o resultado ja foi mostrado e o usuario aperta um botão de conta continuam adicionando na tela para a próxima operação
resultadoEstaMostrado = false;
input.innerHTML += e.target.innerHTML;
} else {
//se o resultado ja foi mostrado e o usuario apertar um numero limpa a tela e começa uma nova operação
resultadoEstaMostrado = false;
input.innerHTML = "";
input.innerHTML += e.target.innerHTML;
}
});
}
// adiconando evento de clique nos botões das contas
for (var i = 0; i < conta.length; i++) {
conta[i].addEventListener("click", function(e) {
// variaveis do texto na tela e o ultimo caractere
var textoNaTela = input.innerHTML;
var ultimoChar = textoNaTela[textoNaTela.length - 1];
// se o ultimo caractere mostrado for uma conta, substitui pela que foi clicada
if (ultimoChar === "+" || ultimoChar === "-" || ultimoChar === "×" || ultimoChar === "÷") {
var newString = textoNaTela.substring(0, textoNaTela.length - 1) + e.target.innerHTML;
input.innerHTML = newString;
} else if (textoNaTela.length == 0) {
//se a primeira tecla pressionada for uma conta, avisa o usuario para colocar um numero primeiro
alert("coloque um numero primeiro");
} else {
//senão apenas adiciona a conta pressionada na tela
input.innerHTML += e.target.innerHTML;
}
});
}
// adiconando evento de clique no botão igual
resultado.addEventListener("click", function() {
// texto que será processado
var inputString = input.innerHTML;
// fazendo uma lista dos numeros que serão processados
var numeros = inputString.split(/\+|\-|\×|\÷/g);
// fazendo uma lista das contas que serão processadas
var contas = inputString.replace(/[0-9]|\./g, "").split("");
// fazendo as contas uma de cada vez em ordem, primeiro divisão depois multiplicação, subtração e adição
var divide = contas.indexOf("÷");
while (divide != -1) {
numeros.splice(divide, 2, numeros[divide] / numeros[divide + 1]);
contas.splice(divide, 1);
divide = contas.indexOf("÷");
}
var multiply = contas.indexOf("×");
while (multiply != -1) {
numeros.splice(multiply, 2, numeros[multiply] * numeros[multiply + 1]);
contas.splice(multiply, 1);
multiply = contas.indexOf("×");
}
var subtract = contas.indexOf("-");
while (subtract != -1) {
numeros.splice(subtract, 2, numeros[subtract] - numeros[subtract + 1]);
contas.splice(subtract, 1);
subtract = contas.indexOf("-");
}
var add = contas.indexOf("+");
while (add != -1) {
numeros.splice(add, 2, parseFloat(numeros[add]) + parseFloat(numeros[add + 1]));
contas.splice(add, 1);
add = contas.indexOf("+");
}
input.innerHTML = numeros[0]; // mostrando resultado na tela
resultadoEstaMostrado = true; // dizendo que o resultado está sendo mostrado
});
// adiconando evento de clique no botão limpar
limpar.addEventListener("click", function() {
input.innerHTML = "";
})
Raw
style.css
body {
font-family: 'Roboto Mono',monospace;
background-image: url('https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1604403639/responsivecomingsoon_zzcqkv.png');
background-color: #000000;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
.container {
text-align: center;
padding: 20px;
height: 100vh;
}
.page-title {
color: #ffffff;
margin: 0 0 5px;
}
.page-subtitle {
color: #ffffff;
margin-top: 5px;
}
.page-logo {
width: 200px;
}
.alura-logo {
width: 40px;
position: absolute;
top: 10px;
right:10px;
}
*:focus {
outline: 0 !important;
}
.espaçamento {
margin: 0 auto;
height:40px;
}
.calculadora {
margin: 0 auto;
width: 294px;
background-color: black;
border: 1px solid #ddd;
}
.tela {
width: 279px;
border: 0;
border-radius: 1px;
height: 60px;
padding-right: 15px;
padding-top: 10px;
background-color: #202020;
text-align: right;
margin-right: 6px;
font-size: 2.5rem;
color: white;
overflow-x: auto;
transition: all .2s ease-in-out;
}
.contas div {
color: white;
display: inline-block;
border: 0;
border-radius: 1px;
width: 40px;
text-align: center;
padding: 10px;
margin: 20px 4px 10px 0;
cursor: pointer;
background-color: #202020;
transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}
.painel-numeros {
display: inline-block;
}
.numeros div {
color: white;
display: inline-block;
border: 0;
border-radius: 1px;
width: 40px;
text-align: center;
padding: 10px;
margin: 10px 4px 10px 0;
cursor: pointer;
background-color: #202020;
transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}
.igual {
display: inline-block;
border: 0;
border-radius: 1px;
width: 40px;
text-align: center;
padding: 102px 10px;
margin: 10px 6px 10px 0;
vertical-align: top;
cursor: pointer;
color: #FFF;
background-color: #202020;
transition: all .2s ease-in-out;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment