Skip to content

Commit 9d90c2d

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #548 from uditbaliyan/pokemon_guessing
Pokemon guessing
2 parents 0a0da4b + 78cab5a commit 9d90c2d

File tree

7 files changed

+278
-0
lines changed

7 files changed

+278
-0
lines changed

‎Pokemon_Guessing/Images/Screenshot from 2024-10-02 04-31-31.png‎

78.3 KB
Loading

‎Pokemon_Guessing/Images/Screenshot from 2024-10-02 04-36-09.png‎

90 KB
Loading

‎Pokemon_Guessing/Images/abc.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
hello

‎Pokemon_Guessing/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Pokémon Guessing Game</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="pokemon-card" id="pokemonCard">
11+
<img class="pokemon-image" id="pokemonImage" src="" alt="Pokémon Image" />
12+
<div class="pokemon-info">
13+
<div class="pokemon-name" id="pokemonName">Pokémon Name</div>
14+
<div class="pokemon-type" id="pokemonType">Type: --</div>
15+
<div class="pokemon-id" id="pokemonId">ID: --</div>
16+
</div>
17+
</div>
18+
19+
<input type="text" id="guessInput" placeholder="Guess the Pokémon" />
20+
<button type="submit" onclick="checkGuess()">Submit Guess</button>
21+
22+
<div class="result-message" id="resultMessage"></div>
23+
24+
25+
<div class="loader" id="loadingSpinner">
26+
<div class="inner one"></div>
27+
<div class="inner two"></div>
28+
<div class="inner three"></div>
29+
</div>
30+
31+
</body>
32+
<script src="script.js"></script>
33+
</html>

‎Pokemon_Guessing/readme.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Pokémon Guessing Game
2+
3+
## Project Description
4+
5+
A fun and interactive guessing game where players try to guess the name of a randomly selected Pokémon from the first 100 Pokémon. The image of the Pokémon is blurred, and players must enter their guess. If they guess correctly, the image is revealed, and a new Pokémon appears after a short delay.
6+
7+
## Stack:
8+
- [x] HTML
9+
- [x] CSS
10+
- [x] JavaScript
11+
12+
## Features
13+
- Random Pokémon selection
14+
- Blurred image guessing mechanic
15+
- Success and failure feedback
16+
- Automatic Pokémon change after correct guess
17+
18+
## How to Play
19+
1. Enter your guess in the input box.
20+
2. Submit your guess.
21+
3. If correct, the image will be revealed; if not, try again!
22+
23+
## Installation
24+
Simply open the `index.html` file in your browser.
25+
26+
![Pokémon Game Screenshot](https://github.com/uditbaliyan/Web-dev-mini-projects/blob/pokemon_guessing/Pokemon_Guessing/Images/Screenshot%20from%202024-10-02%2004-31-31.png)
27+
28+
![Pokémon Guessing Game Screenshot](https://github.com/uditbaliyan/Web-dev-mini-projects/blob/pokemon_guessing/Pokemon_Guessing/Images/Screenshot%20from%202024-10-02%2004-36-09.png)

‎Pokemon_Guessing/script.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
2+
let correctName = "";
3+
let randomInt = getRandomInteger(1, 100);
4+
fetchPokemonData(randomInt);
5+
6+
// JavaScript function to fetch Pokémon data from the PokéAPI
7+
async function fetchPokemonData(pokemon) {
8+
const loadingSpinner = document.getElementById("loadingSpinner");
9+
const pokemonImage = document.getElementById("pokemonImage");
10+
11+
// Show the loading spinner and hide the image while fetching
12+
loadingSpinner.style.display = "block";
13+
pokemonImage.style.display = "none";
14+
15+
const response = await fetch(
16+
`https://pokeapi.co/api/v2/pokemon/${pokemon}`
17+
);
18+
const data = await response.json();
19+
20+
// Set Pokémon data and hide the loading spinner
21+
document.getElementById("pokemonImage").src = data.sprites.front_default;
22+
correctName = data.name.toLowerCase();
23+
24+
// Hide the loading spinner and show the image
25+
loadingSpinner.style.display = "none";
26+
pokemonImage.style.display = "block";
27+
}
28+
29+
// Function to get random integer for Pokémon ID
30+
function getRandomInteger(min, max) {
31+
return Math.floor(Math.random() * (max - min + 1)) + min;
32+
}
33+
34+
function getPokemon() {
35+
// Fetch data for a new random Pokémon and reset the blur effect
36+
let randomInt = getRandomInteger(1, 100);
37+
fetchPokemonData(randomInt);
38+
resultMessage.textContent=" ";
39+
// Re-apply the blur effect for the new Pokémon
40+
document.getElementById("pokemonImage").style.filter = "blur(5px)";
41+
}
42+
43+
// Function to check the player's guess
44+
function checkGuess() {
45+
const guessInput = document.getElementById("guessInput");
46+
const guess = guessInput.value.toLowerCase();
47+
const resultMessage = document.getElementById("resultMessage");
48+
const pokemonImage = document.getElementById("pokemonImage");
49+
50+
if (guess === correctName) {
51+
// If the guess is correct, reveal the Pokémon and show a success message
52+
pokemonImage.style.filter = "none";
53+
resultMessage.textContent = `Correct! It's ${correctName.charAt(0).toUpperCase() + correctName.slice(1)}!`;
54+
resultMessage.style.color = "green";
55+
56+
// Clear the input box after correct guess
57+
guessInput.value = "";
58+
59+
60+
// Load a new Pokémon after a short delay
61+
setTimeout(getPokemon, 2000);
62+
} else {
63+
// If the guess is incorrect, display a message to try again
64+
resultMessage.textContent = "Incorrect! Try again.";
65+
resultMessage.style.color = "red";
66+
}
67+
}

‎Pokemon_Guessing/style.css‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
2+
3+
4+
5+
body {
6+
font-family: "Arial", sans-serif;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
height: 100vh;
11+
background-color: #f0f0f0;
12+
flex-direction: column;
13+
background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);
14+
}
15+
16+
.pokemon-card {
17+
width: 300px;
18+
background-color: white;
19+
border-radius: 10px;
20+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
21+
overflow: hidden;
22+
text-align: center;
23+
transition: transform 0.2s ease-in-out;
24+
position: relative;
25+
margin-bottom: 20px; /* Add space below the card */
26+
}
27+
28+
.pokemon-card:hover {
29+
transform: scale(1.05);
30+
}
31+
32+
.pokemon-image {
33+
width: 100%;
34+
height: 200px; /* Set a fixed height */
35+
background-color: #f8f8f8;
36+
transition: filter 0.3s ease-in-out;
37+
filter: blur(5px);
38+
object-fit: contain; /* Ensure the image fits within the container */
39+
}
40+
41+
.pokemon-info {
42+
padding: 20px;
43+
}
44+
45+
.pokemon-name,
46+
.pokemon-type,
47+
.pokemon-id {
48+
display: none;
49+
}
50+
51+
.result-message {
52+
font-size: 20px;
53+
margin-top: 15px;
54+
}
55+
56+
input {
57+
margin-top: 20px;
58+
padding: 10px;
59+
font-size: 16px;
60+
width: 200px;
61+
}
62+
63+
button {
64+
margin-top: 10px;
65+
padding: 10px 20px;
66+
font-size: 16px;
67+
cursor: pointer;
68+
border: none;
69+
background-color: #4caf50;
70+
color: white;
71+
border-radius: 5px;
72+
transition: background-color 0.3s ease;
73+
}
74+
75+
button:hover {
76+
background-color: #45a049;
77+
}
78+
79+
/* Loading Spinner */
80+
.loader {
81+
position: absolute;
82+
top: 100px; /* Adjust this value to center the loader vertically within the image area */
83+
left: 50%;
84+
transform: translateX(-50%);
85+
width: 64px;
86+
height: 64px;
87+
display: none;
88+
}
89+
90+
.inner {
91+
position: absolute;
92+
box-sizing: border-box;
93+
width: 100%;
94+
height: 100%;
95+
border-radius: 50%;
96+
}
97+
98+
.inner.one {
99+
left: 0%;
100+
top: 0%;
101+
animation: rotate-one 1s linear infinite;
102+
border-bottom: 3px solid #efeffa;
103+
}
104+
105+
.inner.two {
106+
right: 0%;
107+
top: 0%;
108+
animation: rotate-two 1s linear infinite;
109+
border-right: 3px solid #efeffa;
110+
}
111+
112+
.inner.three {
113+
right: 0%;
114+
bottom: 0%;
115+
animation: rotate-three 1s linear infinite;
116+
border-top: 3px solid #efeffa;
117+
}
118+
119+
@keyframes rotate-one {
120+
0% {
121+
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
122+
}
123+
100% {
124+
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
125+
}
126+
}
127+
128+
@keyframes rotate-two {
129+
0% {
130+
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
131+
}
132+
100% {
133+
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
134+
}
135+
}
136+
137+
@keyframes rotate-three {
138+
0% {
139+
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
140+
}
141+
100% {
142+
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
143+
}
144+
}
145+
146+
147+
148+
149+

0 commit comments

Comments
 (0)