Que tal, hoy realizaremos un pequeño ejemplo para aprender como hacer una calculadora con JavaScript, html y css desde cero, te muestro el código fuente necesario que ocuparemos y te explico la funcionalidad.
La calculadora que realizamos en esta entrada te permite ejecutar las cuatro operaciones básicas que son: sumar, restar, multiplicar y dividir, adicionalmente incluimos un botón para resetear los resultados en caso de querer realizar una nueva operación.
Código html
Dentro de nuestro html creamos la estructura que tendrá nuestra calculadora, lo hacemos mediante una tabla en la cual vamos agregando elementos tipo button para los números y operadores, y un elemento tipo span para mostrar el resultado de las operaciones.
Es importante incluir dentro de la etiqueta body el atributo onload=”init()” para indicarle que una vez que acabe de cargar la página mande llamar el método init que declararemos en el código javascript.
No olvidemos incluir nuestro archivo .css y .js que crearemos más adelante.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Calculadora con JavaScript</title> <link type="text/css" href="estilo.css" rel="stylesheet"> </head> <body onload="init();"> <table class="calculadora"> <tr> <td colspan="4"><span id="resultado"></span></td> </tr> <tr> <td><button id="siete">7</button></td><td><button id="ocho">8</button></td><td><button id="nueve">9</button></td><td><button id="division">/</button></td> </tr> <tr> <td><button id="cuatro">4</button></td><td><button id="cinco">5</button></td><td><button id="seis">6</button></td><td><button id="multiplicacion">*</button></td> </tr> <tr> <td><button id="uno">1</button></td><td><button id="dos">2</button></td><td><button id="tres">3</button></td><td><button id="resta">-</button></td> </tr> <tr> <td><button id="igual">=</button></td><td><button id="reset">C</button></td><td><button id="cero">0</button></td><td><button id="suma">+</button></td> </tr> <tr> <td colspan="4"><span id="creditos">Hecho para DenisseEstrada.com</span></td> </tr> </table> <script src="funcionalidad.js"></script> </body> </html>
Código css
En el css simplemente damos un mejor estilo y diseño a nuestra calculadora.
.calculadora{ display:block; margin:0 auto; padding:20px; background-color:#2980b9; width:300px; height:500px; border-radius: 25px; } .calculadora td button{ display:block; width:70px; height: 70px; font-size: 25px; } #creditos{ display:block; padding-top:20px; color:#fff; text-align: center; width:300px; } #resultado{ display:block; text-align: center; font-size: 40px; margin-bottom: 50px; width:300px; height: 100px; line-height: 100px; background-color:#fff; border-radius: 25px; overflow-y: scroll; }
Código JavaScript
Ahora veamos el código para hacer esta calculadora con javascript, comenzamos declarando tres variables que ocuparemos más adelante para poder realizar las operaciones.
//Declaramos variables var operandoa; var operandob; var operacion;
Enseguida creamos nuestra función init e iniciamos convirtiéndonos en los elementos html por medio de su id y los guardamos en sus respectivas variables para hacer más legible el ejemplo.
function init(){ //variables var resultado = document.getElementById('resultado'); var reset = document.getElementById('reset'); var suma = document.getElementById('suma'); var resta = document.getElementById('resta'); var multiplicacion = document.getElementById('multiplicacion'); var division = document.getElementById('division'); var igual = document.getElementById('igual'); 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 cero = document.getElementById('cero'); }
Dentro de la misma función init nos encargaremos de programar los eventos de click sobre todos los elementos tipo button que son números, operaciones, igual y reset.
//Eventos de click uno.onclick = function(e){ resultado.textContent = resultado.textContent + "1"; } dos.onclick = function(e){ resultado.textContent = resultado.textContent + "2"; } tres.onclick = function(e){ resultado.textContent = resultado.textContent + "3"; } cuatro.onclick = function(e){ resultado.textContent = resultado.textContent + "4"; } cinco.onclick = function(e){ resultado.textContent = resultado.textContent + "5"; } seis.onclick = function(e){ resultado.textContent = resultado.textContent + "6"; } siete.onclick = function(e){ resultado.textContent = resultado.textContent + "7"; } ocho.onclick = function(e){ resultado.textContent = resultado.textContent + "8"; } nueve.onclick = function(e){ resultado.textContent = resultado.textContent + "9"; } cero.onclick = function(e){ resultado.textContent = resultado.textContent + "0"; } reset.onclick = function(e){ resetear(); } suma.onclick = function(e){ operandoa = resultado.textContent; operacion = "+"; limpiar(); } resta.onclick = function(e){ operandoa = resultado.textContent; operacion = "-"; limpiar(); } multiplicacion.onclick = function(e){ operandoa = resultado.textContent; operacion = "*"; limpiar(); } division.onclick = function(e){ operandoa = resultado.textContent; operacion = "/"; limpiar(); } igual.onclick = function(e){ operandob = resultado.textContent; resolver(); }
Dentro de este bloque hacemos referencia a dos funciones, limpiar y resetear que crearemos más adelante.
Para los eventos de suma, resta, multiplicación y división siempre guardamos en la variable operandoa lo que tenemos en el contenedor resultado y la operación que se desea realizar.
Para el botón de igual almacenamos en operandob lo que hay en el contenedor de resultado y mandamos llamar el metodo resolver el cual te explico más adelante.
Enseguida creamos la función limpiar donde simplemente ponemos en vacío el contenedor de resultado y también creamos la función resetear para resetear las variables operandoa, operandob y operacion.
function limpiar(){ resultado.textContent = ""; } function resetear(){ resultado.textContent = ""; operandoa = 0; operandob = 0; operacion = ""; }
Finalmente creamos la función resolver, de acuerdo a los valores que se han ingresado realizamos la operación necesaria y mostramos el resultado en el contenedor de resultado.
function resolver(){ var res = 0; switch(operacion){ case "+": res = parseFloat(operandoa) + parseFloat(operandob); break; case "-": res = parseFloat(operandoa) - parseFloat(operandob); break; case "*": res = parseFloat(operandoa) * parseFloat(operandob); break; case "/": res = parseFloat(operandoa) / parseFloat(operandob); break; } resetear(); resultado.textContent = res; }
Puedes descargar el código fuente de este ejemplo en el siguiente enlace:
De esta forma concluimos este pequeño ejemplo donde aprendimos como hacer una calculadora con javascript, posiblemente también te interese aprender como crear un slider fácil con JQuery.
No olvides compartir esta entrada con tus amigos si te ha parecido interesante, saludos!
Revisa está calculadora esta muy buena
¡Hola Luis! Me alegra que te fuera útil esta entrada. Saludos:)
Muchas gracias por el ejemplo muy útil.
Que tal Gris, me da gusto saber que te sirvió el ejemplo de esta entrada, saludos! 🙂
Estupendo!! Muchas gracias, me será muy ´útil el ejemplo para realizar mis proyectos.
Por nada Zaiz, me encanta hacer ejemplos que les sean útiles. Saludos! 🙂
Disculpa como puedo agregar raíz cuadrada a tu calculadora?
Muy bien estructurado.Gracias Denisse!!!!
Gracias x el ejemplo dennise. 🙌
En donde podemos seguirte.
Hola! Puedes seguirme en mis redes sociales 🙂 las cuales puedes encontrar en este enlace: https://denisseestrada.com/contacto/
Hola, Funciona con el teclado del PC?
hola cordial saludo, haz realizado la calculadora pero con imagenes, n con botones, es decir los numeros son imagenes.
gracias.
En caso tal, me podrias facilitar un ejemplo ?
Gracias.
quisiera pedir una calculadora cientifica
muchas gracias por la ayuda.. exitossss
Muy buena la calculadora, gracias
mira como se hace para poner el cero y q cuando ponga el numero desaparesca
Muchas gracias por su grandiosa aportación. En lo personal su modelo de calculadora básica me esta siendo muy útil como base en la construcción de una calculadora personalizada de acuerdo a mis necesidades laborales. Ojala el tiempo recompense su esfuerzo y trabajo.
Hola Santos, que bueno te gustara, te deseo lo mejor. Saludos!
donde puedo descargar la programación
donde puedo descargar la programación?
Excelente, muchas gracias
Hola, y como hago si quiero tener un historial de las operaciones realizadas??
Gracias por compartir tus enseñanzas y tu tiempo, que se oro. Aunque no sirve el enlace de descarga. De todas maneras, buena suerte con tus proyectos.
Hola, que buen trabajo,
se me ocurrio la idea de guardar la ultima operacion que el usuario coloque. como se podria guardar con un localStorage?? y que aparezca en consola.
como puedo ejecutar la calculadora
En tu navegador web amigo.
Cómo puedo descargarlo para guiarme:'( ?
Muchas gracias guapa Denisse! Tus bases me ayudaron para un proyecto final de la U. Saludos hermosa.
Muy bueno, me ayudó para entender mis clases de Java Script pero no se encuentra el archivo para descargar:(
Nice, aun funcional, buen dia!!!