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.com/ Thank you to https://twitter.com/thebigdavec for his awesome code refactoring tips during our last Scrimba Live Stream: https://youtu.be/VMldLdMSoBo -- 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: https://twitter.com/RybaLeanne 🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychallenge