The Chess Journal

Chess Tutorials For Beginners

  • Home
  • Start Here
    • How To Set Up a Chess Board
    • How To Solve Chess Puzzles
    • How To Read Chess Notation
    • Complete List of Official Rules of Chess
    • Chess Terminology
  • Strategy
    • Openings
    • Checkmates Patterns
    • Tactics
  • Players
  • Resources
    • Best Chess Books By Rating Bracket
    • Books Mentioned In The Queen’s Gambit on Netflix (Real and Fake Books)
    • 7 Best Chess Books For Beginners To Cut The Learning Curve
  • About Us
  • Editor
  • Sign Up
No Result
View All Result
The Chess Journal
  • Home
  • Start Here
    • How To Set Up a Chess Board
    • How To Solve Chess Puzzles
    • How To Read Chess Notation
    • Complete List of Official Rules of Chess
    • Chess Terminology
  • Strategy
    • Openings
    • Checkmates Patterns
    • Tactics
  • Players
  • Resources
    • Best Chess Books By Rating Bracket
    • Books Mentioned In The Queen’s Gambit on Netflix (Real and Fake Books)
    • 7 Best Chess Books For Beginners To Cut The Learning Curve
  • About Us
  • Editor
  • Sign Up
No Result
View All Result
The Chess Journal
No Result
View All Result

Home » Chess Programming » How To Make a Chess Board In JavaScript (Step-By-Step)

How To Make a Chess Board In JavaScript (Step-By-Step)

William Steele by William Steele
in Chess Programming

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.

Page Navigation

  • Step 1. Set Up Project With Index.html
  • Step 2. Make div For The Board
  • Step 3. Define Parent Div and Coordinates of Board
  • Step 4. Create Table, Rows, and Squares
  • Step 5. Add Styles

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.

Previous Post

10 Best Chess Games of Hans Moke Niemann

Next Post

10 Best Chess Games of Vladimir Kramnik

William Steele

William Steele

William is relatively new to Chess, but in just 3 short months achieved a rating of over 1000. Not saying it's very good, but it does prove a slight obsession with the game after playing his first game.

Related Posts

10 Best Chess Games of Stockfish (Chess Engine)

by Editorial Staff
January 20, 2023
Chess Engines

...

Read more

How To Create A Chess Board Using HTML and CSS (In Only 2 Steps)

by William Steele
August 5, 2022
Chess Programming

...

Read more
Must Read Chess Guides
Checkmate PatternsChess PiecesChess EnginesChess GambitsChess LibraryChess Openings

Chess Guides

  • 7 Tips on How To Get Better at Chess
  • 7 Tips on How To Stop Blundering in Chess
  • Does Chess Make You Smarter?
  • How Does Age Affect Chess Abilities

About The Chess Journal

The Chess Journal is a free resource for chess players to learn and master the ultimate game.

Support

  • About The Chess Journal
  • Terms of Use and Policies
  • Cookies
  • Privacy Policy
  • Terms

Categories

  • Chess Strategy
  • Chess Players
  • Chess Programming
  • Chess Resources and Tools

© 2022 - The Chess Journal - All Rights Reserved

No Result
View All Result
  • Home
  • Start Here
    • How To Set Up a Chess Board
    • How To Solve Chess Puzzles
    • How To Read Chess Notation
    • Complete List of Official Rules of Chess
    • Chess Terminology
  • Strategy
    • Openings
    • Checkmates Patterns
    • Tactics
  • Players
  • Resources
    • Best Chess Books By Rating Bracket
    • Books Mentioned In The Queen’s Gambit on Netflix (Real and Fake Books)
    • 7 Best Chess Books For Beginners To Cut The Learning Curve
  • About Us
  • Editor
  • Sign Up

© 2022 - The Chess Journal - All Rights Reserved