Sign in Subscribe
Exercise

Colored boxes with jQuery

Eric Jones

• 8 min read

In our last tutorial, we covered selectors and event listeners in JavaScript and jQuery. In this tutorial, we will spend some time practicing with event listeners and use some basic JavaScript and Bootstrap to create this:

A user will be able to click a colored box at the top to change the palate color, which they then will use to color one of the white boxes. They can also use the keyboard to change the palate color.

Bootstrap is a popular CSS framework for developing responsive, mobile first projects on the web.' We will be using the grid system to create our boxes. We will nest rows in containers, and columns in rows like this:

<div class="container">
    <div class="row">
        <div class="col-xs-2">1</div>
    </div>
</div>

Bootstrap divides the layout of an HTML page into 12 "columns". When we add the class col-xs-2, we're using a built-in Bootstrap CSS class that tells the <div> element to take up two of those columns (or 1/6th of the screen width). Look at our final project picture at the top of this tutorial, to create our top row, we write code that looks like this"

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-2">1</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">3</div>
        <div class="col-xs-2">4</div>
        <div class="col-xs-2">5</div>
        <div class="col-xs-2">6</div>
    </div>
</div>

The xs part of col-xs-2 is short for "extra small", and describes how small the screen can be and still maintain that proportion. Lets say we want each <div> to take up two columns unless we are on a small screen. If it is a small screen, we want half the numbers to drop down a row, and when the screen is extra small (phone size) we want three rows of two columns. That would look like this. Try this code out and change the size of your browser.

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-2 col-sm-4 col-xs-6">1</div>
            <div class="col-md-2 col-sm-4 col-xs-6">2</div>
            <div class="col-md-2 col-sm-4 col-xs-6">3</div>
            <div class="col-md-2 col-sm-4 col-xs-6">4</div>
            <div class="col-md-2 col-sm-4 col-xs-6">5</div>
            <div class="col-md-2 col-sm-4 col-xs-6">6</div>
        </div>
    </div>
</body>

A row nests directly in a container. A column nests directly in a row. Never a row directly in a row. You can, however, nest a row in a column. Super fun. Let's move on.

Lets give our columns a border, color and custom height using classes. Our CSS file should look like this.

body {
    text-align: center;
    font-size: 40px;

}
.square {
    height: 70px;
    border: 3px solid #000000;
}
.pink {
    background-color:pink ;
}
.dark-pink {
    background-color:deeppink ;
}
.blue {
    background-color: blue ;
}
.green {
   background-color: green;
}
.orange {
    background-color: orange;
}
.white {
    background-color: white;
}

Our HTML like this. Refer to the previous tutorial for bits you might not understand.

<html>
    <head>
        <link rel="stylesheet" href="app/bower_components/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="app.css">
        <title> Color Boxes </title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div id='pink-box' class="col-xs-6 col-sm-4 col-md-2 pink square">1</div>
                <div id='blue-box' class="col-xs-6 col-sm-4 col-md-2 blue square">2</div>
                <div id='dark-pink-box' class="col-xs-6 col-sm-4 col-md-2 dark-pink square">3</div>
                <div id='orange-box' class="col-xs-6 col-sm-4 col-md-2 orange square">4</div>
                <div id='green-box' class="col-xs-6 col-sm-4 col-md-2 green square">5</div>
                <div id='white-box' class="col-xs-6 col-sm-4 col-md-2 white square">0</div>
            </div>
        </div>
    <script src="jquery/dist/jquery.min.js"></script>
    <script src="app.js"></script>
    </body>
</html>

We added a couple of <script> tags. Make sure you are referencing jQuery and your JavaScript file. Now to some super cool JavaScript stuff.

We can actually add objects to our page from our JavaScript file. We will use jQuery

$('body').append('<div>Hello World</div>');

We can't think about it like appending HTML to the HTML file, but we are appending objects in other objects.

We want to create a grid. We don't want to have to write out every square, so we will have a for loop do that for us.

Look over this code and try to figure out what it is doing. Talk through every line.

Add a .box class to your CSS real quick.

.box {
    height: 50px;
    border: 3px solid #000000;
}

var container = '';

for (var x = 0; x < 10; x++){
    container += '<div class="row">';
    for (var y = 0; y < 12; y++){
        container += '<div class="box col-xs-3 col-sm-1"></div>';
    }
    container += '</div>';
}

$('.container').append(container);

We are building a string, that we then can append. That's what the += is all about. If you don't understand, look over it again.

For every outer loop, the nested loop will add 12 rows. The outer loop will open a row

and close it.

Try looking over it one more time if it doesn't make sense.

There are some constants in that code, which is bad programming, so we are going to add two variables. Spot the differences and think about why the latter code block would be more useful.

var rows=10;
var columns = 12;
var container = '';
for (var x = 0; x < rows; x++){
    container += '<div class="row">';
    for (var y = 0; y < columns; y++){
        container += '<div class="box col-xs-3 col-sm-1"></div>';
    }
    container += '</div>';
}

$('.container').append(container);

Now let's use jQuery to make those buttons for the palette functional with some event listeners.

var whichColor = '';

$("#pink-box").click(function(){whichColor = 'pink'});
$("#blue-box").click(function(){whichColor = 'blue'});
$("#dark-pink-box").click(function(){whichColor = 'deeppink'});
$("#orange-box").click(function(){whichColor = 'orange'});
$("#green-box").click(function(){whichColor = 'green'});
$("#white-box").click(function(){whichColor = 'white'});

Now, we want event listeners for each of the squares. We don't want to write code for each of the 120 squares like we did for the six buttons. You might think we need a for loop, that's good thinking, but we don't! Just a couple lines of JavaScript and jQuery can be super powerful here.

$('.box').click(function(){
    $(this).css('backgroundColor', whichColor)
});

The key word "this" will refer to which ever one of the many elements you clicked with the .box class. So, if you click $('.box')[101], $(this) will refer to $('.box')[101]. So so cool. Super slick.

.css() takes either one or two arguments, both strings. It will return the first if there is only one, and change the first to the second if there are two.

Nice. We have code that works great! Here is what we have so far.

var whichColor = '';
var rows=10;
var columns = 12;
var container = '';
for (var x = 0; x < rows; x++){
    container += '<div class="row">';
    for (var y = 0; y < columns; y++){
        container += '<div class="box col-xs-3 col-sm-1"></div>';
    }
    container += '</div>';
}

$('.container').append(container);

$("#pink-box").click(function(){whichColor = 'pink'});
$("#blue-box").click(function(){whichColor = 'blue'});
$("#dark-pink-box").click(function(){whichColor = 'deeppink'});
$("#orange-box").click(function(){whichColor = 'orange'});
$("#green-box").click(function(){whichColor = 'green'});
$("#white-box").click(function(){whichColor = 'white'});

$('.box').click(function(){
    $(this).css('backgroundColor', whichColor)
});

It would be nice for our users if they could just press which number they wanted instead of clicking the color.

There is an event listener for key presses.

window.addEventListener("keypress", checkKeyPressed);

The "checkKeyPressed" is a function we will write that will run when any key is pressed.

function checkKeyPressed(key) {
    if (key.keyCode == "49") {
        whichColor = 'pink'
    } else if (key.keyCode == "50") {
        whichColor = 'blue'
    } else if (key.keyCode == "51") {
        whichColor = 'deeppink'
    } else if (key.keyCode == "52") {
        whichColor = 'orange'
    } else if (key.keyCode == "53") {
        whichColor = 'green'
    } else if (key.keyCode == "48") {
        whichColor = 'white'
    }
}

The "key" argument is an keyboardEvent object. "key.keyCode" is a code. Every key has a code. Here is a list.
https://css-tricks.com/snippets/javascript/javascript-keycodes/

Here are all of our files so far.

CSS
body {
    text-align: center;
    font-size: 40px;
}
.square {
    height: 70px;
    border: 3px solid #000000;
}
.pink {
    background-color:pink ;
}
.dark-pink {
    background-color:deeppink ;
}
.blue {
    background-color: blue ;
}
.green {
   background-color: green;
}
.orange {
    background-color: orange;
}
.white {
    background-color: white;
}
.box {
    height: 50px;
    border: 3px solid #000000;
}
HTML
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="app/bower_components/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="app.css">
        <title> Color Boxes </title>
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div id='pink-box' class="col-xs-2 pink square">1</div>
                <div id='blue-box' class="col-xs-2 blue square">2</div>
                <div id='dark-pink-box' class="col-xs-2 dark-pink square">3</div>
                <div id='orange-box' class="col-xs-2 orange square">4</div>
                <div id='green-box' class="col-xs-2 green square">5</div>
                <div id='white-box' class="col-xs-2 white square">0</div>
            </div>
        </div>
    <script src="jquery/dist/jquery.min.js"></script>
    <script src="app.js"></script>
    </body>
</html>
JavaScript
var whichColor = '';
var rows=10;
var columns = 12;
var container = '';
for (var x = 0; x < rows; x++){
    container += '<div class="row">';
    for (var y = 0; y < columns; y++){
        container += '<div class="box col-xs-3 col-sm-1"></div>';
    }
    container += '</div>';
}

$('.container').append(container);

$("#pink-box").click(function(){whichColor = 'pink'});
$("#blue-box").click(function(){whichColor = 'blue'});
$("#dark-pink-box").click(function(){whichColor = 'deeppink'});
$("#orange-box").click(function(){whichColor = 'orange'});
$("#green-box").click(function(){whichColor = 'green'});
$("#white-box").click(function(){whichColor = 'white'});

$('.box').click(function(){
    $(this).css('backgroundColor', whichColor)
});

window.addEventListener("keypress", checkKeyPressed);

function checkKeyPressed(key) {
    console.log(key)
    if (key.keyCode == "49") {
        whichColor = 'pink'
    } else if (key.keyCode == "50") {
        whichColor = 'blue'
    } else if (key.keyCode == "51") {
        whichColor = 'deeppink'
    } else if (key.keyCode == "52") {
        whichColor = 'orange'
    } else if (key.keyCode == "53") {
        whichColor = 'green'
    } else if (key.keyCode == "48") {
        whichColor = 'white'
    }
}
Practice ideas
  • Make the color selected have a more distinct border
  • Make the squared smaller
  • Make more colors
  • Give the squares random colors to begin with

Have fun with your own ideas!

Sign up for more like this.

Enter your email
Subscribe