Build a Dynamic Gradient Generator in Javascript & CSS

Build a Dynamic Gradient Generator in Javascript & CSS

Table of Contents:

1. Introduction
2. How to Create a Gradient Generator
3. Setting Up the HTML 3.1. Adding Color Pickers 3.2. Creating a Paragraph for the Gradient Code 3.3. Including a Surprise Me Button
4. Working with JavaScript 4.1. Accessing DOM Elements 4.2. Adding Input Event Listeners 4.3. Generating a Gradient 4.4. Displaying the Gradient Code
5. Implementing the Surprise Me Functionality 5.1. Using the Random Color Dependency 5.2. Adding Event Listener to the Surprise Me Button 5.3. Setting Values for Color Pickers 5.4. Generating the Gradient Again
6. Adjusting Font Color for Contrast
7. Conclusion

How to Create a Gradient Generator

Do you want to learn how to create a gradient generator that allows you to select awesome random colors or choose your own? Look no further! In this tutorial, we will guide you step-by-step on how to build a gradient generator that displays the gradient on the screen for easy copying and pasting. We will also show you how to add a "Surprise Me" button that generates random gradients. So, let's dive in and create something truly cool!

Introduction

Gradients can add depth and visual interest to websites, logos, or any design project. With a gradient generator, you can easily create beautiful gradients without any hassle. Whether you are a designer looking for inspiration or someone who wants to add a gradient to a personal project, this tutorial will walk you through the process of building a gradient generator from scratch.

Setting Up the HTML

To start building our gradient generator, we need to set up the HTML structure. Here's how you can do it:

Adding Color Pickers

First, we need to add color pickers to allow users to select their desired colors. HTML has built-in color pickers that are easy to use. Simply add an input element with the type attribute set to "color". For example:

<label for="picker1">Color 1:</label>
<input type="color" id="picker1">

<label for="picker2">Color 2:</label>
<input type="color" id="picker2">

By adding labels for each color picker, we ensure accessibility and make it easier for users to understand the purpose of each picker.

Creating a Paragraph for the Gradient Code

Next, we need a paragraph element where we will display the code for the gradient. This will allow users to copy and paste the gradient easily. Add the following code:

<p id="gradient"></p>

We have given it an id of "gradient" so that we can manipulate it dynamically using JavaScript later on.

Including a Surprise Me Button

To add some excitement, let's include a "Surprise Me" button that generates a random gradient with attractive colors. Add the following button code:

<button id="btn">Surprise Me!</button>

We will implement the functionality for this button in the JavaScript section.

Working with JavaScript

Now that we have set up the HTML structure, let's move on to the JavaScript part where we will add functionality to our gradient generator.

Accessing DOM Elements

To manipulate the elements in the HTML, we first need to access them in our JavaScript code. We can do this by using the document.getElementById() function. Here's how you can access the elements we added:

const picker1 = document.getElementById("picker1");
const picker2 = document.getElementById("picker2");
const form = document.querySelector("form");
const gradient = document.getElementById("gradient");
const btn = document.getElementById("btn");

We have stored references to the color pickers, the form, the gradient paragraph, and the "Surprise Me" button in separate variables.

Adding Input Event Listeners

To make the gradient change dynamically as users select colors, we need to listen for the input event on the color pickers. This event fires whenever the color value changes. Add the following code:

picker1.addEventListener("input", generate);
picker2.addEventListener("input", generate);

We have attached the generate function to the input event of both color pickers. This function will be responsible for generating the gradient based on the selected colors.

Generating a Gradient

Now comes the fun part - generating the gradient! We will use the linear-gradient CSS property to create the gradient dynamically. Add the following code to the generate function:

function generate() {
  const color1 = picker1.value;
  const color2 = picker2.value;
  form.style.background = `linear-gradient(to right, ${color1}, ${color2})`;
  btn.style.background = `linear-gradient(to right, ${color1}, ${color2})`;
}

In this code, we retrieve the selected colors from the color pickers and store them in separate variables. Then, we set the background of the form and the button to the generated gradient using the linear-gradient function.

Displaying the Gradient Code

To make it easier for users to copy the generated gradient code, let's display it on the screen. We can do this by changing the text content of the gradient paragraph. Add the following code at the end of the generate function:

gradient.textContent = `background: linear-gradient(to right, ${color1}, ${color2});`;

Now, when users select colors, the gradient code will be displayed below the gradient for easy copying and pasting.

Implementing the Surprise Me Functionality

Now, let's add some excitement to our gradient generator by implementing the "Surprise Me" functionality. This feature will generate random gradients with attractive colors.

Using the Random Color Dependency

To generate random attractive colors, we will use a dependency called randomcolor.js. This dependency generates colors that are considered attractive based on criteria like brightness and saturation.

To use this dependency, you need to include the minified version of randomcolor.js in your HTML. You can download it from the official GitHub repository. Once you have included it, you can use its functions in your JavaScript code.

Adding Event Listener to the Surprise Me Button

To add the "Surprise Me" functionality, we need to listen for a click event on the "Surprise Me" button. When the button is clicked, we will generate random colors and update the gradient and pickers accordingly. Add the following code:

btn.addEventListener("click", surpriseMe);

Setting Values for Color Pickers

In the surpriseMe function, we need to generate random colors and set the values for the color pickers. We will use the randomColor() function from the randomcolor.js dependency to generate attractive random colors. Here's how you can do it:

function surpriseMe() {
  const color1 = randomColor();
  const color2 = randomColor();
  picker1.value = color1;
  picker2.value = color2;
  generate();
}

In this code, we generate two random colors using the randomColor() function and store them in separate variables. Then, we set the values of the color pickers to the generated colors. Finally, we call the generate function to update the gradient.

Generating the Gradient Again

After setting the values for the color pickers, we want the gradient to update automatically. To achieve this, we call the generate function again to recalculate the gradient:

generate();

Now, when users click the "Surprise Me" button, a new random gradient will be generated based on attractive random colors.

Adjusting Font Color for Contrast

To ensure proper contrast between the gradient background and the text, we will adjust the font color dynamically based on the brightness of the generated gradient.

First, we need to generate a random number between 1 and 2. We will use this number to determine whether to generate light or dark colors. Add the following code before the surpriseMe function:

const num = Math.ceil(Math.random() * 2);

Next, we update the conditional statement in the surpriseMe function to change the font color accordingly:

if (num === 1) {
  form.style.color = "#000";
  btn.style.color = "#000";
} else {
  form.style.color = "#fff";
  btn.style.color = "#fff";
}

If num is equal to 1, we assume that light colors are generated, so we set the font color to black (#000). Otherwise, if num is equal to 2, we assume that dark colors are generated, so we set the font color to white (#fff).

Now, when the "Surprise Me" button generates light colors, the font color will be black for better readability. Similarly, when dark colors are generated, the font color will be white.

Conclusion

Congratulations! You have successfully created a gradient generator that allows users to select colors or generate random gradients. You have learned how to manipulate the DOM, generate gradients dynamically, display the gradient code, and adjust font color for contrast. Feel free to experiment with different colors and gradients to create stunning visual effects. Have fun exploring the world of gradients!

Highlights:

• Learn how to create a gradient generator
• Select colors or generate random gradients
• Easy copying and pasting of gradient code
• Adjust font color for contrast
• Experiment with different colors and gradients

FAQ:

Q: Can I choose my own colors for the gradient? A: Yes, you can select your own colors using the color pickers provided.

Q: How can I generate random gradients? A: Simply click the "Surprise Me" button, and the generator will generate random gradients with attractive colors.

Q: Can I copy and paste the gradient code? A: Yes, the gradient code is displayed below the gradient. You can easily copy and paste it for use in your projects.