JSFiddle - React, Tailwind, and code Playground

by merindema

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"/>
		<link rel="stylesheet" href="style_lesson14.css" />
		<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
		<script src="https://kit.fontawesome.com/c0a4c8df11.js" crossorigin="anonymous"></script>
		<script src="lesson14.js"></script>
</head>
<body onload="chess()";>

</body>
</html>

CSS

/* ======================================= Обнуление ================================================= */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,  
form, fieldset, input, p, blockquote, table, th, td, embed, object { 
  padding: 0; 
  margin: 0;  
  } 
table { 
  border-collapse: collapse; 
  border-spacing: 0; 
  } 
fieldset, img, abbr { 
  border: 0; 
  } 
address, caption, cite, code, dfn, em,  
h1, h2, h3, h4, h5, h6, strong, th, var { 
  font-weight: normal; 
  font-style: normal; 
  } 
caption, th { 
  text-align: left; 
  } 
h2, h3, h4, h5, h6 { 
  font-size: 1.0em; 
  } 
q:before, q:after { 
  content: ''; 
  } 
a, ins { 
  text-decoration: none; 
  color: #000;
  }
h4{
  margin-left: 10px;
}
/* =======================================end Обнуление ================================================= */

.div_black{
  background-color: #000;
  width: 70px;
  height: 70px;
  display: inline-block;
}
.div_white{
  background-color: #f5f5dc;
  width: 70px;
  height: 70px;
  display: inline-block;
}

JavaScript

function chess() {
	var white = '<div class="div_white"></div>';
	var black = '<div class="div_black"></div>';

	// если число четное(i+j)%2 == 0; 
	// то пишем 0
	// если не четное, то записываем 1
	for (var i = 1; i <= 8; i++) {      //цикл, 1 строка		
		for (var j = 1; j <= 8; j++) {  //цикл 8 строк 			
			if((i + j)%2==0){	
				document.write(white);  //белый
			}
			else{
				document.write(black); //черный
			}		
		}
		document.write("<br>");
	}
}