Como hacer una Calculadora Básica con HTML y Java Script en Atom.
En el siguiente articulo se muestra como hacer una calculadora básica con HTML y Java Script.
Creamos la carpeta del proyecto.
Creamos dos archivos uno .html y otro .js.
Yo los abriré a traves de Atom.
Procedemos a escribir el código html y java script.
Una vez escrito.
Lo vamos a guardar.
Procedemos a hacer las pruebas necesarias.
El código HTML es el siguiente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="calculadora.js"></script>
<title>Document</title>
</head>
<body>
<input id="num1" placeholder="Introduce Numero 1"><br>
<input id="num2" placeholder="Introduce Numero 2"><br>
<button type="button" onclick="myFunctionSuma()">Sumar</button>
<button type="button" onclick="myFunctionRestar()">Restar</button>
<button type="button" onclick="myFunctionMultiplicar()">Multiplicar</button>
<button type="button" onclick="myFunctionDividir()">Dividir</button>
<p id="resultado"></p>
</body>
</html>
Codigo Java Script.
function myFunctionSuma() {
var x,y,suma,resultado;
x = document.getElementById("num1").value;
y = document.getElementById("num2").value;
suma = parseFloat(x)+parseFloat(y);
resultado = suma;
document.getElementById("resultado").innerHTML = resultado;
}
function myFunctionRestar(){
var x,y,resta,resultado;
x = document.getElementById("num1").value;
y = document.getElementById("num2").value;
resta = parseFloat(x)-parseFloat(y);
resultado = resta;
document.getElementById("resultado").innerHTML = resultado;
}
function myFunctionMultiplicar() {
var x,y,multiplicacion,resultado;
x = document.getElementById("num1").value;
y = document.getElementById("num2").value;
multiplicacion = parseFloat(x)*parseFloat(y);
resultado = multiplicacion;
document.getElementById("resultado").innerHTML = resultado;
}
function myFunctionDividir() {
var x,y,division,resultado;
x = document.getElementById("num1").value;
y = document.getElementById("num2").value;
if( y > 0){
division =parseFloat(x)/parseFloat(y);
resultado = division;
}else{
resultado = "No se puede divir entre 0";
}
document.getElementById("resultado").innerHTML = resultado;
}
Link de los archivos.
Comentarios
Publicar un comentario