Create a gradient generator with Javascript & CSS

Veröffentlicht am: 01 Oktober 2021
auf dem Kanal: Leanne R

1,630

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...

Auf dieser Seite können Sie das Online-Video Create a gradient generator with Javascript & CSS mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Leanne R 01 Oktober 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 1,630 Mal angesehen und es wurde von 27 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

109