How To Create Chess Pattern With HTML, CSS And a Little bit of JS
Tags: css, javascript
Published: 2021-08-21 16:03:45

Hello everyone, Today I'll tell you how to create a simple 8 X 8 chess pattern using HTML, CSS and a little JS.


Complete Source Code: https://github.com/zaselalk/Chess-Pattern-CSS-JS


First things first, Here's my little piece of HTML code.

`index.html`
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chess-Pattern-CSS-JS </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="board">
    </div>   
    <script src="script.js"></script>
</body>
</html>
```

**What Next?** 

Now Let's add some styles for our chessboard pattern,

`style.css`. 

```
#board{
    display: flex;
    flex-wrap: wrap;
    width: 640px;
    height: 640px;
    border:1px solid black;
    background-color: #fff;
  
  }
```
**Explain**
* Use `#board` Element as a Flex-Container and Add `display:flex` property to it.
* Add `flex-warp` property to make sure that your square warp to lines.
* Define our chess board `width` and `height`.
* use 1px `border` and white as `background-color' to make sure your chess board more decent.

Next, We're going to Style small square on a chessboard, in this Code there're Two types of squares,
Which are,
*`.esquare` - Square that in even line
*`.osquare` - Sqaure in odd line


**Two Types? But Why?**

That's because chessboard have 64 squares and there're 8 squares in one line. There're 8 lines on board. But these lines are not in the same pattern.

As an example, If we select black squares and numbered them.Look you can see they are changing as odd and even pattern.

Now let's Back to our code.

`style.css` . 

```````
.esquare, .osquare{
    width: 80px;
    height: 80px;
    border:1px solid black;
    box-sizing:border-box;
  } 

``````

Nice! We Finished most of CSS Codes and finally we have to style our Black Squares like chess pattern. Let's achieve this.

more code for `style.css`

```
 .esquare:nth-of-type(2n){
    background-color: #000;
  }
  .osquare:nth-of-type(2n+1){
    background-color: #000;
  }

```

**Explain**

As I said this is the final part of our CSS code. Within this part , We're going to design pattern of black squares in our chessboard.

As I mention before, We group squares as `esqaures` and `osqaures` to style our chessboard.

Now you are end of line and final one is our js file.

**But Why JS?**

The truth is normally JS isn't use for the simple codes like this, But to have a more clean code I added little JS code to multiply `.square` elements.

Here is My Js Code
`script.js`

```
const board = document.getElementById('board');
let patterneven = " <div class='esquare'></div>" ;
let patternodd = " <div class='osquare'></div>" ;

for(i=0;i<4;i++){
	board.innerHTML += patterneven.repeat(8);
	board.innerHTML += patternodd.repeat(8);
}

```

Using JS to create a loop so that we could easily make our code more clear and Easy to enhanced.

Mission complete !, Now you have Chess Pattern 😎 

Would you like to try Live demo ? Then click the link below.  
 
Live Demo: http://gestyy.com/epXRuq

Do you know this is my first post for dev.to and feel free to add comments about this post.