Parzibyte's blog

Blog de conocimiento gratuito: linux, programación, open source, bases de datos, android, frameworks, web e informática en general.

Conversor de unidades con JavaScript

Hace mucho tiempo en mis inicios en la programación hice un conversor de unidades usando JavaScript, HTML, CSS y los frameworks Bootstrap y jQuery. Era para mi clase de física. Hoy vengo a presentarlo y compartirlo por si a alguien más le sirve.

Conversor de unidades web con JavaScript

Conversor de unidades web con JavaScript

Es un simple convertidor de unidades web que transforma de una unidad a otra. Soporta:

  1. Longitud
  2. Masa
  3. Tiempo
  4. Energía
  5. Frecuencia
  6. Presión
  7. Tamaño de datos
  8. Temperatura
  9. Velocidad
  10. Volumen
  11. Área

A través de este post te mostraré cómo funciona, cómo descargarlo y cómo está hecho.

Unidades soportadas

Soporta todos los grupos de unidades de medidas listadas anteriormente. Por ejemplo en longitud tiene metros, kilómetros, etcétera. En masa tiene gramo, kilogramo, y así para cada categoría.

He escrito todas las unidades y sus equivalencias en un diccionario. Es un archivo grande pues tiene todas las equivalencias como si fuera la base de datos. Se ve así (aunque no es el completo):

Ahora ese archivo es leído desde el verdadero conversor cuya plantilla HTML es la siguiente en donde cargamos los scripts incluyendo a jQuery.

Escuchamos ya sea que cambie el input o unos de los seleccionadores y se hace la conversión, quedando el código así:

Poniendo todo junto

Todo este conversor está hecho con Bootstrap (tanto estilos como funcionamiento de modals) y jQuery. Sé que jQuery ya casi no se usa pero recuerda que este programa fue hecho hace 5 años y apenas lo he publicado.

Si quieres el código fuente completo lo dejo en GitHub. También puedes acceder a una demostración aquí.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

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.


Deja un comentario

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