Create a Chess Board | Frontend Coding Challenge | DevKode DOM Challenge | JavaScript | HTML | CSS | React
@Devtools Tech

Do you see value in our efforts?

Devtools Tech is a free platform for Frontend Engineers. It takes a lot of time, effort, and finanical resources to keep the platform running. If you see any value in our work and would like to support us then you can do using the following options.


In this challenge, candidate needs to create a chess board, where if you click on any of the block it should highlight its diagonals.

Chess Board: It is a square form board in which there are equal rows and columns (8x8) with alternate intersections marked as black background.


  1. Default State should be a grid of 8X8.

Chess Board Default Screen

  1. Clicking on any cell should highlight its diagonal. (Feel free to choose color)

Chess Board onClick Screen

Code Templates


<!DOCTYPE html>
    <title>Devtools Tech Sandbox | Chess Board Challenge</title>
    <meta charset="UTF-8" />

    <div id="chess-board"></div>

    // do not remove
    <script src="./index.js"></script>


 * Creates chess board
 * @param el DOM Element
function createChessBoard(el) {
    // write logic to create the chess board



Please start the timer before starting and finish your solution within 90 mins. Share your solution with us on Twitter or LinkedIn.

This question is part of DevKode Coding Challenges. Find the original challenge here