Build a Gradient Background Generator with JavaScript - Part1

Build a Gradient Background Generator with JavaScript - Part1

Vincent Iroleh's photo
Vincent Iroleh
·

0 min read

Background Generator - App

Build a Gradient Background Generator with JavaScript

Purpose

Learn how to work with DOM (Document Object Model) by building a background generator app.

Requirement

  • HTML
  • CSS
  • And a little knowledge of JavaScript

Demo of our App

Peek 2019-07-29 16-04.gif

Let's use the terminal throughout (Linux/Mac) users Ctrl+Alt+T to open the terminal and execute the command below:

Desktop && md background-generator && background-generator && touch index.html style.css script.js && code .

The above command changes the directory to Desktop, and creates a folder called background-generator and changes directory to it and creates three files called index.html style.css and script.js AND opens the background-generator in Vscode (don't forget to include the dot at the end of code command).

If you're on windows: Install Git for Windows. It will also install Git Bash, which is a command prompt that supports most Linux commands.

Lets write the structure of our App

Copy the following code into your index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Gradient Background Generator</title>
  </head>
  <body id="gradient">
    <h1>Background Generator</h1>
    <input class="color1" type="color" name="color1" value="#00ff00" />
    <input class="color2" type="color" name="color2" value="#ff0000" />
    <h3></h3>

    <script src="script.js"></script>
  </body>
</html>

If you're familiar with HTML, all we did above was to include our HTML structure and linked our external CSS and javascript, and h1 tag, plus two inputs with type color to allow us to select colors from our browser. Then finally we have our h3 tag to display the value of gradient after we must have picked the colors.

Save and open the file in your browser: RightClick on the index.html from Vscode and click on open with live server, you can download the extension if you don't have it already. Installation: Open VSCode and type ctrl+P, type ext install ritwickdey.liveserver.

If everything works fine, you should have a screen like mine below:

Screenshot from 2019-07-29 15-59-17.png We gave our input a default value of green and red. Play with the two inputs...

Time to add some css styles to our code
body {
    font: 'Raleway', sans-serif;
    color: rgba(0, 0, 0, .5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    top: 15%;
    background: linear-gradient(to right, red, yellow);
    color: #ffffff;
    font-weight: bolder;
}

h1 {
    font: 600 3.5em 'Raleway', sans-serif;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    width: 100%;
    margin-top: 20%;
}

h3 {
    font: 900 1em 'Raleway', sans-serif;
    font-size: 1.4rem;
    text-align: center;
    text-transform: none;
    letter-spacing: 0.01em;
    color: black
}

Our page should some nice look now, the CSS codes here should be familiar to you if you been learning CSS for like one week now, our main purpose for this app is to be able to generate a gradient background color like that in our CSS line 8 while changes the current background of our Apps page while the user is picking colors from the two inputs in our HTML.

So far, we have a nice-looking page with two color pickers like this:

Screenshot from 2019-07-29 16-00-08.png

Time to add some magic to our code

JavaScript makes web pages fun and interative, include the following to your script.js file:

const css = document.querySelector("h3");
const color1 = document.querySelector(".color1");
const color2 = document.querySelector(".color2");
const body = document.getElementById("gradient");

const setGradient = () => {
    body.style.background =
        "linear-gradient(to right, " +
        color1.value +
        ", " +
        color2.value +
        ")";
    css.textContent = body.style.background + ";";
};

color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);

From line 1 to line 5, we used the querySelector to get the elements in our HTML page and save them inside variables.

Then we create a function called setGradient that changes the background color of our page with the values selected from the input of type color. Inside the setGradient function we set the body with a style background of linear-gradient to set the right side of the page with a value of the color1 and the other side of the page with a value of color2. Do you remember this background: linear-gradient(to right, red, yellow); from our CSS file? That's exactly what we are doing here.

Then on line 13, we set our CSS variable (which is the h3) to the value of the body which is the values of the linear-gradient.

Finally, we used the Events function to listen on the input of color1 and color 2 and execute our setGradient function.

If everything works fine, you should have a functioning App now.

GitHub Repo

Go and ahead and make some changes to the code, maybe work with a clipboard API to enable copy and paste option of the generated gradient code, host it on GitHub pages.

JavaScript