Typewriter Effect Simulator

by velo_ninja

HTML

<!DOCTYPE html>
<html>
<head>
<title>Simple Chessboard</title>
<style>
body {
  font-family: sans-serif;
}
.chessboard {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  border: 2px solid black;
}
.square {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
}
.light {
  background-color: #f0d9b5;
}
.dark {
  background-color: #b58863;
}
</style>
</head>
<body>
  <div class="chessboard" id="chessboard"></div>
  <script src="script.js"></script>
</body>
</html>

JavaScript

const board = document.getElementById('chessboard');
const pieces = {
'R': '♜', 'N': '♞', 'B': '♝', 'Q': '♛', 'K': '♚', 'P': '♟',
'r': '♖', 'n': '♘', 'b': '♗', 'q': '♕', 'k': '♔', 'p': '♙'
};

let boardState = [
['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'],
['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
[' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],