Creating a chessboard pattern with JavaScript and DOM

10 Sep, 2021
A chessboard pattern can be created very easily using JavaScript and the concept of document object module (DOM). Using this method, you can create a chessboard with any number of rows and columns as you desire by just tweaking few parameters. Also, the lines of code written using this method will also be way lesser than creating the same using pure HTML and CSS especially when the number of rows and columns is very large.
Approach: Create a nested for loop. Let us call the outer loop “i” and the inner loop “j”. The outer loop will be used to create rows and the inner loop will be used to create cells in each column. By doing so a N*M cells will be created where N is the number of rows and M is the number of columns. The combination of i and j value in the inner loop can be used to distinguish between each cell so formed. At the end of the loop, we will have a table created. Also, we need to color the cells with an appropriate color. If the summation of i and j yields an even number then the cell has to be colored white else it has to be colored black. This will create cells of alternative colors of white and black as seen in a chessboard. Creation of table and table cells can use done using DOM and coloration of cells can be done using CSS.
Below is the implementation of the above approach.
Filename: index.html
HTML
<!DOCTYPE html><html> <head>    <title>Chess board</title>    <style>        body {            text-align: center;        }         .cell {            height: 30px;            width: 30px;            border: 1.5px solid grey;            border-style: inset;        }         .blackcell {            background-color: black;        }         .whitecell {            background-color: white;        }    </style></head> <body>    <span style="color:green; font-size:30px;">        GeeksforGeeks    </span>    <br><br>     <script type="text/javascript">         // Create a center tag to center all the elements        var center = document.createElement('center');         // Create a table element        var ChessTable = document.createElement('table');        for (var i = 0; i < 8; i++) {             // Create a row            var tr = document.createElement('tr');            for (var j = 0; j < 8; j++) {                 // Create a cell                var td = document.createElement('td');                 // If the sum of cell coordinates is even                // then color the cell white                if ((i + j) % 2 == 0) {                     // Create a class attribute for all white cells                    td.setAttribute('class', 'cell whitecell');                    tr.appendChild(td);                }                 // If the sum of cell coordinates is odd then                // color the cell black                else {                     // Create a class attribute for all black cells                    td.setAttribute('class', 'cell blackcell');                     // Append the cell to its row                    tr.appendChild(td);                }            }             // Append the row            ChessTable.appendChild(tr);        }        center.appendChild(ChessTable);         // Modifying table attribute properties        ChessTable.setAttribute('cellspacing', '0');        ChessTable.setAttribute('width', '270px');        document.body.appendChild(center);    </script></body> </html>
Output:
Output
Code explanation: An 8 x 8 chessboard will be created for the above code. However, just by modifying the termination condition of i and j, we will be able to create a N x M chessboard with ease. Using Javascript DOM a table element is created initially using createElement(). we know that the i loop is used to create rows, hence a row element will be created during each iteration. similarly, the j loop is responsible for creating cells. Hence table cells are created during each iteration. As discussed before the color of each cell can be decided by the summation of i and j values. If the sum is even then the cell has to be colored white and if it is odd then the cell has to be colored black. This is done by creating and assigning an appropriate class attribute to each cell using setAttribute() and assigning the right color, size, and other properties as you wish using CSS. At the end, all the elements are appended inside the body of the HTML document. Hence, we are able to create a simple chessboard pattern using javascript and DOM very easily. 
surinderdawra388
CSS-Properties
HTML-DOM
HTML-Questions
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type