Introducción

Para reforzar y aplicar lo que vimos en cómo convertir entre binario, octal, decimal y hexadecimal en JavaScript decidí crear un convertidor (o conversor) de bases numéricas o números. Lo que hace es muy simple, convierte (desde cualquier base) a las siguientes:

• Binario
• Octal
• Decimal
• Hexadecimal

Para agregarle más comodidad al usuario pusimos la opción de copiar el texto directamente en el portapapeles.

Veamos una pequeña explicación.

Conversor de números con Vue Js y Bulma CSS

Así es como se ve. Es un simple input en donde ponemos el número en cualquier base. Conforme vayamos escribiendo, los cálculos se irán haciendo y los resultados se pondrán en los otros input que son de sólo lectura.

El botón azul, el cual está hasta la derecha, sirve para copiar el número convertido al portapapeles. En caso de que el navegador del usuario no tenga esa característica o el sitio no esté servido sobre localhost o https, se llamará a un método para un copiado de emergencia.

Así lo llamo, aunque lo que hace es poner en un prompt el texto e indicar que se copie. De esta manera, aunque es más difícil para el usuario, funcionará la mayoría de veces.

Lo que usamos

Con VueJS vigilamos el cambio de la variable llamada baseSeleccionada, así como la variable numero. Cuando estos cambian, se llama al método onBaseONumeroCambiado que a su vez llama a otro método llamado convertirDeDecimalALasDemasBases; pero muy importante: le pasa el número como entero, convertido según la base usando parseInt.

Si no entiendes bien, visita este post en donde explicamos las conversiones. De ahí, el método que convierte de decimal a otras bases simplemente cambia los valores binario, octal, decimal y hexadecimal; Vue se encarga de refrescarlos en la vista.

Y para terminar, el proceso de copiar en el portapapeles se hace con promesas y la API de navigator.clipboard que vimos antes. Esto se hace en el click del botón que tiene el input, llamando al método copiarAlPortapapeles el cual recibe un parámetro: el texto.

En caso de que esa API no esté disponible (ya sea por seguridad o por un navegador antiguo) se recurre a prompt, en donde le pasamos dos argumentos: las instrucciones de copiado y como texto por defecto aparecerá el texto que será copiado; el usuario sólo tiene que presionar CTRL + C y listo:

prompt("Presiona CTRL + C para copiar, y luego presiona ENTER", texto);

Código fuente y probar online

El código fuente de este conversor está en GitHub. Igualmente puedes probarlo aquí. Funciona en cualquier dispositivo con un navegador decente; es responsivo y todas esas cosas.

También he grabado un vídeo explicando el código y demostrando cómo usar este conversor: