Pokedex

commit 4bff0c5f1385420ce89cfb44fa54865275e1a5b1 Author: MrEidam Date: Mon Aug 12 00:38:58 2024 +0200 Pokedex diff --git a/index.html b/index.html new file mode 100644 index 0000000..fb8b520 --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + + Pokedex + + +

+ +

GRASSPOISON

+ +

+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..42621da --- /dev/null +++ b/main.js @@ -0,0 +1,80 @@ +const pokemonCount = 151; //? https://pokeapi.co <- API +var pokedex = {}; + +window.onload = async () => { + for(let i = 1; i<=pokemonCount; i++){ + await getPokemon(i); //! ♥ 815 ♥ + + let pokemon = document.createElement("div"); + pokemon.id = i; + pokemon.innerText = `${i}. ${pokedex[i]["name"].toUpperCase()}`; + pokemon.classList.add("pokemon-name"); + pokemon.addEventListener("click", updatePokemon); + document.getElementById("pokemon-list").append(pokemon); + } + + document.getElementById("pokemon-name").innerText = pokedex[1]["name"]; + document.getElementById("pokemon-img").src = pokedex[1]["img"]; + document.getElementById('pokemon-description').innerText = pokedex[1]['desc']; + console.log(pokedex); +} + +async function getPokemon(num){ + let url = `https://pokeapi.co/api/v2/pokemon/${num}` + + let res = await fetch(url); + let pokemon = await res.json(); + + 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(); + + pokemonDesc = pokemonDesc["flavor_text_entries"].find(entry => entry.language.name === "en")?.flavor_text || "No description available."; + + pokedex[num] = { + "name": pokemonName, + "img": pokemonImg, + "types": pokemonType, + "desc": pokemonDesc, + } + console.log('Done!'); +} + +function updatePokemon(){ + document.getElementById("pokemon-name").innerText = pokedex[this.id]["name"]; + document.getElementById("pokemon-img").src = pokedex[this.id]["img"]; + + let typesDiv = document.getElementById("pokemon-types"); + typesDiv.innerHTML = ""; + + let types = pokedex[this.id]["types"]; + for(let i=0; i -1){ + listItem.style.display = ""; + }else{ + listItem.style.display = "none"; + } + } +} \ No newline at end of file diff --git a/pokeball.jpg b/pokeball.jpg new file mode 100644 index 0000000..7ad00cc Binary files /dev/null and b/pokeball.jpg differ diff --git a/pokemon-bg.jpg b/pokemon-bg.jpg new file mode 100644 index 0000000..8c64c6c Binary files /dev/null and b/pokemon-bg.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..f90ae3a --- /dev/null +++ b/style.css @@ -0,0 +1,196 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: url('./pokemon-bg.jpg') no-repeat; + background-size: cover; + background-position: center; + color: #fff; +} + +#content-box{ + width: 520px; + height: 520px; + border: 10px solid #ccc; + border-radius: 10px; + display: flex; + background: url('./pokeball.jpg') no-repeat; + background-size: cover; + filter: drop-shadow(5px 5px 10px #333); +} + +#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 solid #000; + border-radius: 10px; + background: #fff; + margin: 5px; + padding: 5px; + color: #000; +} + +#pokemon-name{ + margin-top: 15px; + text-transform: capitalize; +} + +#pokemon-info img{ + width: 162px; + height: 162px; + border: 1px solid #000; + border-radius: 10px; + margin-top: 20px; + background: #fff; + filter: drop-shadow(5px 5px 10px #333); +} + +#pokemon-types{ + margin-top: 10px; +} + +.type-box{ + padding: 3px; + margin: 5px; + border: 1px solid #fff; + border-radius: 10px; +} + +article{ + display: flex; + flex-direction: column; + align-items: center; +} + +#pokemon-description{ + width: 232px; + max-height: 152px; + background: #fff; + border: 1px solid #000; + border-radius: 10px; + color: #000; + + margin: 0 auto; + margin-top: 10px; + padding: 2px; + font-size: 18px; + overflow-y: auto; + filter: drop-shadow(5px 5px 10px #333); +} + +#search{ + min-width: 230px; + height: 30px; + padding-left: .5rem; + margin: 10px 15px; + border-radius: 5px; + border: 1px solid #000; +} + +.normal { + background-color: beige; + color: #000; +} + +.fire { + background-color: orange; + color: #fff; +} + +.grass { + background-color: green; + color: #fff; +} + +.water { + background-color: blue; + color: #fff; +} + +.ice { + background-color: lightblue; + color: #000; +} + +.electric { + background-color: gold; + color: #000; +} + +.fighting { + background-color: darkred; + color: #fff; +} + +.flying { + background-color: skyblue; + color: #000; +} + +.bug { + background-color: yellowgreen; + color: #fff; +} + +.ghost { + background-color: purple; + color: #fff; +} + +.rock { + background-color: sienna; + color: #fff; +} + +.ground { + background-color: burlywood; + color: #000; +} + +.steel { + background-color: silver; + color: #000; +} + +.dark { + background-color: darkgray; + color: #fff; +} + +.psychic { + background-color: palevioletred; + color: #fff; +} + +.fairy { + background-color: pink; + color: #000; +} + +.dragon { + background-color: teal; + color: #fff; +} + +.poison { + background-color: darkviolet; + color: #fff; +} \ No newline at end of file