Commit 2563cd10 by Silvia Barrientos

add js

parents
Instrucciones
-Selecionar carpeta de proyecto.
-Abrir carpeta de proyecto en el editor de texto preferido.
-Ubicarse en el archivo raiz y ejecutar el archivo .html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calculadora</title>
<link rel="stylesheet" href="styles.css">
</head>
<body onload="init()">
<script src="javaScript2.js"></script>
<div class="calculadora">
<div class="teclas">
<div class="pantalla">
<div id="resultado"></div>
</div>
<div>
<button id="uno">1</button>
<button id=dos>2</button>
<button id="tres">3</button>
</div>
<div>
<button id="cuatro">4</button>
<button id="cinco">5</button>
<button id="seis">6</button>
</div>
<div>
<button id="siete">7</button>
<button id="ocho">8</button>
<button id="nueve">9</button>
</div>
<div>
<button id="cero">0</button>
<button id="suma">+</button>
<button id="resta">_</button>
</div>
<div>
<button id="division">÷</button>
<button id="multiplicacion">x</button>
<button id="esigual">=</button>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
var operacion = "";
var numero1 = 0;
var numero2 = 0;
function init(){
var resultado = document.getElementById("resultado");
var cero = document.getElementById("cero");
var uno = document.getElementById("uno");
var dos = document.getElementById("dos");
var tres = document.getElementById("tres");
var cuatro = document.getElementById("cuatro");
var cinco = document.getElementById("cinco");
var seis = document.getElementById("seis");
var siete = document.getElementById("siete");
var ocho = document.getElementById("ocho");
var nueve = document.getElementById("nueve");
var suma = document.getElementById("suma");
var resta = document.getElementById("resta");
var division = document.getElementById("division");
var multiplicacion = document.getElementById("multiplicacion");
var esigual = document.getElementById("esigual");
cero.onclick = function(){
resultado.textContent = "0";
}
uno.onclick = function(){
resultado.textContent = "1";
}
dos.onclick = function(){
resultado.textContent = "2";
}
tres.onclick = function(){
resultado.textContent = "3";
}
cuatro.onclick = function(){
resultado.textContent = "4";
}
cinco.onclick = function(){
resultado.textContent = "5";
}
seis.onclick = function(){
resultado.textContent = "6";
}
siete.onclick = function(){
resultado.textContent = "7";
}
ocho.onclick = function(){
resultado.textContent = "8";
}
nueve.onclick = function(){
resultado.textContent = "9";
}
suma.onclick = function(){
numero1 = resultado.textContent;
resultado.textContent = "+";
operacion = "+";
}
resta.onclick = function(){
numero1 = resultado.textContent;
resultado.textContent = "-";
operacion = "-";
}
division.onclick = function(){
numero1 = resultado.textContent;
resultado.textContent = "/";
operacion = "/";
}
multiplicacion.onclick = function(){
numero1 = resultado.textContent;
resultado.textContent = "*";
operacion = "*";
}
esigual.onclick = function(){
numero2 = resultado.textContent;
switch(operacion){
case "+":
resultado.textContent = parseInt(numero1) + parseInt(numero2);
break;
case "-":
resultado.textContent = parseInt(numero1) - parseInt(numero2);
break;
case "/":
resultado.textContent = parseInt(numero1) / parseInt(numero2);
break;
case "*":
resultado.textContent = parseInt(numero1) * parseInt(numero2);
break;
}
}
}
\ No newline at end of file
.calculadora {
display: flex;
justify-content: center;
margin-top: 35px
}
button {
margin: 2px 0px;
padding: 15px 24px;
font-size: 15px;
}
.teclas {
display: grid;
justify-content: center;
width: 250px;
background-color: black;
}
.pantalla {
width: 220px;
height: 100px;
background-color: gray;
border: 1px solid black;
}
\ 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