Skip to content

Commit 2722ebc

Browse files
PBJIPBJI
authored
Merge pull request #790 from amintai/feature/pokedex-amintai
Feature: Pokedex JS mini project added
2 parents 3b2d38d + 69d3091 commit 2722ebc

File tree

3 files changed

+192
-0
lines changed

3 files changed

+192
-0
lines changed

‎Pokedex/amintai/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>Document</title>
8+
<link rel="icon" href="index.jfif" type="image/icon">
9+
<link rel="stylesheet" href="style.css">
10+
11+
</head>
12+
<body>
13+
<h1> PokeDex </h1>
14+
15+
<div id="poke_container" class="poke-container">
16+
17+
</div>
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

‎Pokedex/amintai/script.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
const poke_container = document.getElementById('poke_container');
2+
const pokemons_number = 1000;
3+
const colors = {
4+
fire: '#FDDFDF',
5+
grass: '#DEFDE0',
6+
electric: '#FCF7DE',
7+
water: '#DEF3FD',
8+
ground: '#f4e7da',
9+
rock: '#d5d5d4',
10+
fairy: '#fceaff',
11+
poison: '#98d7a5',
12+
bug: '#f8d5a3',
13+
dragon: '#97b3e6',
14+
psychic: '#eaeda1',
15+
flying: '#F5F5F5',
16+
fighting: '#E6E0D4',
17+
normal: '#F5F5F5'
18+
};
19+
20+
const main_type = Object.keys(colors);
21+
22+
console.log(main_type);
23+
24+
const fetchPokemons = async () => {
25+
for(let i=1;i<=pokemons_number;i++){
26+
await getPokemon(i);
27+
}
28+
}
29+
30+
const getPokemon = async id => {
31+
const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
32+
const res = await fetch(url);
33+
const pokemon = await res.json();
34+
createPokemonCard(pokemon);
35+
}
36+
37+
38+
39+
function createPokemonCard(pokemon){
40+
const pokemonEl = document.createElement('div');
41+
pokemonEl.classList.add('pokemon');
42+
const poke_types = pokemon.types.map(el => el.type.name);
43+
const type = main_type.find(
44+
type => poke_types.indexOf(type)> -1
45+
);
46+
47+
const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
48+
// name = name.substring(0,name.indexOf('-'));
49+
50+
//const sm_name = name.slice(0,'name.lastIndexOf("-")');
51+
const color = colors[type];
52+
53+
pokemonEl.style.backgroundColor = color;
54+
const pokeInnerHtml = `
55+
<div class="img-container">
56+
<img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" alt="Sorry!"/>
57+
</div>`
58+
const info = `<div class = "info">
59+
<span class="number">#${pokemon.id.toString().padStart(3,'0')}
60+
</span>
61+
<h3 class="name">${name}</h3>
62+
<small class="type">Type: <span>${type}</span></small>
63+
</div>
64+
`;
65+
let abilities = pokemon.abilities.length == 0 ?
66+
`
67+
<h3 class="name">No Abilities</h3>
68+
`:
69+
`
70+
<h3 class ="name">Abilities</h3>
71+
`;
72+
pokemon.abilities.forEach((abi, ind)=>{
73+
// console.log(abi.ability.name.split()
74+
abilities += `<br/><small class="type">${ind + 1}${". "}
75+
<span>${abi.ability.name.split('-').map(val => val.charAt(0).toUpperCase() + val.slice(1)).join(' ')}
76+
</span></small>`
77+
})
78+
79+
pokemonEl.innerHTML = pokeInnerHtml + info;
80+
81+
poke_container.appendChild(pokemonEl);
82+
83+
pokemonEl.addEventListener('mouseenter', ()=>{
84+
pokemonEl.style.filter = 'brightness(110%)';
85+
pokemonEl.innerHTML = abilities;
86+
87+
})
88+
pokemonEl.addEventListener('mouseleave', ()=>{
89+
pokemonEl.style.filter = 'none';
90+
pokemonEl.innerHTML = pokeInnerHtml + info;
91+
})
92+
93+
}
94+
fetchPokemons();

‎Pokedex/amintai/style.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2+
@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');
3+
4+
*{
5+
box-sizing: border-box;
6+
}
7+
8+
body{
9+
background: #EFEFB8;
10+
background: linear-gradient(to right,#30E8BF, #FF8235);
11+
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
justify-content: center;
16+
font-family: 'Lato';
17+
margin: 0;
18+
19+
}
20+
h1{
21+
letter-spacing: 3px;
22+
}
23+
24+
.poke-container {
25+
display: flex;
26+
flex-wrap: wrap;
27+
align-items: space-between;
28+
justify-content: center;
29+
margin: 0 auto;
30+
max-width: 1200px;
31+
}
32+
33+
.pokemon {
34+
background-color: #eee;
35+
border-radius: 20px;
36+
box-shadow: 0 3px 15px rgba(100, 100 ,100 , 0.5);
37+
margin: 10px;
38+
padding:20px;
39+
text-align:center;
40+
transition:0.2s;
41+
cursor:pointer;
42+
width:160px;
43+
}
44+
.pokemon:hover{
45+
transform: scale(1.1);
46+
box-shadow: 5px 5px 15px rgba(0,0,0,1);
47+
48+
}
49+
.pokemon .img-container {
50+
background-color: rgba(255, 255, 255, 0.6);
51+
border-radius: 50px;
52+
height: 120px;
53+
width: 120px;
54+
text-align: center;
55+
}
56+
57+
.pokemon .img-container img{
58+
margin-top: 20px;
59+
max-width: 90px;
60+
}
61+
62+
.pokeomon .info {
63+
margin-top:20px;
64+
z-index:1;
65+
}
66+
67+
.pokemon .number {
68+
background-color: rgba(0,0,0,0.2);
69+
border-radius: 10px;
70+
font-size: 0.8em;
71+
padding: 5px 10px;
72+
73+
}
74+
75+
.pokemon .name {
76+
margin: 15px 0 7px;
77+
letter-spacing: 1px;
78+
}

0 commit comments

Comments
 (0)