<div id="app" class="monsterGrid"></div>
<footer>
  <hr />
  <p>
    Icons by
    <a href="https://thenounproject.com/term/door/311732/">Jamie Dickinson</a>,
    <a href="https://thenounproject.com/term/monster/184225/">Nicky Knicky</a>,
    <a href="https://thenounproject.com/term/monster/1510400/">Alvaro Cabrera</a
    >, <a href="https://thenounproject.com/term/monster/28460/">Eliricon</a>,
    <a href="https://thenounproject.com/term/monster/82823/">April Yang</a>,
    <a href="https://thenounproject.com/term/monster/1062009/">tk66</a>,
    <a href="https://thenounproject.com/term/monster/24990/">Alex WaZa</a>,
    <a href="https://thenounproject.com/term/monster/37212/">Husein Aziz</a>,
    <a href="https://thenounproject.com/term/monster/2236082">iconcheese</a>,
    and
    <a href="https://thenounproject.com/term/socks/38451/">Yazmin Alanis</a>.
  </p>
</footer>
 
<script>
  // Variables
  let elem = document.querySelector("#app");
  let monsters = [
    "monster1",
    "monster2",
    "monster3",
    "monster4",
    "monster5",
    "monster6",
    "monster7",
    "monster8",
    "monster9",
    "monster10",
    "monster11",
    "sock",
  ];

  // Methods
  let shuffle = function (array) {
    let currentIndex = array.length;
    let temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  };

  let monstersGrid = function () {
    elem.innerHTML = shuffle(monsters.slice())
      .map(function (item) {
        return `
        <div class="monsterGridItem" aria-live="polite">
          <button data-monster-id=${item} class="">
            <img src="../../img/door.svg" alt="A door whera monster lies behind"></img>
        </button>
        </div>`;
      })
      .join("");
  };

  let clickHandler = function (event) {
    let monster = event.target.closest('[data-monster-id]');
    if (!monster) return;
    let monsterID = monster.getAttribute('data-monster-id');
    monster.parentNode.innerHTML = `
    <img class="monsterGridItem" src="../../img/${monsterID}.svg" alt="An image of a ${monsterID === "sock" ? "sock" : "monster"}"></img>`
  }
  // Inits and listeners
  monstersGrid();
  document.addEventListener("click", clickHandler);

</script>