diff --git a/Js-Games/Pokemon_Generator/README.md b/Js-Games/Pokemon_Generator/README.md new file mode 100644 index 0000000000..2ad7a881e6 --- /dev/null +++ b/Js-Games/Pokemon_Generator/README.md @@ -0,0 +1,31 @@ +# **Pokemon Generator** + +--- + +
+ +## **Description 📃** +1.) This is a Pokemon Game which generates random Pokemon using External API. +2.) Click on the button to get new Pokemons that are waiting for you. +- + +## **functionalities 🎮** +1.) Uses External API. +2.) Generate New Pokemon with their corresponding names. + +- +
+ +## **How to play? 🕹ī¸** +Click button to generate new Pokemons +- + +
+ +## **Screenshots 📸** + +
+ +
+ +## **Working video 📹** diff --git a/Js-Games/Pokemon_Generator/image.png b/Js-Games/Pokemon_Generator/image.png new file mode 100644 index 0000000000..2a5954e250 Binary files /dev/null and b/Js-Games/Pokemon_Generator/image.png differ diff --git a/Js-Games/Pokemon_Generator/index.html b/Js-Games/Pokemon_Generator/index.html new file mode 100644 index 0000000000..016fd8a59a --- /dev/null +++ b/Js-Games/Pokemon_Generator/index.html @@ -0,0 +1,65 @@ + + + + + + PokeGenerator + + + +
+
+ +

RANDOM POKEMON GENERATOR

+ +
+ +
+ +
+
+ + + + diff --git a/Js-Games/Pokemon_Generator/script.js b/Js-Games/Pokemon_Generator/script.js new file mode 100644 index 0000000000..9ac966eefa --- /dev/null +++ b/Js-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 = `
+ +
+
+ +
`; + contenedor.innerHTML = template; + console.log(contendor) +} \ No newline at end of file diff --git a/Js-Games/Pokemon_Generator/style.css b/Js-Games/Pokemon_Generator/style.css new file mode 100644 index 0000000000..54a78f41a4 --- /dev/null +++ b/Js-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); + } + \ No newline at end of file