calculadora.html
+++++++++++++++++++++++++++++++
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="calculadora.js"></script>
<link href="calculadora.css" rel="stylesheet">
</head>
<body>
<div id="ml-container"><!-- # para definir na css -->
<div id="calculadora">
Operação atual<input type="text" id="displayOperacaoAtual" readonly><br>
Operação anterior<input type="text" id="displayOperacaoAnterior" readonly><br>
Parcela 1<input type="text" id="displayParcial" readonly><br>
Parcela 2<input type="text" id="displayEcran" readonly><br>
<button value="1" class="btn-calculadora"
onclick="numero(this.value)">1</button>
<button value="2" class="btn-calculadora"
onclick="numero(this.value)">2</button>
<button value="3" class="btn-calculadora"
onclick="numero(this.value)">3</button>
<button value="4" class="btn-calculadora"
onclick="numero(this.value)">4</button>
<button value="5" class="btn-calculadora"
onclick="numero(this.value)">5</button>
<button value="6" class="btn-calculadora"
onclick="numero(this.value)">6</button>
<button value="7" class="btn-calculadora"
onclick="numero(this.value)">7</button>
<button value="8" class="btn-calculadora"
onclick="numero(this.value)">8</button>
<button value="9" class="btn-calculadora"
onclick="numero(this.value)">9</button>
<button class="btn-calculadora"
onclick="clean()">C</button>
<button value="0" class="btn-calculadora"
onclick="numero(this.value)">0</button>
<button value="" class="btn-calculadora"
onclick="numero(this.value)">M+</button>
<button class="btn-calculadora"
onclick="subtrair()">-</button>
<button class="btn-calculadora"
onclick="somar()">+</button>
<button value="" class="btn-calculadora"
onclick="multiplicar()">*</button>
<button value="" class="btn-calculadora"
onclick="dividir()">/</button>
<button value="" class="btn-calculadora"
onclick="numero(this.value)">%</button>
<button value="" class="btn-calculadora"
onclick="numero(this.value)">=</button>
<button value="" class="btn-calculadora"
onclick="numero(this.value)">MC</button>
<button value="" class="btn-calculadora"
onclick="numero(this.value)">MR</button>
<button value="" class="btn-calculadora"
onclick="numero(this.value)">^</button>
</div>
</div>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++
calculadora.js
var displayOperacaoAtual= "";
var displayOperacaoAnterior = "";
var displayEcran = "";
var displayParcial = "";
var operacaoAnterior = "";
var operacaoAtual = "";
var ecran = "";
var parcial = "";
function numero(a){
ecran=ecran+a;
document.getElementById("displayEcran").value=ecran;
}
function calcular(){
if(operacaoAnterior=='') {
parcial = Number(ecran);
}
if(operacaoAnterior=='adicao'){
parcial = Number(parcial) + Number(ecran);
}
if(operacaoAnterior=='subtracao'){
parcial = Number(parcial) - Number(ecran);
}
if(operacaoAnterior=='multiplicacao'){
parcial = Number(parcial) * Number(ecran);
}
if(operacaoAnterior=='divisao'){
parcial = Number(parcial) / Number(ecran);
}
document.getElementById("displayParcial").value=parcial;
document.getElementById("displayEcran").value="";
document.getElementById("displayOperacaoAtual").value=operacaoAtual;
document.getElementById("displayOperacaoAnterior").value=operacaoAnterior;
ecran = "";
}
function somar(){
operacaoAnterior = operacaoAtual;
operacaoAtual = "adicao";
calcular();
}
function subtrair(){
operacaoAnterior = operacaoAtual;
operacaoAtual = "subtracao";
calcular();
}
function multiplicar(){
operacaoAnterior = operacaoAtual;
operacaoAtual = "multiplicacao";
calcular();
}
function dividir(){
operacaoAnterior = operacaoAtual;
operacaoAtual = "divisao";
calcular();
}
function clean(){
document.getElementById("displayEcran").value=null;
document.getElementById("displayParcial").value=null;
ecran="";
parcial = "";
}
++++++++++++++++++++++++++++++++++++++++++++++++++++++
calculadora.css
body{
background-color: antiquewhite;
}
#ml-container{
background-color: rgb(239, 235, 235);
}
.btn-calculadora{
width:30%;
padding:1%;
margin: 0.5%;
}
#calculadora{
width:50%
}
#ecran{
width: 93%;
}
Sem comentários:
Enviar um comentário