valdiney/gist:6047593

## gistfile1.html
<!doctype html>
<html lang="pt-br">
<head>
<script src="js/core.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Calculadora js</title>
</head>

<body>
<span id="erros">Calculadora (JS): Por Valdiney França</span>
<img id="logo_ubuntu" src="imagens/logo_ubuntu.png" width="150"></img>


<div id="div_visor"><input type="text" id="visor" disabled="disabled" placeholder="0.00"/></div>
<table id="table_calculadora" border="0">

<tr>
<td><button id="sete" value="7">7</button></td>
<td><button id="oito" value="8">8</button></td>
<td><button id="nove" value="9">9</button></td>
<td><button id="operador_multiplicar" value="*">X</button></td>
<td><button id="operador_divisao" value="/">/</button></td>
<td><button id="parentese_left" value="(">(</button></td>
<td><button id="parentese_right" value=")">)</button></td>
</tr>

<tr>
<td><button id="quatro" value="4">4</button></td>
<td><button id="cinco" value="5">5</button></td>
<td><button id="seis" value="6">6</button></td>
<td><button id="operador_diminuir" value="-">-</button></td>
<td><button id="raiz_quadrada" value="rootSquare">&#x221A;</button></td>
</tr>

<tr>
<td><button id="um" value="1">1</button></td>
<td><button id="dois" value="2">2</button></td>
<td><button id="tres" value="3">3</button></td>
<td><button id="operador_mais" value="+">+</button></td>
<td><button id="porcentagem">%</button></td>
</tr>

<tr>
<td><button id="zero" value="0">0</button></td>
<td><button id="ponto" value=".">.</button></td>
<td><button id="igual">=</button></td>
<td><button id="limpar" title="Limpar campo"></button></td>
<td><button id="pi" title="Constante PI">&#x3C0;</button></td>
</tr>


</table>

<div id="relatorios_operandos">
<b id="b_resultados"></b>
</div>

</body>

</html>

## gistfile2.css
body{
 background:/*#d1d1d1*/#9a9498;
 font-family:candara;
 margin:0px;
}
#logo_ubuntu{
 display:block;
 margin:auto;
 margin-top:10px;
 border:1px solid gray;
 border-radius:50px;
 padding:5px;
 -webkit-animation:animation_ubuntu 1.5s infinite;
 -moz-animation:animation_ubuntu 1.5s infinite;
 -o-animation:animation_ubuntu 1.5s infinite;
 -ms-animation:animation_ubuntu 1.5s infinite;
}
@-webkit-keyframes animation_ubuntu{
 90%{
 opacity:0.60;
 }
 80%{
 opacity:0.90;
 }
 60%{
 opacity:0.5;
 }
 40%{
 border:1px solid black;
 box-shadow:black 1px 1px 8px inset;
 }
 20%{
 background:#c5c6c5;
 }
 5%{
 background:#b8a59f;
 }
}
/*.....................................*/
@-moz-keyframes animation_ubuntu{
 90%{
 opacity:0.60;
 }
 80%{
 opacity:0.90;
 }
 60%{
 opacity:0.5;
 }
 40%{
 border:1px solid black;
 box-shadow:black 1px 1px 8px inset;
 }
 20%{
 background:#c5c6c5;
 }
 5%{
 background:#b8a59f;
 }
}
/*.....................................*/
@-o-keyframes animation_ubuntu{
 90%{
 opacity:0.60;
 }
 80%{
 opacity:0.90;
 }
 60%{
 opacity:0.5;
 }
 40%{
 border:1px solid black;
 box-shadow:black 1px 1px 8px inset;
 }
 20%{
 background:#c5c6c5;
 }
 5%{
 background:#b8a59f;
 }
}
/*.....................................*/
@-ms-keyframes animation_ubuntu{
 90%{
 opacity:0.60;
 }
 80%{
 opacity:0.90;
 }
 60%{
 opacity:0.5;
 }
 40%{
 border:1px solid black;
 box-shadow:black 1px 1px 8px inset;
 }
 20%{
 background:#c5c6c5;
 }
 5%{
 background:#b8a59f;
 }
}


#div_visor{
 width:360px;
 margin:auto;
 padding:5px;
}
#visor{
 width:350px;
 padding:5px;
 font-size:20px;
 outline:none;
 border:1px solid black;
 border-radius:5px;
 box-shadow:#293134 1px 1px 3px inset;
 background-position:right;
 background:;
 color:white;
 text-shadow:black 1px 1px 1px;
 background-image:url('img_config/fundo_visor.png')!important;

}
#table_calculadora{
 margin:auto;
 border:1px solid #293134;
 padding:10px;
 box-shadow:#293134 1px 1px 3px inset;
 border-radius:5px;
 background-image:-webkit-linear-gradient(#66645c,#393b39);
 background-image:-moz-linear-gradient(#66645c,#393b39);
 background-image:-o-linear-gradient(#66645c,#393b39);
 background-image:-ms-linear-gradient(#66645c,#393b39);
 margin-bottom:10px;
}
#igual,#operador_mais,#operador_diminuir,#operador_divisao,#operador_multiplicar,#pi,#porcentagem,#raiz_quadrada{
 background-image:-webkit-linear-gradient(gray,#cdcdcd,#f5f5f5)!important;
 background-image:-moz-linear-gradient(gray,#cdcdcd,#f5f5f5)!important;
 background-image:-o-linear-gradient(gray,#cdcdcd,#f5f5f5)!important;
 background-image:-ms-linear-gradient(gray,#cdcdcd,#f5f5f5)!important;
 opacity:0.80;
}
#table_calculadora button{
 width:60px;
 padding:10px;
 font-size:20px;
 background-image:-webkit-linear-gradient(#f5f5f5,#cdcdcd,gray);
 background-image:-moz-linear-gradient(#f5f5f5,#cdcdcd,gray);
 background-image:-o-linear-gradient(#f5f5f5,#cdcdcd,gray);
 background-image:-ms-linear-gradient(#f5f5f5,#cdcdcd,gray);
 box-shadow:silver 1px 1px 1px inset;
 border:1px solid #293134;
 border-radius:3px;
}
#ponto{
 font-weight:bold;
}
#igual{
 border:1px solid black!important;
}
#table_calculadora button:hover{
 opacity:0.70;
 border:1px solid black;
}
#table_calculadora button:active{
  box-shadow:gray 2px 2px 3px inset;
  color:#003366;
}
#erros{
 display:block;
 width:auto;
 margin:auto;
 background:#393b39;
 background-image:-webkit-linear-gradient(#66645c,#393b39);
 background-image:-moz-linear-gradient(#66645c,#393b39);
 background-image:-o-linear-gradient(#66645c,#393b39);
 background-image:-ms-linear-gradient(#66645c,#393b39);
 color:white;
 padding:10px;
 text-align:center;
 box-shadow:black 1px 1px 5px;
}

#relatorios_operandos{
 color:black;
 font-size:18px;
 width:400px;
 border:1px solid black;
 margin:auto;
 padding:10px;
 text-shadow:white 1px 1px 1px;
 opacity:0.50;
 border:0px;
}
#relatorios_operandos b{
 width:auto;
 padding:5px;
 border:1px solid silver;
 margin-left:5px;
 background:white;
 display:block;
 text-align:center;
 font-family:arial!important;
 box-shadow:silver 1px 1px 3px inset;
 border-radius:5px;
}
#parentese_left,#parentese_right{
 width:20px!important;
 padding:5px!important;
 background:#333300!important;
 background-image:-webkit-linear-gradient(#9e9e8d,#333300)!important;
 background-image:-moz-linear-gradient(#9e9e8d,#333300)!important;
 background-image:-o-linear-gradient(#9e9e8d,#333300)!important;
 background-image:-ms-linear-gradient(#9e9e8d,#333300)!important;
 color:white;
 opacity:0.80;
}
span{
 color:#ff3300;
}
#limpar{
 opacity:0.80;
 background-image:url('img_config/lixo.png')!important;
 background-repeat:no-repeat;
 background-position:center;
 height:47px;
}

## gistfile3.js
///////////////////////////////////////////////////////

// Projeto Calculadora JS
// Autor: Valdiney França
// Data: 21/07/2013

//////////////////////////////////////////////////////

 window.onload = function() {

 var messageError = document.getElementById('erros'),
 reportCalculator = document.getElementById('b_resultados'),
 visor = document.getElementById('visor').value;


/////////////////////////////////////////////////////
// Class Math functions
////////////////////////////////////////////////////

 function MathFunctions(visor) {
  this.visor = visor;
  this.rootSquare = function() {
    organizeNumbers(' = Raiz ' + Math.sqrt(this.visor));
  };

  this.percentage = function() {
    organizeNumbers('/100');
  };

  this.constantPI = function() {
    organizeNumbers(' PI = '+2*Math.PI*this.visor);
  };
 }

///////////////////////////////////////////////////////


///////////////////////////////////////////////////////
// Loop search values of the buttons in html elements
//////////////////////////////////////////////////////

 var buttons = document.getElementsByTagName('button');
  for(var i = 0; i< buttons.length; i++) {
    buttons[i].onclick = includeValuesButtons(i);
 }

//////////////////////////////////////////////////////
// This function include the values of the buttons in the function 'organizeNumbers'.
/////////////////////////////////////////////////////

 function includeValuesButtons(values) {
  return function() {
    organizeNumbers(document.getElementsByTagName('button')[values].value);
  }
 }

//////////////////////////////////////////////////////
// To organize the numbers in the visor
/////////////////////////////////////////////////////

 function organizeNumbers(numbers) {
    document.getElementById('visor').value = document.getElementById('visor').value + numbers;
 }

/////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////
// This functions call the some function of the class MathFunctions
//////////////////////////////////////////////////////////////////////

 var buttonRootSquare = document.getElementById('raiz_quadrada').onclick = function() {
  var Math = new MathFunctions(document.getElementById('visor').value);
   Math.rootSquare();
 }

 var porcentagem = document.getElementById('porcentagem').onclick = function() {
  var Math = new MathFunctions(document.getElementById('visor').value);
   Math.percentage();
 }

 var constante_pi = document.getElementById('pi').onclick = function() {
  var Math = new MathFunctions(document.getElementById('visor').value);
   Math.constantPI();
 }

/////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////
// Function 'ecuals' make the calculation
/////////////////////////////////////////////////////

 var equals = document.getElementById('igual').onclick = function() {
  var visor = document.getElementById('visor').value;

  if(visor == '') {
     messageError.innerHTML = 'Digite números e operadores antes de computar. Exemplo: 5+3';
   }
  else {
    reportCalculator.innerHTML += visor+' = ';
    document.getElementById('visor').value = eval(document.getElementById('visor').value);
    reportCalculator.innerHTML +=  eval(document.getElementById('visor').value)+', ';
    messageError.innerHTML = 'Calculadora (JS): Por Valdiney França';
  }
 }

//////////////////////////////////////////////////////

/////////////////////////////////////////////////////
// This function clean the visor values
////////////////////////////////////////////////////

var cleanVisor = document.getElementById('limpar').onclick = function(){
  document.getElementById('visor').value = '';
 }


} // end window
	<!doctype html>
	<html lang="pt-br">
	<head>
	<script src="js/core.js"></script>
	<link rel="stylesheet" href="css/style.css" type="text/css"/>
	<title>Calculadora js</title>
	</head>

	<body>
	<span id="erros">Calculadora (JS): Por Valdiney França</span>
	<img id="logo_ubuntu" src="imagens/logo_ubuntu.png" width="150"></img>


	<div id="div_visor"><input type="text" id="visor" disabled="disabled" placeholder="0.00"/></div>
	<table id="table_calculadora" border="0">

	<tr>
	<td><button id="sete" value="7">7</button></td>
	<td><button id="oito" value="8">8</button></td>
	<td><button id="nove" value="9">9</button></td>
	<td><button id="operador_multiplicar" value="*">X</button></td>
	<td><button id="operador_divisao" value="/">/</button></td>
	<td><button id="parentese_left" value="(">(</button></td>
	<td><button id="parentese_right" value=")">)</button></td>
	</tr>

	<tr>
	<td><button id="quatro" value="4">4</button></td>
	<td><button id="cinco" value="5">5</button></td>
	<td><button id="seis" value="6">6</button></td>
	<td><button id="operador_diminuir" value="-">-</button></td>
	<td><button id="raiz_quadrada" value="rootSquare">√</button></td>
	</tr>

	<tr>
	<td><button id="um" value="1">1</button></td>
	<td><button id="dois" value="2">2</button></td>
	<td><button id="tres" value="3">3</button></td>
	<td><button id="operador_mais" value="+">+</button></td>
	<td><button id="porcentagem">%</button></td>
	</tr>

	<tr>
	<td><button id="zero" value="0">0</button></td>
	<td><button id="ponto" value=".">.</button></td>
	<td><button id="igual">=</button></td>
	<td><button id="limpar" title="Limpar campo"></button></td>
	<td><button id="pi" title="Constante PI">π</button></td>
	</tr>


	</table>

	<div id="relatorios_operandos">
	<b id="b_resultados"></b>
	</div>

	</body>

	</html>
	body{
	background:/#d1d1d1/#9a9498;
	font-family:candara;
	margin:0px;
	}
	#logo_ubuntu{
	display:block;
	margin:auto;
	margin-top:10px;
	border:1px solid gray;
	border-radius:50px;
	padding:5px;
	-webkit-animation:animation_ubuntu 1.5s infinite;
	-moz-animation:animation_ubuntu 1.5s infinite;
	-o-animation:animation_ubuntu 1.5s infinite;
	-ms-animation:animation_ubuntu 1.5s infinite;
	}
	@-webkit-keyframes animation_ubuntu{
	90%{
	opacity:0.60;
	}
	80%{
	opacity:0.90;
	}
	60%{
	opacity:0.5;
	}
	40%{
	border:1px solid black;
	box-shadow:black 1px 1px 8px inset;
	}
	20%{
	background:#c5c6c5;
	}
	5%{
	background:#b8a59f;
	}
	}
	/...................................../
	@-moz-keyframes animation_ubuntu{
	90%{
	opacity:0.60;
	}
	80%{
	opacity:0.90;
	}
	60%{
	opacity:0.5;
	}
	40%{
	border:1px solid black;
	box-shadow:black 1px 1px 8px inset;
	}
	20%{
	background:#c5c6c5;
	}
	5%{
	background:#b8a59f;
	}
	}
	/...................................../
	@-o-keyframes animation_ubuntu{
	90%{
	opacity:0.60;
	}
	80%{
	opacity:0.90;
	}
	60%{
	opacity:0.5;
	}
	40%{
	border:1px solid black;
	box-shadow:black 1px 1px 8px inset;
	}
	20%{
	background:#c5c6c5;
	}
	5%{
	background:#b8a59f;
	}
	}
	/...................................../
	@-ms-keyframes animation_ubuntu{
	90%{
	opacity:0.60;
	}
	80%{
	opacity:0.90;
	}
	60%{
	opacity:0.5;
	}
	40%{
	border:1px solid black;
	box-shadow:black 1px 1px 8px inset;
	}
	20%{
	background:#c5c6c5;
	}
	5%{
	background:#b8a59f;
	}
	}


	#div_visor{
	width:360px;
	margin:auto;
	padding:5px;
	}
	#visor{
	width:350px;
	padding:5px;
	font-size:20px;
	outline:none;
	border:1px solid black;
	border-radius:5px;
	box-shadow:#293134 1px 1px 3px inset;
	background-position:right;
	background:;
	color:white;
	text-shadow:black 1px 1px 1px;
	background-image:url('img_config/fundo_visor.png')!important;

	}
	#table_calculadora{
	margin:auto;
	border:1px solid #293134;
	padding:10px;
	box-shadow:#293134 1px 1px 3px inset;
	border-radius:5px;
	background-image:-webkit-linear-gradient(#66645c,#393b39);
	background-image:-moz-linear-gradient(#66645c,#393b39);
	background-image:-o-linear-gradient(#66645c,#393b39);
	background-image:-ms-linear-gradient(#66645c,#393b39);
	margin-bottom:10px;
	}
	#igual,#operador_mais,#operador_diminuir,#operador_divisao,#operador_multiplicar,#pi,#porcentagem,#raiz_quadrada{
	background-image:-webkit-linear-gradient(gray,#cdcdcd,#f5f5f5)!important;
	background-image:-moz-linear-gradient(gray,#cdcdcd,#f5f5f5)!important;
	background-image:-o-linear-gradient(gray,#cdcdcd,#f5f5f5)!important;
	background-image:-ms-linear-gradient(gray,#cdcdcd,#f5f5f5)!important;
	opacity:0.80;
	}
	#table_calculadora button{
	width:60px;
	padding:10px;
	font-size:20px;
	background-image:-webkit-linear-gradient(#f5f5f5,#cdcdcd,gray);
	background-image:-moz-linear-gradient(#f5f5f5,#cdcdcd,gray);
	background-image:-o-linear-gradient(#f5f5f5,#cdcdcd,gray);
	background-image:-ms-linear-gradient(#f5f5f5,#cdcdcd,gray);
	box-shadow:silver 1px 1px 1px inset;
	border:1px solid #293134;
	border-radius:3px;
	}
	#ponto{
	font-weight:bold;
	}
	#igual{
	border:1px solid black!important;
	}
	#table_calculadora button:hover{
	opacity:0.70;
	border:1px solid black;
	}
	#table_calculadora button:active{
	box-shadow:gray 2px 2px 3px inset;
	color:#003366;
	}
	#erros{
	display:block;
	width:auto;
	margin:auto;
	background:#393b39;
	background-image:-webkit-linear-gradient(#66645c,#393b39);
	background-image:-moz-linear-gradient(#66645c,#393b39);
	background-image:-o-linear-gradient(#66645c,#393b39);
	background-image:-ms-linear-gradient(#66645c,#393b39);
	color:white;
	padding:10px;
	text-align:center;
	box-shadow:black 1px 1px 5px;
	}

	#relatorios_operandos{
	color:black;
	font-size:18px;
	width:400px;
	border:1px solid black;
	margin:auto;
	padding:10px;
	text-shadow:white 1px 1px 1px;
	opacity:0.50;
	border:0px;
	}
	#relatorios_operandos b{
	width:auto;
	padding:5px;
	border:1px solid silver;
	margin-left:5px;
	background:white;
	display:block;
	text-align:center;
	font-family:arial!important;
	box-shadow:silver 1px 1px 3px inset;
	border-radius:5px;
	}
	#parentese_left,#parentese_right{
	width:20px!important;
	padding:5px!important;
	background:#333300!important;
	background-image:-webkit-linear-gradient(#9e9e8d,#333300)!important;
	background-image:-moz-linear-gradient(#9e9e8d,#333300)!important;
	background-image:-o-linear-gradient(#9e9e8d,#333300)!important;
	background-image:-ms-linear-gradient(#9e9e8d,#333300)!important;
	color:white;
	opacity:0.80;
	}
	span{
	color:#ff3300;
	}
	#limpar{
	opacity:0.80;
	background-image:url('img_config/lixo.png')!important;
	background-repeat:no-repeat;
	background-position:center;
	height:47px;
	}
	///////////////////////////////////////////////////////

	// Projeto Calculadora JS
	// Autor: Valdiney França
	// Data: 21/07/2013

	//////////////////////////////////////////////////////

	window.onload = function() {

	var messageError = document.getElementById('erros'),
	reportCalculator = document.getElementById('b_resultados'),
	visor = document.getElementById('visor').value;


	/////////////////////////////////////////////////////
	// Class Math functions
	////////////////////////////////////////////////////

	function MathFunctions(visor) {
	this.visor = visor;
	this.rootSquare = function() {
	organizeNumbers(' = Raiz ' + Math.sqrt(this.visor));
	};

	this.percentage = function() {
	organizeNumbers('/100');
	};

	this.constantPI = function() {
	organizeNumbers(' PI = '+2Math.PIthis.visor);
	};
	}

	///////////////////////////////////////////////////////


	///////////////////////////////////////////////////////
	// Loop search values of the buttons in html elements
	//////////////////////////////////////////////////////

	var buttons = document.getElementsByTagName('button');
	for(var i = 0; i< buttons.length; i++) {
	buttons[i].onclick = includeValuesButtons(i);
	}

	//////////////////////////////////////////////////////
	// This function include the values of the buttons in the function 'organizeNumbers'.
	/////////////////////////////////////////////////////

	function includeValuesButtons(values) {
	return function() {
	organizeNumbers(document.getElementsByTagName('button')[values].value);
	}
	}

	//////////////////////////////////////////////////////
	// To organize the numbers in the visor
	/////////////////////////////////////////////////////

	function organizeNumbers(numbers) {
	document.getElementById('visor').value = document.getElementById('visor').value + numbers;
	}

	/////////////////////////////////////////////////////

	///////////////////////////////////////////////////////////////////////
	// This functions call the some function of the class MathFunctions
	//////////////////////////////////////////////////////////////////////

	var buttonRootSquare = document.getElementById('raiz_quadrada').onclick = function() {
	var Math = new MathFunctions(document.getElementById('visor').value);
	Math.rootSquare();
	}

	var porcentagem = document.getElementById('porcentagem').onclick = function() {
	var Math = new MathFunctions(document.getElementById('visor').value);
	Math.percentage();
	}

	var constante_pi = document.getElementById('pi').onclick = function() {
	var Math = new MathFunctions(document.getElementById('visor').value);
	Math.constantPI();
	}

	/////////////////////////////////////////////////////////////////////////

	//////////////////////////////////////////////////////
	// Function 'ecuals' make the calculation
	/////////////////////////////////////////////////////

	var equals = document.getElementById('igual').onclick = function() {
	var visor = document.getElementById('visor').value;

	if(visor == '') {
	messageError.innerHTML = 'Digite números e operadores antes de computar. Exemplo: 5+3';
	}
	else {
	reportCalculator.innerHTML += visor+' = ';
	document.getElementById('visor').value = eval(document.getElementById('visor').value);
	reportCalculator.innerHTML += eval(document.getElementById('visor').value)+', ';
	messageError.innerHTML = 'Calculadora (JS): Por Valdiney França';
	}
	}

	//////////////////////////////////////////////////////

	/////////////////////////////////////////////////////
	// This function clean the visor values
	////////////////////////////////////////////////////

	var cleanVisor = document.getElementById('limpar').onclick = function(){
	document.getElementById('visor').value = '';
	}



	} // end window