chess-board-design-using-html-css-javascript

Chessboard Design Using html css and Javascript

Everyone knows about the Chess board. It is a plane board that has an alternative combination of white and black color. In this tutorial, we are going to design that board with the help of html, css and javascript.

Let's discuss the idea and execution of that design and code. First, we will create an html document that contains one table which has the id name "chessboard". After that, we will add eight rows and eight columns to that table using the javascript function. And the help of CSS changes the color of the box that you will see in this article further.

For more gsap animations you can follow the gsap playlist.

You can checkot web development project from this playlist.

01. HTML
02. CSS
03. Script
04. Output

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<html>
  <head>
    <title>Chessboard Design | Rustcode</title>
  </head>
  <body>
        //Content
  </body>  
</html>

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below.

<html>
  <head>
    <title>Chessboard Design | Rustcode</title>
  </head>
  <body>
    <table id='chessboard'></table>
  </body>  
</html>

Interview Question:

CSS:

#chessboard {
  padding: 0px;
  margin: 0 auto;
  border: 2px solid #181818;
  border-collapse: collapse;
}
#chessboard tr td {
  width: 60px;
  height: 60px;
}
#chessboard tr:nth-child(2n) td:nth-child(2n+1) {
  background: #000;
}
#chessboard tr:nth-child(2n+1) td:nth-child(2n) {
  background: #000;
}

Read Also:

Javascript:

var chessboard = document.getElementById('chessboard');
var space = 1;
for (var row = 0; row < 8; row++) {
  var rowEl = document.createElement('tr');
  for (var cell = 0; cell < 8; cell++) { 
    var cellEl = document.createElement('td');
    cellEl.dataset.position = space;
    rowEl.appendChild(cellEl);
    space++; 
  }
  chessboard.appendChild(rowEl);
}


function setPieceData (el, color, type) {
  el.classname = '';
  el.classList.add(color);
  el.classList.add(type);
}

Output:

Read Also:

Archive