Sección 2: DOM

Lección 6: Ejercicio: Generador de fondo

¡Bienvenidos! Hasta aquí hemos visto como JavaScript interactúa con HTML y CSS y hemos visto que podemos cambiar algunas cosas de nuestros sitios web, como textos y estilos.

En esta lección vamos a intentar algo más divertido. Vamos a crear un generador de fondo mediante el cual podemos configurar un gradiente de colores de fondos para nuestro sitio web, el cual podemos cambiar a nuestro gusto, y vamos utilizar solo algunas pocas líneas de JavaScript para hacerlo.

Comencemos haciendo un simple archivo HTML.

Creemos los archivos styles.css y script.js

Usaremos un nuevo elemento HTML: el input de tipo color. Este componente nos mostrará una paleta de colores que nos permitirá escoger un color específico.

También usaremos un elemento de CSS llamando linear gradient (gradiente lineal). Gracias a este elemento podremos hacer que nuestros fondos luzcan una paleta de gradiente de colores.

Ahora añadamos dos input de color a nuestro archivo index.html

Ahora añadamos el siguiente código a nuestro archivo styles.css

Ahora hagamos interactivo nuestro sitio web. Hagamos que al escoger un color del input de la izquierda, el color de la izquierda cambie, y al elegir un color del input de la derecha, el color de la derecha cambie.

Comencemos añadiendo algunas sentencias a nuestro archivo script.css

Queremos escuchar un evento que esté atento cuando el usuario ha cambiado el color de alguno de los dos input. Para este caso utilizaremos el evento "input" el cual se dispara cada vez que el value de un input modifica su valor.