Merge pull request #548 from uditbaliyan/pokemon_guessing

Pokemon guessing
Ayushparikh-code · Oct 27, 2024 · 9d90c2d · 9d90c2d
2 parents 0a0da4b + 78cab5a
commit 9d90c2d
Showing 7 changed files with 278 additions and 0 deletions.
diff --git a/Pokemon_Guessing/Images/Screenshot from 2024-10-02 04-31-31.png b/Pokemon_Guessing/Images/Screenshot from 2024-10-02 04-31-31.png
diff --git a/Pokemon_Guessing/Images/Screenshot from 2024-10-02 04-36-09.png b/Pokemon_Guessing/Images/Screenshot from 2024-10-02 04-36-09.png
diff --git a/Pokemon_Guessing/Images/abc.txt b/Pokemon_Guessing/Images/abc.txt
@@ -0,0 +1 @@
+hello
diff --git a/Pokemon_Guessing/index.html b/Pokemon_Guessing/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pokémon Guessing Game</title>
+<link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div class="pokemon-card" id="pokemonCard">
+      <img class="pokemon-image" id="pokemonImage" src="" alt="Pokémon Image" />
+      <div class="pokemon-info">
+        <div class="pokemon-name" id="pokemonName">Pokémon Name</div>
+        <div class="pokemon-type" id="pokemonType">Type: --</div>
+        <div class="pokemon-id" id="pokemonId">ID: --</div>
+      </div>
+    </div>
+
+    <input type="text" id="guessInput" placeholder="Guess the Pokémon" />
+    <button type="submit" onclick="checkGuess()">Submit Guess</button>
+
+    <div class="result-message" id="resultMessage"></div>
+
+
+    <div class="loader" id="loadingSpinner">
+      <div class="inner one"></div>
+      <div class="inner two"></div>
+      <div class="inner three"></div>
+    </div>
+
+  </body>
+  <script src="script.js"></script>
+</html> 
diff --git a/Pokemon_Guessing/readme.md b/Pokemon_Guessing/readme.md
@@ -0,0 +1,28 @@
+# Pokémon Guessing Game
+
+## Project Description
+
+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. 
+
+## Stack:
+- [x] HTML
+- [x] CSS
+- [x] JavaScript
+
+## Features
+- Random Pokémon selection
+- Blurred image guessing mechanic
+- Success and failure feedback
+- Automatic Pokémon change after correct guess
+
+## How to Play
+1. Enter your guess in the input box.
+2. Submit your guess.
+3. If correct, the image will be revealed; if not, try again!
+
+## Installation
+Simply open the `index.html` file in your browser.
+
+![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)
+
+![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)
diff --git a/Pokemon_Guessing/script.js b/Pokemon_Guessing/script.js
@@ -0,0 +1,67 @@
+
+let correctName = "";
+let randomInt = getRandomInteger(1, 100);
+fetchPokemonData(randomInt);
+
+// JavaScript function to fetch Pokémon data from the PokéAPI
+async function fetchPokemonData(pokemon) {
+  const loadingSpinner = document.getElementById("loadingSpinner");
+  const pokemonImage = document.getElementById("pokemonImage");
+
+  // Show the loading spinner and hide the image while fetching
+  loadingSpinner.style.display = "block";
+  pokemonImage.style.display = "none";
+
+  const response = await fetch(
+    `https://pokeapi.co/api/v2/pokemon/${pokemon}`
+  );
+  const data = await response.json();
+
+  // Set Pokémon data and hide the loading spinner
+  document.getElementById("pokemonImage").src = data.sprites.front_default;
+  correctName = data.name.toLowerCase();
+
+  // Hide the loading spinner and show the image
+  loadingSpinner.style.display = "none";
+  pokemonImage.style.display = "block";
+}
+
+// Function to get random integer for Pokémon ID
+function getRandomInteger(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function getPokemon() {
+  // Fetch data for a new random Pokémon and reset the blur effect
+  let randomInt = getRandomInteger(1, 100);
+  fetchPokemonData(randomInt);
+  resultMessage.textContent=" ";
+  // Re-apply the blur effect for the new Pokémon
+  document.getElementById("pokemonImage").style.filter = "blur(5px)";
+}
+
+// Function to check the player's guess
+function checkGuess() {
+  const guessInput = document.getElementById("guessInput");
+  const guess = guessInput.value.toLowerCase();
+  const resultMessage = document.getElementById("resultMessage");
+  const pokemonImage = document.getElementById("pokemonImage");
+
+  if (guess === correctName) {
+    // If the guess is correct, reveal the Pokémon and show a success message
+    pokemonImage.style.filter = "none";
+    resultMessage.textContent = `Correct! It's ${correctName.charAt(0).toUpperCase() + correctName.slice(1)}!`;
+    resultMessage.style.color = "green";
+
+    // Clear the input box after correct guess
+    guessInput.value = "";
+
+
+    // Load a new Pokémon after a short delay
+    setTimeout(getPokemon, 2000);
+  } else {
+    // If the guess is incorrect, display a message to try again
+    resultMessage.textContent = "Incorrect! Try again.";
+    resultMessage.style.color = "red";
+  }
+}
diff --git a/Pokemon_Guessing/style.css b/Pokemon_Guessing/style.css
@@ -0,0 +1,149 @@
+
+
+
+
+  body {
+    font-family: "Arial", sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+    flex-direction: column;
+    background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);
+  }
+
+  .pokemon-card {
+    width: 300px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    text-align: center;
+    transition: transform 0.2s ease-in-out;
+    position: relative;
+    margin-bottom: 20px; /* Add space below the card */
+  }
+
+  .pokemon-card:hover {
+    transform: scale(1.05);
+  }
+
+  .pokemon-image {
+    width: 100%;
+    height: 200px; /* Set a fixed height */
+    background-color: #f8f8f8;
+    transition: filter 0.3s ease-in-out;
+    filter: blur(5px);
+    object-fit: contain; /* Ensure the image fits within the container */
+  }
+
+  .pokemon-info {
+    padding: 20px;
+  }
+
+  .pokemon-name,
+  .pokemon-type,
+  .pokemon-id {
+    display: none;
+  }
+
+  .result-message {
+    font-size: 20px;
+    margin-top: 15px;
+  }
+
+  input {
+    margin-top: 20px;
+    padding: 10px;
+    font-size: 16px;
+    width: 200px;
+  }
+
+  button {
+    margin-top: 10px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    background-color: #4caf50;
+    color: white;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+  }
+
+  button:hover {
+    background-color: #45a049;
+  }
+
+  /* Loading Spinner */
+  .loader {
+    position: absolute;
+    top: 100px; /* Adjust this value to center the loader vertically within the image area */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 64px;
+    height: 64px;
+    display: none;
+  }
+
+  .inner {
+    position: absolute;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  .inner.one {
+    left: 0%;
+    top: 0%;
+    animation: rotate-one 1s linear infinite;
+    border-bottom: 3px solid #efeffa;
+  }
+
+  .inner.two {
+    right: 0%;
+    top: 0%;
+    animation: rotate-two 1s linear infinite;
+    border-right: 3px solid #efeffa;
+  }
+
+  .inner.three {
+    right: 0%;
+    bottom: 0%;
+    animation: rotate-three 1s linear infinite;
+    border-top: 3px solid #efeffa;
+  }
+
+  @keyframes rotate-one {
+    0% {
+      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+    }
+    100% {
+      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+    }
+  }
+
+  @keyframes rotate-two {
+    0% {
+      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+    }
+    100% {
+      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+    }
+  }
+
+  @keyframes rotate-three {
+    0% {
+      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+    }
+    100% {
+      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+    }
+  }
+
+
+
+
+