Chessboard in Javascript

–HTML

<div class="frame"></div>

–CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.frame {
  width: 402px;
  height: 402px;
  margin: 20px auto;
  border: 1px solid #000;
}
.frame span {
  width: 50px;
  height: 50px;
  display: inline-block;
  float: left;
}
.frame span.black {
  background: #000;
}

–JS

var frame = document.querySelector('.frame');

for(var x=1; x<=8; x++){
  for(var y=1; y<=8; y++){
    if((x + y) % 2 == 0){
      frame.innerHTML += "";
    } else {
      frame.innerHTML += "";
    }
  }
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”ZoePVq” default_tab=”css,result” user=”pradeepanvi”]See the Pen Chessboard in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]