Unsplash image for article hero image

Chess board generator

In january 2025 I was asked for an interview to create a chessboard in a live coding session.

I created a pen and tackled the task without any frontend framework.

We can do this with just vanilla JavaScript, I added some css variables to be able to modify the size of the board and of each cells in an input and update the view.

We just have to change the DOM when we change the grid size, when we change the size of the cells updating the CSS variable will update the view automatically :)

See the Pen Chess board generator by Adrien Martinet (@Yexan) on CodePen.

Interesting points I’ve practiced on this POC :

  • It was fun to create a small project in vanilla JS
  • I didn’t often use CSS variable manipulation by a user so it was cool to experiment
Contact