script.js

const colorBox = document.querySelector('[data-testid="colorBox"]');
const gameStatus = document.querySelector('[data-testid="gameStatus"]');
const scoreDisplay = document.querySelector('[data-testid="score"]');
const newGameButton = document.querySelector('[data-testid="newGameButton"]');
const colorOptions = document.getElementById('color-options');

let score = 0;
let targetColor;

const colors = [
  'red', 'blue', 'green', 'yellow', 'magenta', 'purple',
];

// Select a random color as the target color
function getRandomColor() {
  return colors[Math.floor(Math.random() * colors.length)];
}

// Function to start a new game
function startNewGame() {
  targetColor = getRandomColor();
  colorBox.style.backgroundColor = targetColor;
  gameStatus.textContent = "";
  renderColorOptions();
}


  // Function to render color options
function renderColorOptions() {
  var colorOptions = document.getElementById('color-options');
  colorOptions.innerHTML = "";
  const options = [
    targetColor,
    ...Array(5)
      .fill()
      .map(() => getRandomColor()),
  ];
  options.sort(() => Math.random() - 0.5);

  options.forEach((color) => {
    const button = document.createElement("button");
    button.style.backgroundColor = color;    
    button.addEventListener("click", () => handleGuess(color));
    colorOptions.appendChild(button);
  });
}

// Function to handle user's guess
function handleGuess(guess) {
  if (guess === targetColor) {
    gameStatus.textContent = "Correct!";
    score++;
    scoreDisplay.textContent = score;
    startNewGame();
  } else {
    gameStatus.textContent = "Wrong! Try again.";
  }
}

// Event listener for the new game button
newGameButton.addEventListener('click', () => {
  score = 0; // Reset score
  scoreDisplay.textContent = score;
  startNewGame()
});

// Start the first game
startNewGame();