<html>
<head>
<style>
div>div{
width: 100px;
height: 100px;
}
.white{
background: white;
}
div.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 800px;
height: 800px;
background-color: black;
margin-left: 23%;
border-style: solid;
border-color: black;
justify-content: center;
}
h2{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h2 >CHESS BORD</h2>
<div id="chessBoard" class="container">
<!--- 64 div tags-->
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<script>
var elements = document.getElementById('chessBoard').children;
var reverse = false;
for(i=0;i<elements.length;i++){
if(i%8 == 0) reverse = !reverse;
if(reverse){
if(i%2 == 0)
elements[i].className = "white";
}
else if(i%2 != 0){
elements[i].className = "white";
}
}
</script>
</body>
</html>Create eight by eight (even) chess board JavaScript
Related Posts
Make object serializable (New object)
We will not be touching the old object (keeping the...
JS stop code sniffing
It’s not 100% safe. But can protect code for some...