Haciendo un conversor de bases numéricas con JavaScript y Vue JS 2

Publicado por parzibyte en

Convertidor binario octal decimal hexadecimal en JavaScript

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

Convertidor/conversor binario octal decimal hexadecimal en JavaScript

Convertidor/conversor binario octal decimal hexadecimal en JavaScript

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.


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

2 Comments

Jhon Insuasti · marzo 22, 2019 a las 10:12 pm

Excelente trabajo, muy bien desarrollado, me encanto este ejemplo.

    parzibyte · marzo 22, 2019 a las 10:38 pm

    Gracias por tus comentarios 🙂 te invito a seguirme en mis redes sociales para estar al tanto de otros proyectos que realice. Saludos

Deja un comentario

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: