How to create a chessboard pattern with JavaScript and DOM?

Front End Technology Javascript Web Development

With a little bit of JavaScript and DOM manipulation, you can create all sorts of interesting patterns on a webpage. In this tutorial, we'll show you how to create a chessboard pattern using JavaScript and the DOM.

Approach

STEP 1 − We start by creating a <div> element with an id of "chessboard". This will be the element that contains our chessboard pattern.
STEP 2 − We create a <style> element that sets the width and height of the #chessboard div to 400px. We also create a class called .chess-square that sets the width and height of elements to 50px and floated to the left.
STEP 3 − We create a nested for loop that loops through 8 rows and 8 columns.
STEP 4 − For each iteration of the for loop, we create a <div> element with the class of "chess-square".
STEP 5 − If the sum of the current row and column is even, we set the background color of the chess square to black. Otherwise, the background color is set to white.
STEP 6 − We append the chess square <div> element to the #chessboard div.
STEP 7 − We close the for loop.
STEP 8 − We close the <script> tag.
STEP 9 − We close the #chessboard div.
STEP 10 − We close the <body> tag.
STEP 11 − We close the <html> tag

Example

Chessboard Pattern Without Cell Border

In the program below we create a chessboard pattern with JavaScript and DOM. The cell in the pattern is without borders


<!DOCTYPE HTML>
<html>
<head>
<style>
#chessboard {
   width: 400px;
   height: 400px;
}
.chess-square {
   float: left;
   width: 50px;
   height: 50px;
   background-color: #fff;
}
</style>
</head>
<body>

<div id="chessboard">
</div>
<script>
   var chessboard = document.getElementById('chessboard');
   for (var i = 0; i < 8; i++) {
      for (var j = 0; j < 8; j++) {
         var chessSquare = document.createElement('div');
         chessSquare.className = 'chess-square';
         if ((i + j) % 2 == 0) {
            chessSquare.style.backgroundColor = '#000';
         }
         chessboard.appendChild(chessSquare);
      }
   }
</script>
</body>
</html>

Example

Chessboard pattern with cell borders

In the example below, we create a chessboard pattern with cell borders using JavaScript and DOM. To create borders we used 1px solid black border.


<!DOCTYPE HTML>
<html>
<head>
<style>
#chessboard {
   width: 400px;
   height: 400px;
}
.chess-square {
   float: left;
   width: 48px;
   border: 1px solid black;
   height: 48px;
   background-color: #fff;
}
</style>
</head>
<body>
<div id="chessboard"></div>
<script>
   var chessboard = document.getElementById('chessboard');
   for (var i = 0; i < 8; i++) {
      for (var j = 0; j < 8; j++) {
         var chessSquare = document.createElement('div');
         chessSquare.className = 'chess-square';
         if ((i + j) % 2 == 0) {
            chessSquare.style.backgroundColor = '#000';
         }
         chessboard.appendChild(chessSquare);
      }
   }
</script>
</body>
</html>

And that's all there is to creating a chessboard pattern with JavaScript and DOM! As you can see, it's not too difficult once you understand how the for loop works. Experiment with different patterns and see what you can come up with!

Imran Alam

Updated on: 03-Aug-2022

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started