Calculadora con JQuery desde Cero

Calculadora con JQuery desde Cero

¿Necesitas aprender a crear una calculadora con jQuery? El dia de hoy vamos rápidamente a hacer uso de nuestras habilidades con HTML, CSS y JQuery para crear una calculadora con operaciones básicas como son sumar, restar, multiplicar y dividir. Este ejemplo es perfecto para cualquier estudiante que recien esta aprendiendo desarrollo web!

Anteriormente ya habiamos hablado de varios tutoriales de jQuery en el blog, por ejemplo habiamos visto como crear un sistema de ventanas con jQuery, el dia de hoy vamos a realizar un pequeño y sencillo ejemplo de como crear una calculadora con jQuery desde Cero pues muchas personas me han solicitado realizar esto para el blog.

Antes de comenzar decirte que es un ejemplo sencillo y aunque es completamente funcional si requieres una calculadora más avanzada deberás seguir tu mismo con el desarrollo de este proyecto, también falta atrapar errores comunes en estos ejemplos como puede ser la division entre cero.

Se utilizó HTML para el etiquetado y la estructura de la calculadora, CSS para el estilo de la misma y la funcionalidad es dada por el código Javascript y jQuery.

Para la estructura HTML se utilizó como base una tabla logrando la estetica básica y con CSS unicamente dar los ultimos ajustes de estilo.


Suscríbete!

Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

La funcionalidad se logra mediante tres variables principales: una que almacena el operandoA al presionar el boton de operación, otra que almacena el tipo de operación justo en el mismo momento cuando se almacena el operandoA, el operandoB se guarda al presionar el boton de igual y en este mismo momento se manda llamar la función resolver.

Al momento de llamar a la función resolver se cuenta ya con operandoA, operandoB y operación por lo que únicamente se calcula el resultado.

La calculadora con jQuery resultante es visualmente igual a esta:

calculadora con jquery ejemplo

Sientete libre de cambiar la apariencia y funcionalidad de la misma.

El codigo HTML es el siguiente:

El estilo viene en la siguiente hoja de estilo:

La funcionalidad principal de la calculadora viene dada por el siguiente codigo:

Como vez el ejemplo no es tan complicado y en 20 minutos deberás tener tu calculadora funcionando a la perfección!

Puedes ver un tutorial para crear esta misma calculadora con javascript puro en el blog de Denisse Estrada o puedes ver el siguiente video.

Cualquier duda o comentario no dudes en dejarme un comentario aquí debajo y con gusto la resolveré.

Si te sirvio o te parecio interesante este ejemplo no olvides compartirlo en tus redes sociales.

Saludos!

3 Comentarios ¿Qué opinas tú del tema?

  1. Miguel Villa
  2. Miguel Villa

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *