web

Aplicación web para calcular el factorial de un número online

Para ejemplificar y combinar el uso de BigInt con los Web Workers en JavaScript me di a la tarea de crear una sencilla aplicación web que permite calcular el factorial de cualquier número, todo desde el navegador, es decir, online.

El uso de los Web workers es para hacer cálculos extensos, y el de BigInt para no quedarnos cortos a la hora de trabajar con números grandes. Por el momento sólo funciona en Chrome y Opera, ya que usa BigInt y no quise usar el polyfill.

Cálculo del factorial de un número en JavaScript. Aplicación web online

Voy a explicar la creación de la aplicación web y cómo utilicé cada cosa para crear todo esto.

Posts recomendados

Para que entiendas un poco mejor de lo que se habla aquí, te invito a ver los posts que cito abajo. De esta manera sabrás a lo que me refiero en cada caso, pues no me detendré a explicar las cosas básicas.

Trabajar con el portapapeles en JavaScript

BigInt: números sin límite en JavaScript

Algoritmo para calcular el factorial en JavaScript

Web Workers en JavaScript

Probar aplicación en línea

El proyecto es 100 % open source y puede ser usado en línea, de hecho ese es su uso principal. Mira la calculadora de factorial online aquí, y el repositorio aquí.

Herramientas utilizadas

Para el diseño utilicé BulmaCSS, y para el comportamiento mi framework de JavaScript favorito, Vue. Lo demás es HTML, CSS y JavaScript puro.

El algoritmo y los web workers

Me decidí por el que usa el ciclo while con números de tipo BigInt, pues así no excedo las llamadas a la pila. De esta manera pude calcular el factorial de 123456 sin problemas (llevó su tiempo, pero sí se pudo). Cosa que con la calculadora de Windows 10 no se puede:

Desbordamiento de calculadora de Windows

En cambio con la aplicación web sí:

Factorial de 123456

Claro, claro, yo sé que seguramente hay maneras de lograrlo o calculadoras más potentes, sólo estaba indicando lo que se pudo lograr.

Los Web workers son de gran uso, pues gracias a los mismos la interfaz no se congela y se puede mostrar una linda animación de que hay un proceso en segundo plano gracias a que el botón se pone en un estado de carga cuando lo indico.

El uso de Vue

Se usa para la interacción del usuario, pero no para la resolución del problema. En cambio, sólo se encarga de crear el Web Worker y esperar a que el mismo traiga datos.

También se encarga de copiar el texto al portapapeles y de enfocar el input, cosas básicas y validaciones, eso es todo.

Aunque parezca que no, pero es de gran utilidad, pues con JavaScript plano me habría llevado más tiempo. Por cierto, esto también permite que llame a la función tanto al presionar Enter como al hacer click en el botón, agregar clases dependiendo del estado de la app y mostrar el resultado condicionalmente.

Cuando el número cambia, el número se resetea, esto lo logramos gracias a que se vigila a numero con watch.

Los estilos

Agregué un poco de estilos, que son los siguientes (también puedes verlos en el repositorio de GitHub):

strong.factorial{
 word-break: break-all;
}
button.copiar{
 position: absolute;
 right: .5rem;
 top: .5rem;
 background-color: transparent;
 border: none;
}
button.copiar:hover{
 border: 1px solid white;
}

No soy muy bueno con el diseño, pero sí soy bueno programando. Bulma ya tiene un diseño de botones llamado delete, el cual pone el botón en la esquina superior derecha con una equis para indicar que la notificación sea cerrada, así que me aproveché de eso, vi los estilos (los podía extraer con CSS used pero no lo hice) y los copié a mi botón.

De esta manera pude alinear el botón y poner el icono de copiar. Ah, también hice que si el número era muy largo se rompiera, evitando una línea muy larga, esto gracias a word-break.

Conclusión

Sé que no es mucho, pero combina muchas cosas y algoritmos que ayudan a que las aplicaciones sean más ricas y poderosas. Recuerda que puedes analizar y modificar el código. La app está aquí, por si no habías leído.

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

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 días hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.