Skip to content

Instantly share code, notes, and snippets.

@Roberto24p

Roberto24p/estilos.css

Created December 27, 2019 02:45
Show Gist options
  • Save Roberto24p/56a16545b40be7f3f1f9d62fef9e7e36 to your computer and use it in GitHub Desktop.
Save Roberto24p/56a16545b40be7f3f1f9d62fef9e7e36 to your computer and use it in GitHub Desktop.
Download ZIP
Calculadora hecha con html, css y javascript - Practica
Raw
estilos.css
table,td{
border: 1px solid rgb(0, 110, 255);
padding: 25px;
background: rgb(206, 201, 201);
border-radius: 5px;
}
table{
/*border-collapse: collapse;*/
position: absolute;
left:550px;
top: 65px;
border-radius: 10px 10px 10px 10px;
}
.sup{
background: rgb(206, 201, 201);
border: 1px solid rgb(0, 110, 255);
border-radius: 5px;
padding: 25px;
left: 545px;
position: relative;
width: 244px;
}
.display{
border: 2px dashed rgb(5, 255, 5);
position: absolute;
width: 245px;
height:40px;
border-radius: 10px;
bottom: 3px;
background: black;
}
a{
text-decoration: none;
color: black;
}
td:hover{
opacity:.6;
}
p{
color:white;
}
Raw
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="estilos.css" >
<title >Calculadura</title>
</head>
<body>
<div class="sup">
<div class="display" id="disp"> </div>
</div>
<table>
<tr>
<td id="uno" onclick="main('uno')">1</td>
<td id="dos" onclick="main('dos')">2</td>
<td id="tres" onclick="main('tres')">3</td>
<td id="mas" onclick="main('mas')">+</td>
</tr>
<tr>
<td id="cuatro" onclick="main('cuatro')">4</td>
<td id="cinco" onclick="main('cinco')">5</td>
<td id="seis" onclick="main('seis')">6</td>
<td id="menos" onclick="main('menos')">-</td>
</tr>
<tr>
<td id="siete" onclick="main('siete')">7</td>
<td id="ocho" onclick="main('ocho')">8</td>
<td id="nueve" onclick="main('nueve')">9</td>
<td id="div" onclick="main('div')">/</td>
</tr>
<tr>
<td id="cero" onclick="main('cero')">0</td>
<td id="reset" onclick="main('reset')">C</td>
<td id="mult" onclick="main('mult')">x</td>
<td id="igual" onclick="main('igual')">=</td>
</tr>
</table>
<script type="text/javascript">
var numero;
var numero2;
var signo;
function main(aidi){
var di = document.getElementById("disp");
var valor = document.getElementById(aidi).textContent;
if(valor=='C'){
di.innerHTML='<p> </p';
numero=null; numero2 =null; signo=null;
}else{
if(valor!='+'&valor!='-'&valor!='='&valor!='x'&valor!='/'){
if(numero==null){
numero=valor;
di.innerHTML = '<p>'+numero+'</p>';
}else{
numero= numero+valor;
di.innerHTML = '<p>'+numero+'</p>';
if(numero>100000000000000000){
alert("No se admiten numeros tan altos");
numero=null; numero2 =null; signo=null;
di.innerHTML='<p> </p';
}
}
}else{
if(numero2==null){
signo = valor;
numero2 = numero;
numero=null;
}else{
if(valor=="="){
if(signo=="+"){
numero2 = (numero*1+1*numero2);
}else if(signo=="-"){
numero2 = (1*numero2)-(numero*1);
}else if(signo=="x"){
numero2 = numero*numero2;
}else if(signo=="/"){
numero2 = numero2/numero;
}
di.innerHTML = '<p>'+numero2+'</p>';
}
}
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment