Define a function to programmatically create a uniform grid inside a given element.


Very hard


It's more than likely that you have worked with graphhs at some point in your life, whether at school or at work. And if this is the case, then you might as well be familiar with the idea of plotting graphs.

When plotting a graph manually, we typically use a graph paper, sometimes also referred to as a grid paper. It has a uniform two-dimensional grid laid out whereby it's very convenient to plot a given point within the bounds of the graph created.

The figure below shows an example of such a grid:

The grid on a graph paper.

Now in this exercise, you have to define a function createGrid() that creates such a grid inside a given element, taking a couple of configurations as well.

The function shall take three arguments, as described below, in the given order:

  1. The element inside which we want the grid. This is required.
  2. A number representing the distance between the grid lines. This is optional and defaults to 10.
  3. A Boolean specifying whether the grid lines shall be thick or not. A thick grid line is one that is 2px wide and a normal one is just 1px wide. This is also meant to be optional and defaults to false.

If the first argument is not an element node, or if the second argument is not a number or is not within the range 5 - 100, or the third argument is not a Boolean, you MUST throw an error and explain the reason of the error nicely.

There are as well certain things that the grid created by the function must abide by. They are listed as follows:

  • The lines that run through the origin must be black in color.
  • Each fifth must be a bit of lighter in color, for e.g. grey, #aaa etc.
  • The rest of the lines must be the lightest of all in color, for e.g. lightgrey, or #ddd, etc.
  • The origin point must be at the center of the element.

Note also that you MUST solve this exercise in a procedural style, NOT in an object-oriented style.

Shown below is a simple example:

<div id="d1"></div>
#d1 {
   background-color: #f1f1f1;
   overflow: hidden;
   position: relative;
   width: 300px;
   height: 300px;
// createGrid() defined here.

createGrid(document.querySelector('#d1'), 6, true);

The grid is drawn inside the #d1 element with the spacing between the grid lines set to 6px and the grid lines made thick (i.e. 2px wide).