drbr/robotDraw.css

## robotDraw.css
body {
  font-family: sans-serif;
}

.grid {
  display: inline-flex;
  flex-direction: column;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  background-color: beige;
}

.row {
  display: flex;
  flex-direction: row;
}

.cell {
  border-top: 3px solid black;
  border-left: 3px solid black;
  height: 40px;
  width: 40px;
}

.obstacle {
  background-color: black;
}

.buttons {
  margin: 10px;
}

#robot {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

## robotDraw.html
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Robot</title>
  </head>
  <body>
    <table>
      <tr>
        <td></td>
        <td style="padding: 2px;">X: 0 →</td>
      </tr>
      <tr>
        <td style="text-align: center; vertical-align: top; padding: 2px;">Y: 0<br/>↓</td>
        <td>
          <div id="gridDiv"></div>
        </td>
      </tr>
    </table>
    </div>
    <div class="buttons">
      <button onClick="moveRandom()">Move Random</button>
    </div>
  </body>
</html>

## robotDraw.js
function drawGrid(size) {
  const grid = document.createElement('div');
  grid.className = 'grid';

  for (let y = 0; y < size; y++) {
    const row = document.createElement('div');
    row.className = 'row';
    grid.appendChild(row);

    for (let x = 0; x < size; x++) {
      const cell = document.createElement('div');
      cell.className = 'cell';
      row.appendChild(cell);
    }
  }

  document.getElementById('gridDiv').appendChild(grid);
}

function getCellAtIndex({ x, y }) {
  return document.querySelector(
    `.row:nth-of-type(${y + 1}) .cell:nth-of-type(${x + 1})`
  );
}

function drawRobot({ x, y, direction }) {
  const existingRobot = document.getElementById('robot');
  if (existingRobot) {
    existingRobot.parentNode.removeChild(existingRobot);
  }

  const emojiForDirection = {
    up: '⬆️',
    down: '⬇️',
    left: '⬅️',
    right: '➡️',
  };

  const newRobot = document.createElement('span');
  newRobot.id = 'robot';
  newRobot.textContent = emojiForDirection[direction] ?? '❓';

  const parentCell = getCellAtIndex({ x, y });
  parentCell.appendChild(newRobot);
}

function drawObstacles(obstacles) {
  for (const { x, y } of obstacles) {
    const cell = getCellAtIndex({ x, y });
    cell.classList.add('obstacle');
  }
}
	body {
	font-family: sans-serif;
	}

	.grid {
	display: inline-flex;
	flex-direction: column;
	border-right: 3px solid black;
	border-bottom: 3px solid black;
	background-color: beige;
	}

	.row {
	display: flex;
	flex-direction: row;
	}

	.cell {
	border-top: 3px solid black;
	border-left: 3px solid black;
	height: 40px;
	width: 40px;
	}

	.obstacle {
	background-color: black;
	}

	.buttons {
	margin: 10px;
	}

	#robot {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	}
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Robot</title>
	</head>
	<body>
	<table>
	<tr>
	<td></td>
	<td style="padding: 2px;">X: 0 →</td>
	</tr>
	<tr>
	<td style="text-align: center; vertical-align: top; padding: 2px;">Y: 0<br/>↓</td>
	<td>
	<div id="gridDiv"></div>
	</td>
	</tr>
	</table>
	</div>
	<div class="buttons">
	<button onClick="moveRandom()">Move Random</button>
	</div>
	</body>
	</html>
	function drawGrid(size) {
	const grid = document.createElement('div');
	grid.className = 'grid';

	for (let y = 0; y < size; y++) {
	const row = document.createElement('div');
	row.className = 'row';
	grid.appendChild(row);

	for (let x = 0; x < size; x++) {
	const cell = document.createElement('div');
	cell.className = 'cell';
	row.appendChild(cell);
	}
	}

	document.getElementById('gridDiv').appendChild(grid);
	}

	function getCellAtIndex({ x, y }) {
	return document.querySelector(
	`.row:nth-of-type(${y + 1}) .cell:nth-of-type(${x + 1})`
	);
	}

	function drawRobot({ x, y, direction }) {
	const existingRobot = document.getElementById('robot');
	if (existingRobot) {
	existingRobot.parentNode.removeChild(existingRobot);
	}

	const emojiForDirection = {
	up: '⬆️',
	down: '⬇️',
	left: '⬅️',
	right: '➡️',
	};

	const newRobot = document.createElement('span');
	newRobot.id = 'robot';
	newRobot.textContent = emojiForDirection[direction] ?? '❓';

	const parentCell = getCellAtIndex({ x, y });
	parentCell.appendChild(newRobot);
	}

	function drawObstacles(obstacles) {
	for (const { x, y } of obstacles) {
	const cell = getCellAtIndex({ x, y });
	cell.classList.add('obstacle');
	}
	}