<body>
  <div class="container">
    <header>
      <h1>Connect 4</h1>
    </header>
    <div class="board">
      <!-- grid -->
    </div>

    <button id="reset-btn">Reset Game</button>
  </div>

  <div class="message">
    <p class="status"></p>
    <p class="winner"></p>
  </div>
</body>
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
body {
  font-family: Arial, sans-serif;
  background-color: #e0e0e0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: "DM Mono", monospace;
}


h1 {
  font-size: 4.5rem;
  color: #000;
  margin-bottom: 20px;
}

.status {
  width: 60px;
  height: 60px;
  /* background-color: #ffcc00; */
  border-radius: 50%;
  box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.3);
  margin:  5px;
}

.message .winner {
  font-size: 2.5rem;
  font-weight: bold;
  color: #000;
  margin: 0;
}

.board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  background-color: #0066cc;
  padding: 20px;
  border-radius: 10px;
  border: 10px solid #0055aa;
  margin-bottom: 20px;
}

.cell {
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  
}

.red {
  background-color: #ff4136;
  box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.3);
}

.yellow {
  background-color: #ffdc00;
  box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.3);
}

.yellow-selected {
  background-color: #ffdc00;
}

.red-selected {
  background-color: #ff4136;
}

#reset-btn {
  padding: 10px 20px;
  background-color: #060606;
  color: white;
  border: none;
  margin-top: 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}

#reset-btn:hover {
  background-color: #383938;
}


document.addEventListener("DOMContentLoaded", function () {
  const board = document.querySelector(".board");
  const status = document.querySelector(".status");
  const resetBtn = document.getElementById("reset-btn");
  const winner = document.querySelector(".winner");
  let currentPlayer = "red";
  let isGameOver = false;
  let rows = 6;
  let cols = 7;
  let gameBoard = Array.from({ length: rows }, () => Array(cols).fill(null));
  
  resetBtn.addEventListener("click", function () {
    isGameOver = false;
    gameBoard = Array.from({ length: rows }, () => Array(cols).fill(null));
    board.querySelectorAll(".cell").forEach((cell) => {
      cell.classList.remove("red", "yellow");
    });
    currentPlayer = "red";
    status.classList.add(`${currentPlayer}-selected`);
  });

  function createGameBoard() {
    
    status.classList.add(`${currentPlayer}-selected`);
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        const disc = document.createElement("div");
        disc.classList.add("cell");
        disc.setAttribute("data-col", c);
        disc.setAttribute("data-row", r);
        board.appendChild(disc);
      
      }
    }
  }

  createGameBoard();

  board.addEventListener("click", function (e) {
    status.classList.remove(`${currentPlayer}-selected`);
    let col = parseInt(e.target.getAttribute("data-col"));
    
    if (e.target.classList.contains("cell") && !isGameOver) {
      for (let row = rows - 1; row >= 0; row--) {
        let clickedCell = board.querySelector(
          `[data-row="${row}"][data-col="${col}"]`
        );
        if (
          !clickedCell.classList.contains("red") &&
          !clickedCell.classList.contains("yellow")
        ) {
          clickedCell.classList.add(currentPlayer);
          gameBoard[row][col] = currentPlayer;
  
          
          if (checkForWin()) {
            status.style.display = "block";
            status.style.display = "none";

            winner.innerText = `${currentPlayer.toUpperCase()} wins!`;
            isGameOver = true;
            return; 
          }
  
        
          currentPlayer = currentPlayer === "red" ? "yellow" : "red";
          
          status.classList.add(`${currentPlayer}-selected`);
          break;
        }
      }
    }
  });
  

  function checkForWin() {
   
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c <= cols - 4; c++) {
        const player = gameBoard[r][c];
        if (player) {
          if (
            player === gameBoard[r][c + 1] &&
            player === gameBoard[r][c + 2] &&
            player === gameBoard[r][c + 3]
          ) {
            // console.log("Win horizontally");
            return true;
          }
        }
      }
    }
  
   
    for (let c = 0; c < cols; c++) {
      for (let r = 0; r <= rows - 4; r++) {
        const player = gameBoard[r][c];
        if (player) {
          if (
            player === gameBoard[r + 1][c] &&
            player === gameBoard[r + 2][c] &&
            player === gameBoard[r + 3][c]
          ) {
            // console.log("Win vertically");
            return true;
          }
        }
      }
    }
 
    for (let r = 0; r <= rows - 4; r++) {
      for (let c = 0; c <= cols - 4; c++) {
        const player = gameBoard[r][c];
        if (player) {
          
          if (
            player === gameBoard[r + 1][c + 1] &&
            player === gameBoard[r + 2][c + 2] &&
            player === gameBoard[r + 3][c + 3]
          ) {
           
            return true;
          }
        }
      }
    }
  
    
    for (let r = 3; r < rows; r++) {
      for (let c = 0; c <= cols - 4; c++) {
        const player = gameBoard[r][c];
        if (player) {
        
          if (
            player === gameBoard[r - 1][c + 1] &&
            player === gameBoard[r - 2][c + 2] &&
            player === gameBoard[r - 3][c + 3]
          ) {
          
            return true;
          }
        }
      }
    }

  
    return false;
  }
  

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.