Commit 002bec99 by Silvia Barrientos

add js

parents
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body onload="init()">
<script src="javaScript.js"></script>
<div class="contenedor">
<div class="numeros">
<button id="dos">2</button>
<button id=cinco>5</button>
<button id="calcular">Calcular</button>
</div>
</div>
</body>
</html>
function init(){
var calcular = document.getElementById("calcular");
calcular.onclick = function() {
var x = 5;
var y = 2;
var operaciones = parseInt(x) + parseInt(y);
console.log("La suma de x más y: " + operaciones);
var operaciones = x - y;
console.log("La resta de x menos y: " + operaciones);
var operaciones = x * y;
console.log("La multiplicacion de x por y: " + operaciones);
var operaciones = x / y;
console.log("La division de x entre y: " + operaciones);
console.log("x elevado a la potencia de y: " + Math.pow(x, y));
var operaciones = x % y;
console.log("El resto de la división entera entre x e y: " + operaciones);
}
}
.contenedor {
width: 100px;
margin: 50px;
height: 100px;
text-align: center;
}
\ No newline at end of file
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