Скачать или смотреть 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’.
01:26 - Grabbing the elements from the DOM with document.getElementById.
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.
06:42 - Generating either only dark or only light colors using Math.ceil(Math.random() * 2).
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.

Check out RandomColor here: https://randomcolor.lllllllllllllllll...

Thank you to   / thebigdavec   for his awesome code refactoring tips during our last Scrimba Live Stream:    • Live-code a JavaScript gradient generator ...  

--

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! 👑"
}

--

🐤 Say hi on Twitter:   / rybaleanne  
🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychall...