Welcome to Mine Finder

This is my first version of the “Mine Finder” application that I’m using as an example of programmatically made HTML elements. You click on a cell and it tells you how far the cell is from the mine. The idea is to either find the mine or take it in turns to try and avoid it. The game is quite fun to play.

Each of the cells in the grid is an HTML button which is created by a nested for loop in the program. I’m quite pleased with the code that makes the grid:

let container = document.getElementById("buttonPar");

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let newButton = document.createElement("button");
      newButton.className = "upButton";
      newButton.setAttribute("x", x);
      newButton.setAttribute("y", y);
      newButton.textContent = "X";
      newButton.setAttribute("onClick", "doButtonClicked(this);");
      container.appendChild(newButton);
    }
    let lineBreak = document.createElement("br");
    container.appendChild(lineBreak);
  }

All the buttons are assigned to the same event handler and each button is given attributes that give the position of the button in the grid. I like this because we can make the grid any size that we want and the program still works. It’s probably not the best way to make a game like this, you should really use a canvas I guess, but it was quite fun to write.