DEV Community

Cover image for How To Create Chess Pattern With HTML, CSS And a Little bit of JS
Asela
Asela

Posted on

How To Create Chess Pattern With HTML, CSS And a Little bit of JS

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>
Enter fullscreen mode Exit fullscreen mode

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;

  }
Enter fullscreen mode Exit fullscreen mode

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;
  }



Enter fullscreen mode Exit fullscreen mode

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;
  }

Enter fullscreen mode Exit fullscreen mode

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);
}

Enter fullscreen mode Exit fullscreen mode

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: https://zaselalk.github.io/Chess-Pattern-CSS-JS/

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

Discussion (0)