kunjgit · killerraj369 · Aug 10, 2023 · Aug 10, 2023 · Aug 10, 2023 · Aug 10, 2023
diff --git a/Games/Pokemon_Generator/README.md b/Games/Pokemon_Generator/README.md
@@ -0,0 +1,30 @@
+# **Pokemon Generator** 
+
+---
+
+<br>
+
+## **Description 📃**
+- This is a Pokemon Game which generates random Pokemon using External API.
+- Click on the button to get new Pokemons that are waiting for you.
+
+## **functionalities 🎮**
+- Uses External API.
+- Generate New Pokemon with their corresponding names.
+
+
+## **How to play? 🕹️**
+Click button to generate new Pokemons
+
+
+
+## **Screenshots 📸**
+![image](https://github.com/killerraj369/GameZone/assets/87773889/f72397bb-cdf8-4367-a29c-d8129c706e75)
+![image](https://github.com/killerraj369/GameZone/assets/87773889/8e4b2fff-0e8e-49a4-9c42-b3a0010d218c)
+![image](https://github.com/killerraj369/GameZone/assets/87773889/59681fba-f184-43c8-9c24-6bb873731ec6)
+
+
+<br>
+
+<br>
+
diff --git a/Games/Pokemon_Generator/image.png b/Games/Pokemon_Generator/image.png
diff --git a/Games/Pokemon_Generator/index.html b/Games/Pokemon_Generator/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PokeGenerator</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <div>
+        <div class="navbar">
+            <heading>
+                <p><h1>RANDOM POKEMON GENERATOR</h1></p>
+            </heading>
+        </div>
+
+        <div class="vitrina" id="vitrina">
+            <!-- Tarjeta will be inserted here -->
+        </div>
+    </div>
+</body>
+<script src="script.js"></script>
+<!-- <script>
+    let contenedor;
+    const total_pokemons = 500;
+
+    window.onload = inicio;
+
+    function aleatorio(min, max) { // min and max included 
+        return Math.floor(Math.random() * (max - min + 1) + min)
+    }
+
+    function inicio() {
+        contenedor = document.getElementById("vitrina");
+        pintarVitrina(); // Initially paint the vitrina
+        window.addEventListener("click", pintarVitrina);
+    }
+
+    function pintarVitrina() {
+        traerDatos(aleatorio(1, total_pokemons));
+    }
+
+    function traerDatos(id) {
+        fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
+            .then(response => response.json())
+            .then(function(data) {
+                let nombre = data.name;
+                let url = data.sprites.other.dream_world.front_default;
+                if (nombre && url) {
+                    imprimirTarjeta(nombre, url);
+                }
+            });
+    }
+
+    function imprimirTarjeta(nombre, url) {
+        let template = `<div class="tarjeta">
+          <img src="${url}" alt="${nombre}">
+            <br>
+            <label>${nombre}</label> <br>
+            <button onclick="pintarVitrina()">Click to Change</button>
+        </div>`;
+        contenedor.innerHTML = template;
+    }
+</script> -->
+</html>
diff --git a/Games/Pokemon_Generator/script.js b/Games/Pokemon_Generator/script.js
@@ -0,0 +1,51 @@
+//https://pokeapi.co/api/v2/pokemon/5
+let contenedor;
+const total_pokemons = 500;
+
+window.onload = inicio;
+
+function aleatorio(min, max) { // min and max included 
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+function inicio()
+{
+  contenedor = document.getElementById("vitrina");
+  window.addEventListener("click",pintarVitrina);
+}
+
+function pintarVitrina(evento){
+  contenedor.innerHTML = "";
+  traerDatos(aleatorio(1,total_pokemons));
+//   traerDatos(aleatorio(1,total_pokemons));
+//   traerDatos(aleatorio(1,total_pokemons));
+//   traerDatos(aleatorio(1,total_pokemons));
+//   traerDatos(aleatorio(1,total_pokemons));
+}
+
+function traerDatos(id){
+  fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
+  .then(response => response.json())
+  .then(function(data){
+    let nombre = data.name;
+    let url = data.sprites.other.dream_world.front_default;
+    if(nombre && url)
+    {
+        imprimirTarjeta(nombre,url);
+    }
+  });
+}
+
+function imprimirTarjeta(nombre,url)
+{
+  let template = `<div class="tarjeta">
+  <img src="${url}" alt="" >
+    <br>
+    <label for="">
+      ${nombre}
+    </label> <br>
+    <button >Click to Change</button>
+  </div>`;
+  contenedor.innerHTML = template;
+  console.log(contendor)
+}
diff --git a/Games/Pokemon_Generator/style.css b/Games/Pokemon_Generator/style.css
@@ -0,0 +1,58 @@
+
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f0f0;
+            /* background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQ9_cWrVaiJ4B_zUKM81BjI0HhTzUPfJdhmKidEC8G4xq0fGXzeZfFRqcbWZXW8Pr_NTg&usqp=CAU); */
+            background-repeat: no-repeat;
+            background-size:contain;
+            margin: 0;
+            padding: 0;
+        }
+
+        .navbar {
+            background-color: #f0afaf;
+            color: white;
+            text-align: center;
+            padding: 10px;
+        }
+
+        .vitrina {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 80vh;
+        }
+
+        .tarjeta {
+            background-color: #fff;
+            border-radius: 10px;
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+            text-align: center;
+            padding: 20px;
+        }
+
+        .tarjeta img {
+            max-width: 80%;
+            height: auto;
+        }
+
+        .tarjeta label {
+            display: block;
+            margin-top: 10px;
+        }
+
+        .tarjeta button {
+            background-color: #ff6f61;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.2s;
+        }
+
+        .tarjeta button:hover {
+            background-color: #ff3d35;
+            transform: scale(1.05);
+        }
+
diff --git a/README.md b/README.md
@@ -491,6 +491,7 @@ This repository also provides one such platforms where contributers come over an
 | 379 | [numeral-whiz](https://github.com/Ishan-77/GameZone/tree/main/Games/numeral-whiz)|
 | 380 | [candy_match](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Match_Saga)|
 | 381 | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road)|
+| 382 | [Pokemon_Generator](https://github.com/killerraj369/GameZone/tree/main/Games/Pokemon_Generator)|
 
  </center>
 

diff --git a/assets/images/Pokemon_Generator.png b/assets/images/Pokemon_Generator.png