Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a chessboard pattern with JavaScript and DOM?
Creating visual patterns with JavaScript and DOM manipulation is a great way to understand programming logic. In this tutorial, we'll create a classic chessboard pattern using JavaScript to dynamically generate alternating colored squares.
Algorithm Overview
The chessboard pattern relies on a simple mathematical principle: if the sum of row and column indices is even, the square is one color (black), otherwise it's another color (white). This creates the alternating pattern characteristic of a chessboard.
Basic Implementation
Here's how to create a chessboard pattern step by step:
- Create a container div for the chessboard
- Use nested loops to generate 8×8 grid of squares
- Apply alternating colors based on position logic
- Style squares with CSS for proper layout
Example 1: Chessboard Without Borders
This example creates a clean chessboard pattern without cell 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 2: Chessboard With Borders
This version adds borders to clearly define each square. Note that square dimensions are reduced to 48px to accommodate the 1px borders within the same total area:
<!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>
How the Pattern Logic Works
The key to the alternating pattern is the condition (i + j) % 2 == 0:
- When row + column is even ? black square
- When row + column is odd ? white square (default)
- This creates natural alternation both horizontally and vertically
Customization Options
You can easily modify the chessboard by:
- Changing colors by modifying the backgroundColor values
- Adjusting size by changing the loop limits and square dimensions
- Adding hover effects or click handlers for interactivity
- Using CSS Grid or Flexbox instead of float for more modern layouts
Conclusion
Creating a chessboard pattern demonstrates fundamental programming concepts like nested loops and conditional logic. The mathematical approach of using modulo operations to determine square colors is both elegant and efficient for generating alternating patterns.
6K+ Views
