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
#boardElement as a Flex-Container and Adddisplay:flexproperty to it. - Add
flex-warpproperty to make sure that your square warp to lines. - Define our chess board
widthandheight. - use 1px
borderand 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.
Top comments (0)