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

Solucionador de fracciones con JavaScript

Dejar un comentario / HTML, javascript, Software y sistemas, VueJS, web / Por

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
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í:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solucionador de fracciones en línea - By Parzibyte</title>
    <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.1/css/bulma.min.css">
    <script src="./Fraccion.js"></script>
    <script src="./vue.min.js"></script>
</head>

<body>
    <nav class="navbar is-warning" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://parzibyte.me/blog">
                <img alt=""
                    src="https://raw.githubusercontent.com/parzibyte/control-estacionamiento/main/frontend/src/assets/parzibyte.png" />
            </a>
            <button class="navbar-burger is-warning button" aria-label="menu" aria-expanded="false"
                data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </button>
        </div>
        <div class="navbar-menu">
            <div class="navbar-end">
                <div class="navbar-item">
                    <div class="buttons">
                        <a target="_blank" rel="noreferrer" href="https://parzibyte.me/l/fW8zGd"
                            class="button is-primary">
                            <strong>Soporte y ayuda</strong>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", () => {
            const boton = document.querySelector(".navbar-burger");
            const menu = document.querySelector(".navbar-menu");
            boton.onclick = () => {
                menu.classList.toggle("is-active");
                boton.classList.toggle("is-active");
            };
        });
    </script>
    <section class="section" id="app">
        <div class="columns">
            <div class="notification is-link">
                Con este solucionador de fracciones y quebrados en línea puedes resolver la suma, multiplicación,
                división y resta. Solo escribe ambas fracciones y aparecerá el resultado simplificado, además de su
                versión mixta
                <br>
                <a href="https://parzibyte.me/blog">By Parzibyte</a>
            </div>

        </div>
        <div class="columns">
            <div class="column has-text-centered">
                <div class="columns is-vcentered">
                    <div class="column is-one-quarter" style="border-right: 1px solid #f5f5f5;">
                        <h2 class="is-size-2">Fracción 1</h2>
                        <br>
                        <input @change="resolverOperacion()" @keyup="resolverOperacion()"
                            @keyup.enter="enfocarDenominador()" v-model.number="fraccion1.numerador" class="input"
                            type="number" placeholder="Numerador">
                        <hr>
                        <input @change="resolverOperacion()" @keyup="resolverOperacion()" ref="denominador"
                            @keyup.enter="enfocarSegundoNumerador()" v-model.number="fraccion1.denominador"
                            class="input" type="number" placeholder="Denominador">
                    </div>

                    <div class="column is-one-quarter" style="border-right: 1px solid #f5f5f5;">
                        <div class="select">
                            <select @change="resolverOperacion()" v-model="operacion">
                                <option value="suma">Suma</option>
                                <option value="resta">Resta</option>
                                <option value="multiplicacion">Multiplicación</option>
                                <option value="division">División</option>
                            </select>
                        </div>
                    </div>
                    <div class="column is-one-quarter" style="border-right: 1px solid #f5f5f5;">
                        <h2 class="is-size-2">Fracción 2</h2>
                        <br>
                        <input @change="resolverOperacion()" @keyup="resolverOperacion()" ref="segundoNumerador"
                            @keyup.enter="enfocarSegundoDenominador()" v-model.number="fraccion2.numerador"
                            class="input" type="number" placeholder="Numerador">
                        <hr>
                        <input @change="resolverOperacion()" @keyup="resolverOperacion()" ref="segundoDenominador"
                            v-model.number="fraccion2.denominador" class="input" type="number"
                            placeholder="Denominador">
                    </div>
                    <div class="column is-one-quarter" style="border-right: 1px solid #f5f5f5;">
                        <h2 class="is-size-2">Resultado</h2>
                        <br>
                        <input readonly v-model="resultado.numerador" class="input" type="number"
                            placeholder="Numerador">
                        <hr>
                        <input readonly v-model="resultado.denominador" class="input" type="number"
                            placeholder="Denominador">
                        <br>
                        <strong>Mixto: </strong>{{resultadoMixto}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="./app.js"></script>
</body>

</html>

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:

new Vue({
    el: "#app",
    data: () => ({
        fraccion1: {
            numerador: null,
            denominador: null,
        },
        fraccion2: {
            numerador: null,
            denominador: null,
        },
        resultado: {
            numerador: null,
            denominador: null,
        },
        resultadoMixto: null,
        operacion: "suma",
    }),
    methods: {
        enfocarDenominador() {
            this.$refs.denominador.focus();
            this.resolverOperacion();
        },
        enfocarSegundoNumerador() {
            this.$refs.segundoNumerador.focus();
            this.resolverOperacion();
        },
        enfocarSegundoDenominador() {
            this.$refs.segundoDenominador.focus();
            this.resolverOperacion();
        },
        validarFraccion(fraccion) {
            if (!fraccion.numerador || !fraccion.denominador) {
                return false;
            }
            return true;
        },
        resolverOperacion() {
            if (!this.validarFraccion(this.fraccion1) || !this.validarFraccion(this.fraccion2)) {
                return;
            }
            const f1 = new Fraccion(this.fraccion1.numerador, this.fraccion1.denominador);
            const f2 = new Fraccion(this.fraccion2.numerador, this.fraccion2.denominador);
            let resultado = null;
            switch (this.operacion) {
                case "suma":
                    resultado = f1.suma(f2);
                    break;
                case "resta":
                    resultado = f1.resta(f2);
                    break;
                case "multiplicacion":
                    resultado = f1.producto(f2);
                    break;
                case "division":
                    resultado = f1.cociente(f2);
                    break;
            }
            this.resultado = resultado.simplifica();
            this.resultadoMixto = FraccionMixta.desdeImpropia(resultado);
        }
    }
});

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

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