Hace unos días te mostré cómo resolver fracciones o quebrados usando JavaScript y programación orientada a objetos para hacer las operaciones como suma, resta, multiplicación y división.

Hoy te traigo un ejemplo práctico de un solucionador de operaciones de fracciones online que recién he programado.

Por cierto, si tú solo eres un usuario que está interesado en usar el software puedes entrar directamente al solucionador de fracciones en línea.

Modo de uso

Este solucionador resuelve las 4 operaciones fundamentales con fracciones: producto, cociente, suma y resta. Además, simplifica el resultado y también lo muestra en su versión mixta.

Basta con colocar el numerador y denominador de las dos fracciones para que el resultado se muestre en la última columna:

Solucionar fracciones en línea – Suma, resta, producto y cociente

Si te fijas, debajo de la fracción del resultado tenemos la representación mixta.

Apartado técnico

La aplicación web está creada con el framework Vue para ahorrar código. En el diseño se ha utilizado Bulma y el código HTML queda así:

Ya en el apartado de JavaScript lo único que se hace es escuchar el evento change y keyup (específicamente cuando se presiona Enter) de cada input y llama a la función que calcula el resultado.

Si ambas funciones son correctas, se calcula el resultado y se coloca en una tercera variable. Todas las operaciones ya están implementas en la clase Fracción así que nos limitamos a invocarlas:

De hecho todo queda en muy pocas líneas de código. La mayoría de los métodos que tenemos son para enfocar los input en el Enter y para calcular los resultados.

Poniendo todo junto

Si quieres ver el código completo de este solucionador de fracciones online puedes verlo en GitHub. Por otro lado, si quieres probarlo entra en este enlace, lo he alojado en las GitHub pages.

Puedes ver un vídeo en YouTube:

Finalmente te invito a ver más sobre JavaScript y a ver otros proyectos que he creado.