Commit 22d39e38 by Cristhian Ortellado

Se agregaron los datos

parent 65de95b8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora</title>
<link rel="stylesheet" href="css/syles.css">
</head>
<body>
<div class="contenedor">
<div id="resultado"></div>
<div class="botones">
<div class="numeros">
<input class="boton" type="button" value="1">
<input class="boton" type="button" value="2">
<input class="boton" type="button" value="3">
<input class="boton" type="button" value="4">
<input class="boton" type="button" value="5">
<input class="boton" type="button" value="6">
<input class="boton" type="button" value="7">
<input class="boton" type="button" value="8">
<input class="boton" type="button" value="9">
<input class="boton" type="button" value=".">
</div>
<div class="operaciones">
<input class="boton" type="button" value="+">
<input class="boton" type="button" value="-">
<input class="boton" type="button" value="/">
<input class="boton" type="button" value="*">
<input class="boton" type="button" value="Calcular">
<input class="boton" type="button" value="AC">
</div>
</div>
</div>
</body>
<script src="js/main.js"></script>
</html>
\ No newline at end of file
* {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.contenedor {
background-color: rgba(0, 0, 0, 0.2);
width: 10rem;
display: flex;
flex-direction: column;
border-radius: .5em;
margin: 0 auto;
}
#resultado {
width: 100%;
background-color: rgba(90, 60, 100, .5);
padding: 1em 0;
border-radius: .5em .5em 0 0;
text-align: center;
}
.botones {
display: flex;
flex-direction: row;
margin-top: 5px;
text-align: center;
}
.numeros {
width: 65%;
border-right: 1px solid white;
margin-right: 2px;
}
input {
border-radius: 10px;
border-color: rgba(0, 0, 0, .2);
}
.operaciones {
display: flex;
flex-direction: column;
}
\ No newline at end of file
//variable para agregar texto a la pantalla de la calculadora
var cadena = document.getElementById("resultado");
var botones = document.getElementsByClassName("boton");
//cargamos los eventos
for (let i = 0; i < botones.length; i++) {
// botones[i].addEventListener("click", imprimirPantalla);
botones[i].onclick = imprimirPantalla;
}
function imprimirPantalla() {
if (this.value != "Calcular" && this.value != "AC") {
//mientras no se precione el boton de calcular entonces concatenamos
cadena.innerHTML += this.value;
} else if (this.value == "Calcular") {
var pantalla = cadena.innerHTML;
var i = 0;
//buscamos la operacion a realizar
while (true) {
if (pantalla[i] == '-' || pantalla[i] == '+' || pantalla[i] == '/' || pantalla[i] == '*') {
break;
}
i++;
}
//extraemos los numeros como cadenas
var primerNumero = pantalla.substring(0, i);
var segundoNumero = pantalla.substring(i + 1);
//guardamos el numero a comparar
var key = pantalla.charAt(i);
var resultado = 0;
switch (key) {
case '+':
resultado = parseFloat(primerNumero) + parseFloat(segundoNumero);
break;
case '-':
resultado = parseFloat(primerNumero) - parseFloat(segundoNumero);
break
case '*':
resultado = parseFloat(primerNumero) * parseFloat(segundoNumero);
break
case '/':
resultado = parseFloat(primerNumero) / parseFloat(segundoNumero);
break
default:
break;
}
cadena.innerHTML = resultado;
} else {
cadena.innerHTML = "";
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment