In our last guide, we went over how to make a chest board in html. In this guide, you’re going to learn how to make a chess board in JavaScript. We’re goin to use vanilla JavaScript, avoiding the use of any libraries such as jQuery as they load significantly slower than pure javascript.
We are going to use divs for every part of the part and render those divs with javascript. So the only HTML that we need to have in the index.html page is the parent div of the board. All the inner divs, or child elements, will be injected into the HTML using pure javascript.
Before going to step one, we need to define the elements that we are going to use for the board. In this tutorial, I’m using “board”, for the id of the parent div. Eight rows will be rendered with “div-row” as the class. And then eight squares will be rendered inside each row with the class “piece-box white-box” for light squares and “piece-box black-box” for the dark squares.
Open your coding tool of choice, I like codesandbox, and let’s get started.
Step 1. Set Up Project With Index.html
Set up your project by having an index.html, a css file for styles, styles.css, and a scripts file that our javascript will be written in to called scripts.js. Add the following lines of code in the index.html file.
Call the styles.css file inside the <head> tags.
<link rel="stylesheet" href="./styles.css" />And call the scripts.js file just before the closing <body> tag.
<script src="/scripts.js"></script>Step 2. Make div For The Board
Write the div that we will call with javascript to inject the html for the chess board within the body tag of the index.html file.
<div id="board"></div>Now if we look at our html, we will see the div.
Step 3. Define Parent Div and Coordinates of Board
In the scripts.js file, define the parent div we wrote in the html using document.querySelector. Then define the coordinates that will be rendered for the board notation.
// Create a center tag to center all the elements
let parentDiv = document.querySelector("#board");
let alphas = "abcdefgh".split("");
let nums = "87654321".split("");Now the javascript knows that it should search the document for this id.
Step 4. Create Table, Rows, and Squares
Create a table element that will be rendered as a child div where the rows and cells will be rendered.
// Create a center tag to center all the elements
let parentDiv = document.querySelector("#board");
let alphas = "abcdefgh".split("");
let nums = "87654321".split("");
// Create a table element
let ChessTable = document.createElement("div");
for (let i = 0; i < 8; i++) {
// Create a row
let divRow = document.createElement("div");
divRow.setAttribute("class", "div-row");
for (let j = 0; j < 8; j++) {
// Create a cell
let divData = document.createElement("div");
let boxId = alphas[j] + nums[i];
// 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
divData.setAttribute("class", "piece-box white-box");
divData.setAttribute("id", boxId);
divRow.appendChild(divData);
}
// If the sum of cell coordinates is odd then
// color the cell black
else {
// Create a class attribute for all black cells
divData.setAttribute("class", "piece-box black-box");
divData.setAttribute("id", boxId);
// Append the cell to its row
divRow.appendChild(divData);
}
}
// Append the row
parentDiv.appendChild(divRow);
}
// Modifying table attribute properties
parentDiv.setAttribute("cellspacing", "0");
document.body.appendChild(parentDiv);Step 5. Add Styles
The javascript is complete. Now to display the board in a way where we can see it instead of just the browser seeing it. We simply add css to the styles.css file. This is the fun part.
For simplicity, we are making the squares black and white.
body {
background-color: gray;
width: 100%;
}
#board {
margin-top: 2rem;
margin-left: 10rem;
width: 480px;
}
.piece-box {
height: 60px;
width: 60px;
}
.black-box {
background-color: black;
}
.white-box {
background-color: white;
}
.div-row {
display: flex;
}Now you should be able to see the board displayed on the web page.
That concludes how to build a chess board using vanilla javascript. Of course, this is one of countless ways to render a board with js. You can customize the size, colors, and anything else you can imagine using javascript and css.