GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Me ajudem a terminar minha calculadora

Tags: #<Tag:0x00007fa00d70c830>

Boa noite

Tenhao dois problemas

A tela da minha calculadora é criada com uma div, toda vez que eu insiro um valor nela através da propriedade innerHTML o seu tamanho é alterado.

Queria saber se é possível inserir um valor nessa div e ela permanecer do mesmo tamanho por exemplo funcionar como uma tela de calculadora mesmo.

E o outro problema é saber como remover um valor inserido numa div através da propriedade innerHTML.

Meu código

<!DOCTYPE html>
<html>

      <head>
	        <title>Calculadora</title>
			<meta charset="utf-8">
			<meta name="author"   content="Robson da Silva">
			<meta name="keywords" content="miniprojeto,treino,javascript">
			<meta name="descriptions" content="Calculadora usando javascript">
			
			<style>
			       
				   h1{
				      text-align:center;
					  text-decoration:underline;
				   }
				   
				   input[type=button]{
				     padding:10px;
					 padding-right:15px;
				   }
				   
				   input[type=button]:hover{
				    cursor:pointer;
					border-radius:4px;
					background-color:#B0C4DE;
				   }
				   
			       #tela{
				    padding:20px;
					padding-left:200px;
					border:1px solid;
					position:absolute;
					bottom:350px;
					left:130px;
					background-color:#7FFFD4;
					font-family:monospace;
				   }
				   
				   #calculadora{
				     padding-left:490px;
					 pading-top:90px;
					 padding-bottom:100px;
					 padding-left:160px;
					 border:solid 1px;
					 border-radius:8px;
					 background-color:black;
				     margin-left:400px;
					 margin-right:480px;
					 position:relative;
				   }
				   
				   #igual{
				     padding-left:50px;
				   }
				   
		    </style>
			
	  </head>
	  
	  
	  <body onkeydown="apagar(event)">
	        <h1>Calculadora</h1>
			
			<form id="calculadora">
			      <div type="text" id="tela" onmouseover="InseriViva()" onmouseout="RemovaViva()"></div><br><br><br><br><br><br><br><br>
				  <input type="button" name="bt1" value="1" onclick="one()">
				  <input type="button" name="bt2" value="2" onclick="two()">
				  <input type="button" name="bt3" value="3" onclick="three()">
				  <input type="button" name="bt4" value="4" onclick="four()"><br><br>
				  <input type="button" name="bt5" value="5" onclick="five()">
				  <input type="button" name="bt6" value="6" onclick="six()">
				  <input type="button" name="bt7" value="7" onclick="seven()">
				  <input type="button" name="bt8" value="8" onclick="eight()"><br><br>
				  <input type="button" name="bt9" value="9" onclick="nine()">
				  <input type="button" name="bt0" value="0" onclick="zero()">
				  <input type="button" name="btsoma" value="+" onclick="soma()">
				  <input type="button" name="btsub" value="-"  onclick="subtracao()"><br><br>
				  <input type="button" name="btmult" value="x" onclick="multiplicacao()">
				  <input type="button" name="btdiv" value="/" onclick="divisao()">
				  <input type="button" name="btigual" value="=" id="igual" onclick="calculo()">
			</form>
			
			<button onclick="testa()">dados</button><br><br>
			<button onclick="numero()">Numero</button><br><br>
			<button onclick="operation()">Operacao</button><br><br>
			<button onclick="limpar()">Limpar</button>
			<button onclick="teste()">teste</button>
			
			<script>
			        
					var dados = [];//Vetor que receberá os algarismos para a operação em forma de string
					var operacao = [];//Vetor que receberá a quantidade de operações existentes no cálculo
					var Numero = [""];//Vetor que recebera os números que foram armazenados no vetor dados.
					var ResulFinal;// Recebe o valor final do vetor Numero.
					var limpa = 0;
					var control = 0;
					
					//Função  que insere o número um na tela e no vetor dados.
					function one(){
					 
					    var um = "1";
						
						if(limpa>0){
						  document.getElementById("tela").innerHTML ="";
						  document.getElementById("tela").innerHTML += um;
						  dados.push(um);
						  limpa=0;
						  control = 1;
						}
						else{
					    document.getElementById("tela").innerHTML += um;
						dados.push(um);
						control = 1;
						}
						Pisca();
					}
					//Função  que insere o número dois na tela e  no vetor dados.
					 function two(){
					    
						var dois = "2";
						
						if(limpa>0){
						  document.getElementById("tela").innerHTML ="";
						  document.getElementById("tela").innerHTML += dois;
						  dados.push(dois);
						  limpa=0;
						  control = 1;
						}
						else{
					    document.getElementById("tela").innerHTML += dois;
						dados.push(dois);
						control = 1;
						}
					    Pisca();
					 }
					 //Função  que insere o número três na tela e no vetor dados.
					 function three(){
					    
						var tres = "3";
						
						if(limpa>0){
						  document.getElementById("tela").innerHTML ="";
						  document.getElementById("tela").innerHTML += tres;
						  dados.push(tres);
						  limpa=0;
						  control = 1;
						}
						else{
					    document.getElementById("tela").innerHTML += tres;
						dados.push(tres);
						control = 1;
						}
						Pisca();
					}
					//Função  que insere o número quatro na tela e no vetor dados.
					function four(){
					    
						var quatro = "4";
						
						if(limpa>0){
						  document.getElementById("tela").innerHTML ="";
						  document.getElementById("tela").innerHTML += quatro;
						  dados.push(quatro);
						  limpa=0;
						  control = 1;
						}
						else{
					    document.getElementById("tela").innerHTML += quatro;
						dados.push(quatro);
						control = 1;
						}
						Pisca();
					}
					//Função  que insere o número cinco na tela e no vetor dados.
					function five(){
					    
						var cinco = "5";
						
						if(limpa>0){
						  document.getElementById("tela").innerHTML ="";
						  document.getElementById("tela").innerHTML += cinco;
						  dados.push(cinco);
						  limpa=0;
						  control = 1;
						}
						else{
					      document.getElementById("tela").innerHTML += cinco;
						  dados.push(cinco);
						  control = 1;
						}
						Pisca();
					}
					//Função  que insere o número seis na tela e no vetor dados.
					function six(){
					    
						var seis = "6";
						
						if(limpa>0){
						  document.getElementById("tela").innerHTML ="";
						  document.getElementById("tela").innerHTML += seis;
						  dados.push(seis);
						  limpa=0;
						  control = 1;
						}
						else{
					    document.getElementById("tela").innerHTML += seis;
						dados.push(seis);
						control = 1;
						}
						Pisca();
					}
					//Função  que insere o número sete na tela e no vetor dados.
					function seven(){
					    
						var sete = "7";
						
						if(limpa>0){
						  document.getElementById("tela").innerHTML ="";
						  document.getElementById("tela").innerHTML += sete;
						  dados.push(sete);
						  limpa=0;
						  control = 1;
						}
						else{
					    document.getElementById("tela").innerHTML += sete;
						dados.push(sete);
						control = 1;
						}
						Pisca();
					}
					//Função  que insere o número oito na tela e no vetor dados.
					function eight(){
					    
						var oito = "8";
						
						if(limpa>0){
						  document.getElementById("tela").innerHTML ="";
						  document.getElementById("tela").innerHTML += oito;
						  dados.push(oito);
						  limpa=0;
						  control = 1;
						}
						else{
					    document.getElementById("tela").innerHTML += oito;
						dados.push(oito);
						control = 1;
						}
						Pisca();
					}
					//Função  que insere o número nove na tela e no vetor dados.
					function nine(){
					    
						var nove = "9";
						
						if(limpa>0){
						  document.getElementById("tela").innerHTML ="";
						  document.getElementById("tela").innerHTML += nove;
						  dados.push(nove);
						  limpa=0;
						  control = 1;
						}
						else{
					      document.getElementById("tela").innerHTML += nove;
						  dados.push(nove);
						  control = 1;
						}
						Pisca();
					}
					//Função  que insere o número zero na tela e no vetor dados.
					function zero(){
					    
						var zero = "0";
						
						if(limpa>0){
						  document.getElementById("tela").innerHTML ="";
						  document.getElementById("tela").innerHTML += zero;
						  dados.push(zero);
						  limpa=0;
						  control = 1;
						}
						else{
					    document.getElementById("tela").innerHTML += zero;
						dados.push(zero);
						  control = 1;
						}
						Pisca();
					}
					//Função  que insere o símbolo da operação de adição na tela e no vetor dados.
					function soma(){
					    
						var soma = "+";
						
						if (control>0){
						  if(limpa>0){
						     Numero[0] = ResulFinal;
						     document.getElementById("tela").innerHTML += soma;
						     dados.push(soma);
						     limpa=0;
							 control=0;
						}
						  else{
						     document.getElementById("tela").innerHTML += soma;
						     dados.push(soma);
						     limpa=0;
							 control=0;
						}
					  }
					  Pisca();
					}
					//Função  que insere o símbolo da operação de subtração na tela e no vetor dados.
					function subtracao(){
					    
						var sub = "-";
						
						if (control>0){
						  if(limpa>0){
						     Numero[0] = ResulFinal;
						     document.getElementById("tela").innerHTML += sub;
						     dados.push(sub);
						     limpa=0;
							 control=0;
						}
						  else{
						    document.getElementById("tela").innerHTML += sub;
						    dados.push(sub);
						    limpa=0;
							control=0;
						}
					  }
					  Pisca();
					}
					//Função  que insere o símbolo da operação de multiplicação na tela e no vetor dados.
					function multiplicacao(){
					    
						var mult = "x";
						
						if (control>0){
						  if(limpa>0){
						     Numero[0] = ResulFinal;
						     document.getElementById("tela").innerHTML += mult;
						     dados.push(mult);
						     limpa=0;
							 control=0;
						}
						  else{
						    document.getElementById("tela").innerHTML += mult;
						    dados.push(mult);
						    limpa=0;
							control=0;
						}
					  }
					  Pisca();
					}
					//Função  que insere o símbolo da operação de divisão na tela e no vetor dados. 
					function divisao(){
					    
						var div = "/";
						
						if (control>0){
						  if(limpa>0){
						     Numero[0] = ResulFinal;
						     document.getElementById("tela").innerHTML += div;
						     dados.push(div);
						     limpa=0;
							 control=0;
						}
						  else{
						    document.getElementById("tela").innerHTML += div;
						    dados.push(div);
						    limpa=0;
							control=0;
						}
					  }
					  Pisca();
					}
					
					//Função que serve para limpar o vetor dados.
				    function LimpaDados(){
				       var tam = dados.length;
					   for(var o=0;o<=tam;o++){
					   dados.shift();
					  }
				    }
				    //Função que serve para limpar o vetor Número.
				    function LimpaNumero(){
				      var tam = Numero.length;
					  for(var o=0;o<=tam;o++){
					  Numero.shift();
					 }
					  Numero = [""];
				    }
				   //Função que serve para limpar o vetor operacao.
				   function LimpaOperacao(){
				     var tam = operacao.length;
					 for(var o=0;o<=tam;o++){
					   operacao.shift();
					}
				   }
				   //Função responsavél pelo pisco da borda da  tela da calculadora.
				   function Pisca(){
				     var borda = document.getElementById("tela");
					 borda.style.borderColor = "#0000ff";
					 setTimeout(RemovePisca,1000/3);
				   }
				   //Função responsavél pelo pisco da borda da  tela da calculadora.
				   function RemovePisca(){
				     var borda = document.getElementById("tela");
					 borda.style.borderColor = "#000000";
				   }
				   //Função responsavél pelo mensagem I'm alive quando o cursor passa por cima da tela.
				   function InseriViva(){
				     var tela = document.getElementById("tela");
					 tela.style.backgroundColor="aqua";
					 tela.style.color="red";
					 tela.style.borderColor="black";
					 tela.innerHTML="I'm alive";
				   }
				   //Função responsavél pela mensagem I'm alive quando o cursor sai de cima da tela.
				   function RemovaViva(){
				     var tela = document.getElementById("tela");
					 tela.innerHTML="";
					 tela.style.backgroundColor=" #7FFFD4";
					 tela.style.color="#000000";
					 tela.style.borderColor="#000000";
				   }
				   //Função responsavél por apagar valores inseridos errado pelo usuário.
				   function apagar(event){
					 var tecla =  event.which || event.keyCode;
					 var ap;
					  if(tecla == 8){
						 ap = dados.length - 1;
						 dados.splice(ap,1);
						}	
					}
					 
					//Essa é a função principal do programa.
					function calculo(){
					 
					 var n = 0;//variavél de controle de posições no vetor Numero.
					 var op = 0;//variavel de controle de posições no calculo.
					 var op2 = 1;//variavel de controle de posições no calculo.
					 var resultado = 0;//variável que armazena a quantidade de vezes que um símbolo aritmérico apareceu no vetor operacao.
					 
					/*Esse for é responsável pelo preenchimento do vetor Numero com os valores que serão calculados
					 *cada posição desse vetor receberá um número.
					 */
					 
					 alert(dados);
					 
					 for(var i=0;i<dados.length;i++){
					 
					 if((dados[i]!="+")&&(dados[i]!="-")&&(dados[i]!="x")&&(dados[i]!="/")){
					    Numero[n] = Numero[n]+dados[i];
					 }
					 else{
					    n++;
						operacao.push(dados[i]);
						Numero[n]="";//Preenche o próximo campo do vetor Numero com uma string.
					}
					 alert(Numero);
					}
					
					/* Nesse trecho do código os dados do vetor número são convertidos do tipo string para númerico*/
					
					for(var j=0;j<Numero.length;j++){
					   Numero[j] = parseInt(Numero[j]);
					   alert(Numero);
					}
					
					/* A partir daqui começa os calculos*/
					
					/*Irei dividir as operações em duas partes a primeira irá tratar do calculo com números iguais.
					 *Exemplo : 2x2x2x2x2x2.
					 *Já a segunda etapa irá trabalhar com o calculo dos números diferentes.
					 *Exemplo : 2+2+3-1+4x10+50/2
					 */
					 
					 /*Aqui começa a primeira etapa do processo*/
					    
					 /*Primeiro vamos descobrir se todas as operações são iguais
					  *O código abaixo serve para verificar se todas as operações são iguais
					  */
					  var igual = 0;
					  
					  if(operacao[0]=="x"){
						  for(var k=0;k<=operacao.length;k++){
						   if(operacao[k]=="x"){
						     igual++;
						    }
						   else{
						     break;
						    }
						 }
					 }
					  else if(operacao[0]=="/"){
						  for(var k=0;k<=operacao.length;k++){
						   if(operacao[k]=="/"){
						     igual++;
						    }
						   else{
						     break;
						    }
						 }
					 }
					  else if(operacao[0]=="+"){
						  for(var k=0;k<=operacao.length;k++){
						   if(operacao[k]=="+"){
						     igual++;
						    }
						   else{
						     break;
						    }
						 }
					 }
					  else if(operacao[0]=="-"){
						  for(var k=0;k<=operacao.length;k++){
						   if(operacao[k]=="-"){
						     igual++;
						    }
						   else{
						     break;
						    }
						 }
					 }
					  //Aqui termina a verificação//
					 /*
					  *Nesse trecho começa as operações matemáticas, se todas as operações são iguais
					  *as instruções dentro do  if são executadas senão as operações dentro do else são 
					  * executadas.
					  */
					  
				     if(igual == operacao.length){
					     if(operacao[0]=="x"){
					        for(var l=0;l<operacao.length;l++){
					         Numero[op] = Numero[op]*Numero[op2];
						     Numero.splice(op2,1);
					        }
						}
					     else if(operacao[0]=="/"){
						    for(var l=0;l<operacao.length;l++){
					         Numero[op] = Numero[op]/Numero[op2];
						     Numero.splice(op2,1);
						    }
						}
						else if(operacao[0]=="+"){
						    for(var l=0;l<operacao.length;l++){
					         Numero[op] = Numero[op]+Numero[op2];
						     Numero.splice(op2,1);
						    }
						}
						else if(operacao[0]=="-"){
						    for(var l=0;l<operacao.length;l++){
					        Numero[op] = Numero[op]-Numero[op2];
						    Numero.splice(op2,1);
						   }
					    }
					 ResulFinal = Numero[0];
					 document.getElementById("tela").innerHTML = Numero;
					 limpa = 1;
					/*Aqui termina a primeira etapa do processo*/
					
					/*Aqui começa a segunda etapa do processo*/
				  }else{
				       alert("entrou no outro");
				       for(var m=0;m<operacao.length;m++){
					     if(operacao[m]=="x"){
						    Numero[op] = Numero[op]*Numero[op+1];
							Numero.splice(op+1,1);
						 }
						 else if(operacao[m]=="/"){
						    Numero[op] = Numero[op]/Numero[op+1];
							Numero.splice(op+1,1);
						 }
						 else{
						    op++;
						 }
					   }
					   op=0;
					   for(var n=0;n<operacao.length;n++){
					     if(operacao[n]=="+"){
						    Numero[op] = Numero[op]+Numero[op2];
							Numero.splice(op+1,1);
						 }
						 else if(operacao[n]=="-"){
						    Numero[op] = Numero[op]-Numero[op2];
							Numero.splice(op+1,1);
						 }
					   }
					ResulFinal = Numero[0];
					document.getElementById("tela").innerHTML = Numero;
					limpa = 1;
				   }
				   LimpaDados();
			       LimpaNumero();
				   LimpaOperacao();
				}
				  
		    </script>
	  
	  
	  </body>
	  
	  
</html>

Na classe CSS #tela:

  • tire o padding-left
  • adicione um tamanho fixo: width: 150px;
  • e adicione isso: direction: rtl;
1 Curtida

Vlw funcionou aqui, só mais uma dúvida como faço pra remover os valores da div tela? Queria fazer algo parecido com a calculadora do google quando o usuário pressiona a tela backspace e os algarismos vão sendo apagados.

Eu já consegui fazer a lógica só falta o efeito visual pro usuário.

Obrigado.

//