You need Login/Signup to run/submit the code.

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

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.

Specifications

Default State should be a grid of 8X8.

Chess Board Default Screen

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

Chess Board onClick Screen

Code Templates

HTML

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

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

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

JavaScript

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

createChessBoard('#chess-board');

Submission

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