Merge pull request #203 from Gaurav0203Shetty/poke

PokeDex
shrey141102 · Jan 5, 2024 · 53a3928 · 53a3928
2 parents 029c261 + d8e179d
commit 53a3928
Show file tree

Hide file tree

Showing 8 changed files with 267 additions and 0 deletions.
diff --git a/PokeDex/.DS_Store b/PokeDex/.DS_Store
diff --git a/PokeDex/Images/pokeball.jpeg b/PokeDex/Images/pokeball.jpeg
diff --git a/PokeDex/Images/pokemon-bg.jpeg b/PokeDex/Images/pokemon-bg.jpeg
diff --git a/PokeDex/README.md b/PokeDex/README.md
@@ -0,0 +1,13 @@
+PokeDex
+Welcome to PokeDex, a simple web application that allows you to explore information about different Pokémon! This project utilizes HTML, CSS, and JavaScript to create a user-friendly interface for viewing Pokémon details.
+
+Features
+1)Pokemon Information Display: The main section of the application displays information about a selected Pokémon, including its image, types, and a brief description.
+2)Pokemon List: On the right side of the application, you can find a list of Pokémon. Click on any Pokémon in the list to view its details.
+3)Type Highlighting: Each Pokémon type is represented by a distinct color, making it easy to identify the types at a glance.
+
+Customization
+You can customize the background image by replacing the URL in the body CSS rule in the style.css file.
+
+API Integration
+This PokeDex fetches data from the PokeAPI, a comprehensive Pokémon database. The JavaScript code in script.js uses the API to retrieve information about each Pokémon.
diff --git a/PokeDex/index.html b/PokeDex/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PokeDex</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
+</head>
+<body>
+    <div id="content-box">
+        <div id="pokemon-info">
+            <img id="pokemon-img" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
+            <div id="pokemon-types">
+                <span class="type-box grass">GRASS</span><span class="type-box poison">POISON</span>
+            </div>
+            <div id="pokemon-description">
+            </div>
+        </div>
+        <div id="pokemon-list">
+        </div>
+    </div>
+</body>
+</html>
diff --git a/PokeDex/script.js b/PokeDex/script.js
@@ -0,0 +1,62 @@
+const pokemonCount = 500;
+var pokedex = {};
+
+window.onload = async function(){
+    getPokemon(1);
+    for(let i=1; i<=pokemonCount; i++){
+        await getPokemon(i);
+
+        let pokemon = document.createElement("div");
+        pokemon.id = i;
+        pokemon.innerText = i.toString() + ". " + pokedex[i]["name"].toUpperCase();
+        pokemon.classList.add("pokemon-name");
+        pokemon.addEventListener("click", updatePokemon);
+        document.getElementById("pokemon-list").append(pokemon);
+    }
+
+    document.getElementById("pokemon-description").innerText = pokedex[1]["desc"];
+
+    console.log(pokedex)
+}
+
+async function getPokemon(num){
+    let url = "https://pokeapi.co/api/v2/pokemon/" + num.toString();
+
+    let res = await fetch(url);
+    let pokemon = await res.json();
+
+    //console.log(pokemon)
+
+    let pokemonName = pokemon["name"];
+    let pokemonType = pokemon["types"];
+    let pokemonImg = pokemon["sprites"]["front_default"];
+
+    res = await fetch(pokemon["species"]["url"]);
+    let pokemonDesc = await res.json();
+
+    //console.log(pokemonDesc);
+
+    pokemonDesc = pokemonDesc["flavor_text_entries"][5]["flavor_text"]
+
+    pokedex[num] = {"name" : pokemonName, "img" : pokemonImg, "types" : pokemonType, "desc" : pokemonDesc}
+}
+
+function updatePokemon(){
+    document.getElementById("pokemon-img").src = pokedex[this.id]["img"];
+
+    let typesDiv = document.getElementById("pokemon-types");
+    while(typesDiv.firstChild){
+        typesDiv.firstChild.remove();
+    }
+
+    let types = pokedex[this.id]["types"];
+    for(let i=0; i<types.length; i++){
+        let type = document.createElement("span");
+        type.innerText = types[i]["type"]["name"].toUpperCase();
+        type.classList.add("type-box");
+        type.classList.add(types[i]["type"]["name"])
+        typesDiv.append(type);
+    }
+
+    document.getElementById("pokemon-description").innerText = pokedex[this.id]["desc"];
+}
diff --git a/PokeDex/style.css b/PokeDex/style.css
@@ -0,0 +1,163 @@
+body{
+    font-family: Arial, Helvetica, sans-serif;
+    background: url("./Images/pokemon-bg.jpeg") no-repeat;
+    background-size: cover;
+}
+
+#content-box{
+    width: 500px;
+    height: 500px;
+    border: 10px solid lightgray;
+    border-radius: 10px;
+
+    display: flex;
+    margin: 0 auto;
+    margin-top: 150px;
+
+    background: url("./Images/pokeball.jpeg") no-repeat;
+    background-size: cover;
+}
+
+#pokemon-info{
+    width: 250px;
+    height: 500px;
+    text-align: center;
+}
+
+#pokemon-list{
+    width: 250px;
+    height: 500px;
+    font-size: 18px;
+    overflow-y: auto;
+}
+
+.pokemon-name{
+    border: 1px solid black;
+    border-radius: 10px;
+    background-color: white;
+    margin: 5px;
+    padding: 5px;
+}
+
+#pokemon-info img{
+    width: 160px;
+    height: 160px;
+    border: 1px solid black;
+    border-radius: 10px;
+    margin-top: 20px;
+    background-color: white;
+}
+
+#pokemon-types{
+    margin-top: 10px;
+}
+
+.type-box{
+    padding: 3px;
+    margin: 5px;
+    border: 1px solid white;
+    border-radius: 10px;
+}
+
+.normal {
+    background-color: beige;
+    color: black;
+}
+
+.fire {
+    background-color: orange;
+    color: white;
+}
+
+.grass {
+    background-color: green;
+    color: white;
+}
+
+.water {
+    background-color: blue;
+    color: white;
+}
+
+.ice {
+    background-color: lightblue;
+    color: black;
+}
+
+.electric {
+    background-color: gold;
+    color: black;
+}
+
+.fighting {
+    background-color: darkred;
+    color: white;
+}
+
+.flying {
+    background-color: skyblue;
+    color: black;
+}
+
+.bug {
+    background-color: yellowgreen;
+    color: white;
+}
+
+.ghost {
+    background-color: purple;
+    color: white;
+}
+
+.rock {
+    background-color: sienna;
+    color: white;
+}
+
+.ground {
+    background-color: burlywood;
+    color: black;
+}
+
+.steel {
+    background-color: silver;
+    color: black;
+}
+
+.dark {
+    background-color: darkgray;
+    color: white;
+}
+
+.psychic {
+    background-color: palevioletred;
+    color: white;
+}
+
+.fairy {
+    background-color: pink;
+    color: black;
+}
+
+.dragon {
+    background-color: teal;
+    color: white;
+}
+
+.poison {
+    background-color: darkviolet;
+    color: white;
+}
+
+#pokemon-description{
+    width: 230px;
+    height: 100px;
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 10px;
+    margin: 0 auto;
+    margin-top: 10px;
+    padding: 2px;
+    font-size: 18px;
+    overflow-y: auto;
+}
diff --git a/script.js b/script.js
@@ -373,6 +373,11 @@ const projects = [
   link: "AudioAnalyser/index.html", 
   image: "https://github.com/shrey141102/Javascript-projects/assets/114330097/1f68df5e-b745-43a7-a63a-d55211694848" 
   },
+  { title: "PokeDex",
+  discription: "Welcome to PokeDex, a simple web application that allows you to explore information about different Pokémon! This project utilizes HTML, CSS, and JavaScript to create a user-friendly interface for viewing Pokémon details.", 
+  link: "PokeDex/index.html", 
+  image: "https://i.pinimg.com/736x/3d/a9/07/3da907557c4a47e9bc0df33bc2bb3bdd.jpg" 
+  },
   { title: "Factorial Calculator",
   discription: "This project can calculate factorial of the very large numbers.", 
   link: "Factorial-Calculator/index.html",