CODEWITHSUNDEEP
javascripthtmlcss
john
john

Reputation: 11709

render a box of size n in an html using javascript

I am trying to make a grid in an HTML using plain Javascript. I have a URL in which number is given and basis on that I am generating a grid.

My url is like this abc.html?num=5 and basis on this num=5 I need to generate a grid of 5x5 size.

Currently I am using jQuery but I want to see how we can do the same thing with plain Javascript. Here is my jsfiddle example.

Below is my full content of abc.html:

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var defaultNum = 4;
                var url = window.location.search;
                var num = parseInt(url.split('num=')[1]) || defaultNum;
                var container = $('#container');
                var width = container.outerWidth();
                createGrid(num);

                function createGrid(n) {
                    if (!$.isNumeric(n) || n <= 0) return;
                    for (var i = 0; i < n * n; i++) {
                        var dimension = width / n;
                        var cell = $('<div/>').addClass('gridCell').css({
                            'width': dimension + 'px',
                                'height': dimension + 'px'
                        });
                        container.append(cell);
                    }
                }
            });
        </script>
        <style>
            #container {
                width: 300px;
                height: 300px;
            }
            #container > .gridCell {
                float: left;
                padding: 0;
                margin: 0;
                border: 0;
                outline: 1px solid;
            }
        </style>
    </head>

    <body>
        <div id="container"></div>
    </body>

</html>

How can I do the same thing with plain Javascript instead of using any libraries like jquery which I am using currently?

Upvotes: 0

Views: 390

Answers (1)

Ben
Ben

Reputation: 1568

This can't be demonstrated in a jsfiddle because it requires access to the url. But here is the code, put it in an HTML and test it out:

<html>
<style>
#container {
    width: 300px;
    height: 300px;
}
#container > .gridCell {
    float: left;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 1px solid;
}
</style>
<body>
<div id="container">
    
</div>

<script>
// QueryString is the function that gets the num parameter.
// Source to this function: http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-url-parameter
var QueryString = function () {
  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
        // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
        // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
        // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
    return query_string;
} ();

var defaultNum = 3;
var num = parseInt(QueryString.num) || defaultNum;
var container = document.getElementById('container');
var width = container.offsetWidth;
createGrid(num);

function createGrid(n) {
    // If n is not a number or smaller than 0
    if(isNaN(n) || n <= 0)
        return;
    for(var i = 0; i < n*n; i++) {
        var dimension = width/n;
        var cell = document.createElement('div');
        cell.className = cell.className + ' gridCell';
        cell.style.width = dimension + 'px';
        cell.style.height = dimension + 'px';
        container.appendChild(cell);
    }
}
</script>
</body>
</html>

Upvotes: 1

Related Questions