Merge pull request #1390 from Ketanop321/pokedex/gamepokedex

added pokedex game
iamrahulmahato · Oct 19, 2024 · aa9f543 · aa9f543
2 parents e3abaa6 + 14336d5
commit aa9f543
Show file tree

Hide file tree

Showing 5 changed files with 221 additions and 0 deletions.
diff --git a/projects/POKE-DEX/README.md b/projects/POKE-DEX/README.md
@@ -0,0 +1,28 @@
+# **Pokedex Game** 
+
+<p>Pokédex - Bulbapedia, the community-driven Pokémon encyclopedia
+The Pokédex (Japanese: ポケモン図鑑 illustrated Pokémon encyclopedia) is an invaluable tool to Trainers in the Pokémon world. It gives information about all Pokémon in the world that are contained in its database, although it differs in how it acquires and presents information over the different media.</p>
+
+<br>
+
+## **Description 📃**
+This game provides various pokemons to choose from and score accordingly.
+- 
+## **Functionalities 🎮** 
+- Easy to play
+- Scoring system so that you can compare points with your friends.
+- Responsive design for most of the monitors.
+<br>
+
+## **How to play? 🕹️**
+- Your aim is to enter the name of the pokemon showing on the device screen. 
+- You can use prev and next options to see next pokemon on the screen.
+
+<br>
+
+
+## **Screenshots 📸**
+
+<h3>Pokedox Game</h3>
+<img width="1440" alt="Screenshot 2023-07-22 at 12 53 26 PM" src="https://github.com/kunjgit/GameZone/assets/102572480/7f0a07c3-2c15-45d2-b2bd-71c4e6d19041">
+
diff --git a/projects/POKE-DEX/css/style.css b/projects/POKE-DEX/css/style.css
@@ -0,0 +1,95 @@
+@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700;800&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Oxanium', cursive;
+}
+
+body {
+  text-align: center;
+  background: linear-gradient(to bottom, #6ab7f5, #fff);
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+main {
+  display: inline-block;
+  margin-top: 2%;
+  padding: 15px;
+  position: relative;
+}
+
+.pokedex {
+  width: 100%;
+  max-width: 425px;
+}
+
+.pokemon_image {
+  position: absolute;
+  bottom: 55%;
+  left: 50%;
+  transform: translate(-63%, 20%);
+  height: 18%;
+}
+
+.pokemon_data {
+  position: absolute;
+  font-weight: 600;
+  color: #aaa;
+  top: 54.5%;
+  right: 27%;
+  font-size: clamp(8px, 5vw, 25px);
+}
+
+.pokemon_name {
+  color: #3a444d;
+  text-transform: capitalize;
+}
+
+.form {
+  position: absolute;
+  width: 65%;
+  top: 65%;
+  left: 13.5%;
+}
+
+.input_search {
+  width: 100%;
+  padding: 4%;
+  outline: none;
+  border: 2px solid #333;
+  border-radius: 5px;
+  font-weight: 600;
+  color: #3a444d;
+  font-size: clamp(8px, 5vw, 1rem);
+  box-shadow: -3px 4px 0 #888, -5px 7px 0 #333
+}
+
+.buttons {
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  width: 65%;
+  transform: translate(-57%, 0);
+  display: flex;
+  gap: 20px;
+}
+
+.button {
+  width: 50%;
+  padding: 4%;
+  border: 2px solid #000;
+  border-radius: 5px;
+  font-size: clamp(8px, 5vw, 1rem);
+  font-weight: 600;
+  color: white;
+  background-color: #444;
+  box-shadow: -2px 3px 0 #222, -4px 6px 0 #000;
+}
+
+.button:active {
+  box-shadow: inset -4px 4px 0 #222;
+  font-size: 0.9rem;
+}
diff --git a/projects/POKE-DEX/img/pokedex.png b/projects/POKE-DEX/img/pokedex.png
diff --git a/projects/POKE-DEX/index.html b/projects/POKE-DEX/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- Links -->
+  <link rel="icon" href="./favicons/favicon-16x16.png">
+  <link rel="stylesheet" href="./css/style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+  <!-- Main JS -->
+  <script defer src="./js/script.js"></script>
+
+  <title>Pokédex</title>
+</head>
+<body>
+  <div style="text-align: center;
+  margin-top: 20px;
+  font-size: 30px; "><a href="#"><i style="color:black;" class="fas fa-home home-icon"></i></a></div>
+  <main>
+    <img src="#" alt="pokemon" class="pokemon_image">
+
+    <h1 class="pokemon_data">
+      <span class="pokemon_number"></span> -
+      <span class="pokemon_name"></span>
+    </h1>
+
+    <form class="form">
+      <input
+        type="search"
+        class="input_search"
+        placeholder="Name or Number"
+        required
+      />
+    </form>
+
+    <div class="buttons">
+      <button class="button btn-prev">Prev &lt;</button>
+      <button class="button btn-next">Next &gt;</button>
+    </div>
+
+    <img src="./img/pokedex.png" alt="pokedex" class="pokedex">
+  </main>
+
+</body>
+</html>
diff --git a/projects/POKE-DEX/js/script.js b/projects/POKE-DEX/js/script.js
@@ -0,0 +1,52 @@
+//initial variables
+const PokemonName= document.querySelector('.pokemon_name');
+const PokemonNumber= document.querySelector('.pokemon_number');
+const PokemonImage= document.querySelector('.pokemon_image');
+const form = document.querySelector('.form');
+const input = document.querySelector('.input_search');
+const buttonPrev = document.querySelector('.btn-prev');
+const buttonNext = document.querySelector('.btn-next');
+
+let searchPokemon=1;
+//bring the data from the pokeApi
+const fetchPokemon = async (pokemon) => {
+    const APIresponse =  await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`);
+    if (APIresponse.status ===200){
+    const data= await APIresponse.json();
+    return data;}
+}
+
+const renderPokemon = async (pokemon)=>{
+//waiting for the response of the api
+    PokemonName.innerHTML = 'carregando...';
+    PokemonNumber.innerHTML = '';
+
+    const data = await fetchPokemon(pokemon);
+//select the info that we want from the api
+    if(data){
+    PokemonName.innerHTML = data.name;
+    PokemonNumber.innerHTML = data.id;
+    PokemonImage.src = data['sprites']['versions']['generation-v']['black-white']['animated']['front_default'];
+    input.value='';
+    } else{
+        // PokemonImage.style.display='none';
+        PokemonName.innerHTML = 'não encontrado :c';
+        PokemonNumber='';
+    }
+}
+//search the name of the pokemon from the search bar
+form.addEventListener('submit',(event) =>{
+    event.preventDefault();
+    renderPokemon(input.value.toLowerCase());
+});
+//button previous pokemon
+buttonPrev.addEventListener('click',(event) =>{
+   alert('prev clicked')
+});
+//button next pokemon
+buttonNext.addEventListener('click',(event) =>{
+    alert('next clicked')
+ });
+
+renderPokemon(searchPokemon);
+