Build a Hex Color Generator

Build an app that generates beautiful colors every time you press the spacebar with HTML/CSS/JS

Web DevelopmentHTML/CSS/JSBeginner

December 26, 2016

0 views


Profile image

Samay Shamdasani

Interested in this project?

Continue Learning

Getting Started

In this tutorial, we'll make our very own color generator with just a couple lines of JavaScript. First off, you'll need a folder with three files:

  • index.html - for our markup
  • style.css - for styling
  • app.js - for the function(s)

Before we begin, we have to link all our files all together. Open up your index.html file in your favorite text editor and add a title, a viewport, and link all our files together. Our index.html file should look something like this:

    <html>
    <head>
        <meta charset="utf-8">
        <title>
            Hex Color Generator
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css" />
    </head>
        <div id="hex"></div>
        <script src ="app.js"></script>
    </html>
  </pre>

Seems new? Don't worry!

The !DOCTYPE html tag tells the web broswer what version of HTML the page is written in. Right below that, we have our head tag, where we can add our title, meta, and link up our CSS file. The viewport is used to make the page responsive so that any device can view the content clearly by based on the size of the screen so that browser can scale accordingly. Lastly, we have to link our JavaScript file which will contain our function of generating the random color.

The function

If you are somewhat familiar with CSS, you know that colors are either specified in a rgb or hex code format. An example of this would be #ffffff (white) or #000000 (black). To generate our number, JavaScript has a math.random function that returns, random numbers that are between 0 and 1.

For example, let's start by printing a simple math.random function:

function getColor() {
  return "#" + Math.random();
}

document.write(getColor());

If you take a look at the result by opening up our html file, we get a random number between 0 and 1 with a (#) added in front of it. However, since hex numbers include six letters (A, B, C, D, E, & F), we need to add those letters into our result as well. In addition, we also need to get rid of the (0) and (.) and limit the result to only 6 characters. Go ahead and try to solve this yourself. Here's a hint: you'll need to expand the math.random function by using Javascript's toString() and slice() methods.

Seriously, don't move on! Read up on those methods!

Alright, let's see what you've come up with. Using the toString() method, we can convert our number to a string with a hexadecimal value. We can get a hexadecimal value by adding .toString(16) to the end of our math.random function. Let's check out our result:

function getColor() {
  return "#" + Math.random().toString(16);
}

document.write(getColor());

Now we have a number in hexadecimal format, but it isn't ready yet! We still have to get rid of the (0) and (.) and limit our result to 6 characters! We can to that with the JavaScript slice() method by adding .slice(2,8) at the end of our math.random function. The reason we have 2 and 8 in the parenthesis is because we want to slice the result starting with the first two characters and ending at the eighth character to get six characters in total. Check out the result!

function getColor() {
  return (
    "#" +
    Math.random()
      .toString(16)
      .slice(2, 8)
  );
}

document.write(getColor());

Finally, we have a number we can work with! All we need to do is set this hex value as our background. We can do that by writing another function, and that function will do two things:

Go ahead, you should be able to do this one!

Here's what your app.js code should look like:

function getColor() {
  return (
    "#" +
    Math.random()
      .toString(16)
      .slice(2, 8)
  );
}

function setBackground() {
  var bgColor = getColor();
  document.body.style.background = bgColor;
}
setBackground();

If we open our html file in the browser, you should see a random color every time you refresh the page!

Making the Spacebar Work

Now, nobody wants to keep refreshing! We want to generate a new color every time someone clicks the space bar. We can do that by editing the setBackground() function at the end. Instead of just running it, we have to tell the browser when to run it.

We can do this by using an if statement that runs the setBackground() function only when the keyCode of 32 (code for spacebar) is pressed. This is what we have to write:

  • document.body.keyup should be equal to a function (a variable)
  • in that function, there must be an if statement stating if the (that variable).keyCode == 32, setBackground() should run

This is what our finished app.js file should look like:

// generator function
function getColor() {
  return (
    "#" +
    Math.random()
      .toString(16)
      .slice(2, 8)
  );
}
// sets background color style
function setBackground() {
  var bgColor = getColor();
  document.body.style.background = bgColor;
}
// runs function on click
document.body.onkeyup = function(e) {
  if (e.keyCode == 32) {
    setBackground();
  }
};

Open up your html file in the browser or click on the result tab. Then, press the spacebar. Pretty neat, right?

A little transition

But wait! We haven't even touched our style.css file! Open it up! We'll add a transition just so it looks a little more fluid when switching between colors.

body {
  transition: all 0.5s ease;
}

Open up your html file and take a look at your latest creation!

I hope you've generated some pretty unique colors and learned a ton! However, don't stop here! Think about what you can add next! Can you print the hex color code on screen? Can you look up some additional styles to add? Can you add a "press the spacebar" message that appears until the user presses the spacebar?

If you enjoyed this tutorial, go ahead and learn to make something else like a text-editor!

Comments (0)