Inmersión en JavaScript: cómo crear un convertidor de color Hex2RGB

Foto de Fotis Fotopoulos en Unsplash

En este artículo, crearemos una aplicación web que convierta códigos de color entre hexadecimal y RGB.

Puede encontrar una demostración aquí y el código fuente aquí.

Estructura del proyecto:

La estructura del proyecto es bastante simple.

  1. index.html: contiene la estructura de la aplicación.
  2. style.css: Estiliza la página.
  3. app.js: contiene todo el código requerido para ejecutar el proyecto.

Idea:

Aquí está la lista de cosas que quería que realizara esta aplicación:

  1. Cada vez que se escribe algo en un campo de texto para hexadecimal, la aplicación debe verificar si el color es válido. Si es así, conviértalo a RGB, configúrelo como fondo y luego coloque el valor RGB en el campo de texto RGB y viceversa.
  2. Si se escribe un breve código de color hexadecimal en el campo de texto, amplíelo cuando el campo de texto pierda el foco (el usuario hace clic fuera del área de texto).
  3. Anteponga automáticamente el símbolo "#" a la entrada hexadecimal.

¡Vamos a empezar!

index.html

He creado dos campos de texto con identificadores de "hex" y "rgb" respectivamente. Además, cada uno es un icono de error de svg, que tiene una clase de oculto, por defecto.

style.css

Aquí hay un diseño básico para que el marcado se vea un poco mejor. Estoy definiendo dos clases aquí, .hidden y .dark. El primero se usa para ocultar / mostrar el icono SVG de error y el último para cambiar el color del texto en función del color de fondo. Por defecto, he configurado el texto en un color oscuro (para fondos brillantes).

app.js

Aquí está la parte mágica. Desglosaré el código en trozos:

Primero, estamos definiendo variables que apuntan a las entradas con id 'hex' y 'rgb'. A continuación, tenemos funciones para verificar si la entrada Hex / RGB es válida o no. Usan una configuración básica de expresiones regulares y devuelven un valor booleano. Si te intimidan, te recomiendo que pruebes este tutorial de Regex.

Aquí, he realizado una función de análisis llamada modifyHex que comprueba si el hexadecimal de entrada tiene 4 caracteres de longitud; es decir, contiene "#" y es una forma abreviada (por ejemplo, # 333) y reemplaza el "#" con un carácter vacío. Luego comprueba si la longitud ahora es 3 y la expande a 6 caracteres (por ejemplo, # 123 = # 112233).

Ahora estamos definiendo dos funciones que pueden convertir hexadecimal a rgb y viceversa. Aquí está el desglose paso a paso para hexToRgb (este código se expande para explicar mejor cómo funciona el proceso):

  1. Defina una matriz vacía para almacenar el resultado.
  2. Reemplace el símbolo '#', si existe, y si la longitud no es igual a 6 (es decir, la versión abreviada), llame a la función modifyHex anterior y amplíelo.
  3. De una manera muy básica, hexadecimal a rgb funciona convirtiendo el código hexadecimal (en base 16) a código rgb (en base 10). Cada dos caracteres en el código hexadecimal representan un valor en el código de color rgb. Por ejemplo en #aabbcc, el rojo es (aa a la base 10), el verde es (bb a la base 10) y el azul es (cc a la base 10). Entonces, en la función, estamos dividiendo el valor hexadecimal, convirtiéndolo en base 10 usando parseInt y luego almacenándolo en la matriz definida.
  4. Finalmente, estamos devolviendo la cadena de salida.

Para la función rgbToHex (esto se escribe con una lógica más corta):

  1. Estamos utilizando directamente una expresión regular para extraer las partes dentro del paréntesis, es decir, rgb (123,21,24) devolverá 123,21,24.
  2. A continuación, estamos utilizando una función de mapa para devolver una nueva matriz, que convierte el número en base 16 y luego agrega el valor.

Déjame explicarte esta parte. Cuando usamos regex para hacer coincidir las partes dentro de los paréntesis, devolvemos datos de tipo "cadena". Para convertirlo a Base 16, tenemos que usar el método toString, con un parámetro de "16".

Ahora, el método toString se aplica solo a los tipos de datos numéricos, por lo que usamos parseInt para convertir primero cada elemento de la matriz en un número, luego usamos toString (16) para convertirlo en forma hexadecimal y finalmente agregamos relleno para que sea exactamente 2 caracteres largos El relleno es necesario, si tiene algo como "14", que desea convertir a hexadecimal, devolverá "e". Pero el código de color hexadecimal necesita 2 caracteres para cada parte, por lo que se requiere relleno, lo que lo convierte en "0e".

Nota: padStart es una función de ES8, que podría no ser compatible con todos los navegadores. Para mantener este tutorial simple, no lo he transpuesto a ES5.

3. Finalmente, estamos devolviendo la matriz resultante al unirla y convertirla a mayúsculas.

Esta función se usa para agregar esa pequeña marca de error en el lado derecho de la entrada, en caso de que el tipo de entrada ingresado sea incorrecto.

Simplemente ejecuta el contenido de la entrada (hex.value y rgb.value) a través de sus respectivas funciones de verificación y utiliza el booleano devuelto para agregar / eliminar la clase .hidden.

Ahora estamos definiendo una función que toma el color de fondo y luego determina si es oscuro o brillante (obtuve este código de StackOverflow). Multiplica los valores de color individuales con algunos números calculados y devuelve "negro" o "blanco". Luego uso otra función para cambiar el color del texto agregando / eliminando la clase .dark.

Agregar oyentes de eventos:

Finalmente, vamos a utilizar todas las funciones anteriores agregando oyentes de eventos.

Primero, estamos agregando un evento keyup a la entrada hexadecimal. Este evento se activa cada vez que se suelta una tecla. Esto es lo que está haciendo la función:

  1. Estamos verificando si el código de entrada es válido y expandiéndolo si es una forma abreviada.
  2. Estamos configurando el color de fondo del cuerpo al valor de entrada.
  3. Estamos comprobando si el color es brillante / oscuro y cambiando el color del texto en consecuencia.
  4. Finalmente, llamamos a la función de conversión y luego colocamos el color convertido en la entrada RGB.

El otro oyente de eventos que utilizamos es blur. Se activa cada vez que la entrada pierde "foco", o en términos simples, cada vez que hace clic / toca fuera del elemento de entrada, se desencadena el desenfoque. ¡Entonces es bueno modificar el hexadecimal de entrada!

Por lo tanto, verificamos si el color hexadecimal es válido o no, luego lo expandimos si es corto y finalmente estamos agregando un "#" si no existe. Tenga en cuenta que estamos comprobando si los índices 0 y 1 contienen "#". Esto se hace para que la función no anteponga ‘#’ dos veces.

Ahora estamos agregando el mismo detector de eventos keyup a la entrada rgb y también sigue la misma serie de pasos que el detector de eventos hexadecimal.

Por último, estamos agregando una clave de escucha de eventos a todo el documento, es decir, se activará para cualquiera de los dos elementos de entrada. En su interior, estamos llamando a la función errorMark, que agrega el ícono de error, en caso de que haya un error, o lo elimina si todo es válido.

Aquí está el código final para app.js:

Conclusión

¡Ahí tienes! Sé que el código no es perfecto y se puede refactorizar, pero bueno, esto es solo el comienzo. Si desea mejorar este código, puede continuar y abrir un PR en mi repositorio de github.

¡Feliz codificación!