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