Pokedex
This commit is contained in:
24
index.html
Normal file
24
index.html
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<title>Pokedex</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="content-box">
|
||||||
|
<div id="pokemon-info">
|
||||||
|
<h1 id="pokemon-name"></h1>
|
||||||
|
<img src="" alt="" id="pokemon-img">
|
||||||
|
<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>
|
||||||
|
<article>
|
||||||
|
<input type="text" id="search" onkeyup="search()" placeholder="Search.." title="Type in a category">
|
||||||
|
<div id="pokemon-list"></div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
80
main.js
Normal file
80
main.js
Normal file
@@ -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<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'];
|
||||||
|
}
|
||||||
|
|
||||||
|
let pokemonSearch = document.getElementById("search");
|
||||||
|
let pokemonList = document.getElementById('pokemon-list');
|
||||||
|
let list;
|
||||||
|
|
||||||
|
function search(){
|
||||||
|
let filter = pokemonSearch.value.toUpperCase();
|
||||||
|
list = document.getElementsByClassName("pokemon-name");
|
||||||
|
for(let i = 0; i < list.length; i++){
|
||||||
|
let listItem = list[i];
|
||||||
|
if(listItem.innerHTML.toUpperCase().indexOf(filter) > -1){
|
||||||
|
listItem.style.display = "";
|
||||||
|
}else{
|
||||||
|
listItem.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
pokeball.jpg
Normal file
BIN
pokeball.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
pokemon-bg.jpg
Normal file
BIN
pokemon-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
196
style.css
Normal file
196
style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user