puzzle.js

const start = () => {
  // 1. DONE - Event listener on click
    // select td elements
  // 3. DONE - Add class "empty" to clicked element
  // 2. DONE - Find the previously empty element (class="empty")
  // 4. DONE - Add the number from the clicked element to 
  //    the previously empty element
  // 5. DONE - Remove the number from the cicked element.
  // 6. DONE - Remove the class "empty" from the previously 
  //    empty element
  // 7. Some elements are not supposed to be clickable

  square.foreach(() =>{})


  const squares = document.querySelectorAll("td");

  squares.forEach((square) => {
    
    square.addEventListener("click", (evt) => {
      // Renaming for clarity
      const clickedSquare = square;
      const emptySquare = document.querySelector(".empty");

      const clickedCol = clickedSquare.cellIndex;
      const clickedRow = clickedSquare.parentElement.rowIndex;

      const emptyCol = emptySquare.cellIndex;
      const emptyRow = emptySquare.parentElement.rowIndex;

      if ((clickedCol === emptyCol && clickedRow === emptyRow + 1) ||
          (clickedCol === emptyCol && clickedRow === emptyRow - 1) ||
          (clickedRow === emptyRow && clickedCol === emptyCol + 1) ||
          (clickedRow === emptyRow && clickedCol === emptyCol - 1)) {
        // Get the number from inside the clicked square
        const clickedNumber = clickedSquare.innerText;

        // Use query selector to find the current empty square
        clickedSquare.classList.add("empty");
        emptySquare.classList.remove("empty");

        clickedSquare.innerHTML = '';

        emptySquare.textContent += clickedNumber;
      }
    });
  });
}
start();