I Spy Game: HTML, CSS & JavaScript Code with Hidden Objects

The provided code for an I Spy game looks good but needs additional CSS styles for the .item and .object classes. Here's a complete example including the necessary styles:

HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>I Spy Game</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>I Spy Game</h1>
	<div class="game-container">
		<div class="game-board">
			<!-- Game board with hidden objects -->
		</div>
		<div class="game-items">
			<!-- List of items to find -->
		</div>
	</div>
	<script src="app.js"></script>
</body>
</html>

CSS Style:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

h1 {
	text-align: center;
	margin-top: 20px;
	font-size: 36px;
}

.game-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

.game-board {
	width: 400px;
	height: 400px;
	border: 5px solid black;
	background-color: #ccc;
	position: relative;
	margin-right: 20px;
	margin-bottom: 20px;
}

.game-items {
	width: 200px;
	height: 400px;
	border: 5px solid black;
	background-color: #eee;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.item {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: bold;
}

.object {
  width: 40px;
  height: 40px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
}

JavaScript Code:

// List of objects to find
const items = [
	'Car',
	'Tree',
	'Dog',
	'Cat',
	'House',
	'Sun',
	'Flower',
	'Star',
	'Chair',
	'Book',
	'Clock',
	'Shoe'
];

// Shuffle items array
items.sort(() => Math.random() - 0.5);

// Add items to game board
for (let i = 0; i < items.length; i++) {
	const item = document.createElement("div");
	item.classList.add("item");
	item.innerText = items[i];
	document.querySelector(".game-items").appendChild(item);
}

// Add hidden objects to game board
for (let i = 0; i < 10; i++) {
	const object = document.createElement("div");
	object.classList.add("object");
	object.style.top = Math.floor(Math.random() * 350) + "px";
	object.style.left = Math.floor(Math.random() * 350) + "px";
	document.querySelector(".game-board").appendChild(object);
}

// Click event to find objects
let found = 0;
document.querySelectorAll(".object").forEach(object => {
	object.addEventListener("click", () => {
		object.style.visibility = "hidden";
		found++;
		if (found === 10) {
			alert("Congratulations! You found all the objects!");
		}
	});
});

This code will create a basic I Spy game with a list of objects to find and hidden objects on the game board. The .item styles will make the objects in the list bigger and bolder, while the .object styles will make the hidden objects red and round. Players can click on the hidden objects to find them, and an alert message will appear when they've found all 10 objects.

I Spy Game: HTML, CSS & JavaScript Code with Hidden Objects