Project Requirements: Simple Battleship Game

Objective:

Create a simple battleship game where the player interacts with a 3x3 grid to find the hidden "battleship." The game will use basic HTML, CSS, and JavaScript to generate the board and determine the winning square. The player receives feedback by changing the color of the selected squares to red or green using class styling.

Project Overview:

The game consists of a 3x3 grid created using <div> elements.
A random square is selected as the "battleship" when the game starts.
Players click on squares to guess where the battleship is hidden.
Correct guesses turn the square green; incorrect guesses turn the square red.

Key Features:

Grid Creation:
- Create a 3x3 grid using <div> elements in HTML.
- Each square should be styled to form a cohesive board (e.g., evenly spaced, uniform size).
Random Battleship Location:
- Use JavaScript to randomly select one of the nine squares as the correct location of the battleship.
- Use JavaScript’s Math.random() function to generate the correct square’s index.
User Interaction:
- Allow players to click on any square to make a guess.
- When clicked, the square’s appearance should change based on whether the guess is correct or not:
  - Correct Guess: The square turns green using a pre-defined CSS class.
  - Incorrect Guess: The square turns red using a different CSS class.
Styling Changes Using Classnames:
- Utilize CSS classes to change the background color of squares when they are selected:
  - Use a .correct class for green (correct guess).
  - Use an .incorrect class for red (incorrect guess).

Technical Requirements:

Technologies:
- Frontend: HTML, CSS, JavaScript.
- No libraries required: Use vanilla JavaScript and basic CSS.
Board Setup:
- Create a 3x3 grid using nine <div> elements.
- Apply basic CSS to style the grid to look like a game board (e.g., borders, sizing).
JavaScript Logic:
- Generate a random index between 0 and 8 to determine the location of the battleship.
- Add event listeners to each grid square to detect clicks.
- Change the square’s appearance based on whether the guess is correct or incorrect.
Styling Requirements:
- Default State: All squares should have a neutral appearance (e.g., light gray).
- Correct Guess: The square should turn green with a .correct class.
- Incorrect Guess: The square should turn red with an .incorrect class.
- Use CSS transitions or simple animations to make the color change more engaging (optional).