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