Exercise: Colored Squares

Inside the directory you created for this course on JavaScript, create a new folder called Exercise-50-Colored-Squares and put the .html solution files for this exercise within it.

The styles for the squares seem basic, so we'll start off by laying out them as follows, for the class .square:

.square {
   position: fixed;
   opacity: 0.8;
}

position: fixed is set because we want the squares to be fixed in the viewport. opacity: 0.8 is set as instructed in the description of the exercise (in order to distinguish between two overlapping squares).

As for the remaining styles — such as width, height, and background color — they'll all be applied to each square element node later on, as it's created, using its style property.

Time to turn to the scripting part.

Given so many random things, all of which require us to generate a random integer in a given range, let's start by creating a function to accomplish this. The function would return a random integer in a given range.

Let's call the function getIntegerRandom(start, end), where start denotes the starting point (inclusive) of the random integer's range while end denotes its ending point (inclusive as well).

Following is the definition of this function:

function getIntegerRandom(start, end) {
   return start + Math.floor(Math.random() * (end - start + 1))
}

Now if we call getIntegerRandom(0, 10), we'd get an integer in the range 0 - 10 (both inclusive). Simple?

With this done, let's now define a function that creates a square with a random background color, a random left and top position, and finally a random width and height. We'll call it getSquare().

The <div>'s creation is quite trivial — just call the createElement() method on the document object passing in the tag name of the element and then give it the .square class.

As for the generation of a random RGB color, we'll use another function, again defined manually. That is, getColorRandom(), defined as follows:

function getColorRandom() {
   return `rgb(${getIntegerRandom(0, 255)}, ${getIntegerRandom(0, 255)}, ${getIntegerRandom(0, 255)})`;
}

This function returns back a string of the form 'rgb(red, green, blue), where red, green, and blue are parameters of this CSS function filled with actual values. The return value is set this way so that it's pretty straightforward to use it for the backgroundColor style property on the given element.

Alright, given the getColorRandom() function, let's come back to the getSquare() function:

function getSquare() {
   var divElement = document.createElement('div');
   divElement.className = 'square';

   var width = getIntegerRandom(50, 100);
   divElement.style.width = divElement.style.height = width + 'px';

   divElement.style.backgroundColor = getColorRandom();

   // Keep the square within the width of the viewport.
   divElement.style.left = getIntegerRandom(0, innerWidth - width) + 'px';

   // Keep the square within the height of the viewport.
   divElement.style.top = getIntegerRandom(0, innerHeight - width) + 'px';
   return divElement;
}

Each statement here is pretty self-explanatory:

• First, a <div> element is created and then given the 'square' class.
• Next up, a random value is obtained and used as the width and height of the square element created.
• After this, the background color of the square is set with the help of the getColorRandom() function.
• Finally, the square is positioned on the viewport using the left and top CSS style properties and the getIntegerRandom() function.

The very last thing left now is to create 5 squares using this very getSquare() function in the underlying HTML page.

This is accomplished below:

function getIntegerRandom()  { /* ... */ }
function getColorRandom()  { /* ... */ }
function getSquare() { /* ... */ }

for (var i = 0; i < 5; i++) {
   document.body.appendChild(getSquare());
}

Live Example

And this completes our exercise.