Create a gradient generator with Javascript & CSS

In this video, I show you how to make a gradient generator with Javascript & CSS.

✨ Contents: ✨

00:34 - The HTML, with inputs with the type of ‘color’.
02:01 - Adding event listeners to the color picker inputs.
02:20 - Writing the generate() function, saving the selected colors as variables.
03:02 - Building the gradient, adding it to the form and button.
03:56 - Displaying the gradient code using textContent.
04:24 - Wiring up the Surprise Me button to generate a random gradient on the click.
04:31 - Bringing in the RandomColor script.
05:19 - Using RandomColor to generate random colors, adding them to the picker values.
06:10 - Setting the hue with RandomColor.
06:31 - Setting the luminosity with RandomColor.
07:37 - Changing the text color to provide appropriate contrast, depending on the colors generated by RandomColor.
08:27 - Generating a random gradient on page load.
08:47 - Limitations.

--

const me = {
name: "Leanne 👩🏻",
passions: ["coffee☕️", "code 💻", "cats 🐱"],
unpopular_opinion: "LOVES CSS ❤️",
favorite_colors: ["hotpink", "orangered"],
channel_aim: "Show the world that CSS is fun and web development rules! 👑"
}

--

[hangingfuchsias]

This video was a lotta fun. It looks even more fun in person.

[joshperlette]

I’m just learning javascript through a course and I greatly appreciate your workflow and thought process! It really helped me understand what steps to go through to create and run functions to accomplish what my brain is trying to put together 👍🏻