Skip to content

Commit 2fd33c8

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1603 from Tejas-Sands/tejas
Added new project: PokeDex
2 parents b8866df + de83698 commit 2fd33c8

8 files changed

Lines changed: 474 additions & 0 deletions

File tree

‎Projects/PokeDex/PokeDex.css‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
body {
2+
font-family: "PT sans","Cormorant Garamond",Crimson-Text;
3+
background:url("./photos/wallpaperflare.com_wallpaper (8).jpg") no-repeat;
4+
background-size:cover ;
5+
/* display: flex; */
6+
}
7+
8+
#content-box{
9+
display:flex;
10+
width: 600px;
11+
height: 500px;
12+
border: 10px solid rgb(28, 47, 53);
13+
border-radius: 6px;
14+
background-color: rgba(171, 4, 12, 0) ;
15+
background: url("./photos/peakpx.jpg") no-repeat;
16+
background-size: cover;
17+
margin: 200px;
18+
margin-top: 100px;
19+
box-shadow: 6px 6px 4px rgba(0, 0, 0,0.3);
20+
21+
}
22+
23+
#pokemonInfo{
24+
width: 400px;
25+
height: 500px;
26+
overflow-y: auto;
27+
28+
}
29+
30+
#pokedescp{
31+
width: 230px;
32+
border: 2px solid rgb(90, 90, 90);
33+
border-radius: 6px;
34+
height: 150px;
35+
margin-top: 7px;
36+
margin-inline-start: 5px;
37+
margin-inline-end: 5px;
38+
background-color: honeydew;
39+
40+
}
41+
42+
43+
#pokemonDiscription{
44+
width: 200px;
45+
height:500px;
46+
background-color: rgb(12, 93, 66);
47+
}
48+
49+
.search-container{
50+
display:flex;
51+
width: 500px;
52+
height: 40px;
53+
border-radius: 20px ;
54+
background-color:rgba(2, 22, 71, 0.512) ;
55+
margin: 20px;
56+
margin-top: 20px;
57+
box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.679);
58+
}
59+
60+
#search-input{
61+
width: 430px;
62+
background-color: rgba(169, 169, 169, 0.379);
63+
border-radius: 20px ;
64+
margin: 2px;
65+
}
66+
67+
input::placeholder {
68+
color: rgb(3, 0, 0);
69+
font-style: italic;
70+
padding: 20px;
71+
margin-left: 20px;
72+
}
73+
74+
#allNames{
75+
/* display:flex; */
76+
justify-content: flex-start;
77+
flex-direction: column;
78+
overflow-y: auto;
79+
padding: 2px;
80+
width: 300px;
81+
height: 500px;
82+
border: 10px solid rgba(2, 2, 59, 0.434);
83+
border-radius: 6px;
84+
background-color: rgba(21, 73, 152, 0.174) ;
85+
86+
margin: 900px;
87+
margin-top: -740px;
88+
box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.442);
89+
90+
}
91+
92+
93+
.pokeName{
94+
/* display: flex; */
95+
width: 300px;
96+
padding: 5px;
97+
border: 2px solid rgba(0, 80, 199, 0.132);
98+
border-radius: 2px;
99+
background-color: rgba(111, 111, 111, 0.525);
100+
font-size: medium;
101+
102+
}
103+
104+
105+
#pokemonInfo img{
106+
width: 350px;
107+
height:390px ;
108+
margin: 15px;
109+
border: 1px solid black;
110+
border-radius: 10px;
111+
display:flexbox;
112+
background-color: rgba(176, 176, 174, 0.408);
113+
}
114+
115+
#pokemonType{
116+
margin-top: 10px;
117+
margin-left: 20px;
118+
font-family: 'Verdana', Courier, monospace;
119+
font-weight: 100;
120+
}
121+
122+
.type-box{
123+
padding: 10px;
124+
margin-left: 15px;
125+
border: 2px solid darkgray;
126+
border-radius: 7px;
127+
}
128+
129+
.normal{
130+
background-color: wheat;
131+
color: black;
132+
}
133+
134+
.fire{
135+
background-color: orange;
136+
color: white;
137+
}
138+
139+
.grass{
140+
background-color: green;
141+
color: white;
142+
}
143+
144+
.water{
145+
background-color: blue;
146+
color: white;
147+
}
148+
149+
.flying{
150+
background-color: skyblue;
151+
color: black;
152+
}
153+
154+
.bug{
155+
background-color: yellowgreen;
156+
color: white;
157+
}
158+
159+
.ghost{
160+
background-color: purple;
161+
color: white;
162+
}
163+
164+
.rock{
165+
background-color: sienna;
166+
color: white;
167+
}
168+
169+
.ground{
170+
background-color: burlywood;
171+
color:black;
172+
}
173+
174+
.steel{
175+
background-color: silver;
176+
color: black;
177+
}
178+
179+
.poison{
180+
background-color: #301934;
181+
color: white;
182+
}
183+
184+
.psychic{
185+
background-color: rgb(255, 52, 120);
186+
color: white;
187+
}
188+
189+
.fairy{
190+
background-color: pink;
191+
color: black;
192+
}
193+
194+
.dragon{
195+
background-color: rgb(47, 23, 135);
196+
color: white;
197+
}
198+
199+
.electric{
200+
background-color: rgb(255, 255, 0);
201+
color: white;
202+
}
203+
204+
.ice{
205+
background-color: lightblue;
206+
color: black;
207+
}
208+
209+
.dark{
210+
background-color: #301934;
211+
color: white;
212+
}
213+
214+
.fighting{
215+
background-color: rgb(183, 27, 0);
216+
color: white;
217+
}
218+
219+
220+
.search-container {
221+
position: relative;
222+
width: 320px;
223+
}
224+
225+
#search-results {
226+
list-style-type: none;
227+
overflow-y: auto;
228+
padding: 0;
229+
margin: 40px;
230+
position: absolute;
231+
width: 100%;
232+
background-color: #b1b1b182;
233+
border: 1px solid #3b3b3b85;
234+
display: flexbox;
235+
border-radius: 10px;
236+
}
237+
238+
#search-results li {
239+
padding: 14px;
240+
border-bottom: 1px solid #dddddd47;
241+
}
242+
243+
#search-results li:last-child {
244+
border-bottom: none;
245+
}
246+
247+
#search-results li:hover {
248+
background-color: #787777;
249+
}
250+
251+
#github{
252+
display: flex;
253+
justify-content: center;
254+
padding-left: 5px;
255+
padding-right: 5px;
256+
width: 180px;
257+
height: 50px;
258+
background-color: #ffffff8f;
259+
border: 2px solid black;
260+
border-radius: 55px;
261+
background-repeat: no-repeat;
262+
background-size: contain;
263+
margin-bottom: 70px;
264+
margin-left: 750px;
265+
}
266+
#github img{
267+
padding:6px;
268+
margin-left: 7px;
269+
width: 155px;
270+
height: 37px;
271+
}

‎Projects/PokeDex/PokeDex.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
<title>PokeDex</title>
7+
<link rel="stylesheet" href="PokeDex.css">
8+
<script src="PokeDex.js"></script>
9+
10+
</head>
11+
<body>
12+
<div ><img src="/photos/pokemon.png"></div>
13+
14+
<div class="search-container">
15+
<input type="text" id="search-input" placeholder="catch 'em all" >
16+
17+
<ul id="search-results"></ul>
18+
</div>
19+
<div id="content-box">
20+
21+
22+
<div id="pokemonInfo">
23+
<img id="pokemonImg" src="https://github.com/PokeAPI/sprites/blob/master/sprites/pokemon/1.png">
24+
<div id="pokemonType">
25+
<span class="type-box grass" >GRASS</span><span class="type-box poison">POISON</span>
26+
</div>
27+
</div>
28+
<div id="pokedescp"></div>
29+
</div>
30+
<div id="allNames"></div>
31+
<script src="search.js"></script>
32+
<a href = "https://github.com/Tejas-Sands"> <div id="github"><img src="/photos/gith.png" alt="Image"></div></a>
33+
</body>
34+
</html>

‎Projects/PokeDex/PokeDex.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
2+
const pokecount = 151;
3+
var pokedex = {};
4+
5+
window.onload = async function(){
6+
for (let i = 1; i <= pokecount; i++) {
7+
await getPokemon(i);
8+
let pokemon = document.createElement("div");
9+
10+
pokemon.id = i;
11+
pokemon.innerText = i.toString() + ". " + pokedex[i]["name"].toUpperCase();
12+
pokemon.classList.add("pokeName");
13+
pokemon.addEventListener("click", updatePokemon);
14+
document.getElementById("allNames").append(pokemon);
15+
}
16+
17+
}
18+
19+
async function getPokemon(num){
20+
let url = "https://pokeapi.co/api/v2/pokemon/" + num.toString();
21+
22+
let res = await fetch(url);
23+
let pokemon = await res.json();
24+
console.log(pokemon);
25+
26+
let pokeName = pokemon["name"];
27+
let pokeType = pokemon["types"];
28+
let pokeImg = pokemon["sprites"]["other"]["dream_world"]["front_default"];
29+
30+
res = await fetch(pokemon["species"]["url"]);
31+
let pokeDesc = await res.json();
32+
33+
//console.log(pokeDesc);
34+
pokeDesc = pokeDesc["flavor_text_entries"][12]["flavor_text"]
35+
36+
pokedex[num] = {"name": pokeName, "img": pokeImg, "types": pokeType, "desc" : pokeDesc}
37+
}
38+
39+
function updatePokemon(){
40+
document.getElementById("pokemonImg").src = pokedex[this.id]["img"]
41+
42+
let typesDiv = document.getElementById("pokemonType");
43+
while(typesDiv.firstChild){
44+
typesDiv.firstChild.remove();
45+
}
46+
47+
let types = pokedex[this.id]["types"];
48+
for(let i = 0 ; i < types.length ; i++){
49+
let type = document.createElement("span");
50+
type.innerText = types[i]["type"]["name"].toUpperCase();
51+
type.classList.add("type-box");
52+
type.classList.add(types[i]["type"]["name"]);
53+
typesDiv.append(type);
54+
}
55+
56+
document.getElementById("pokedescp").innerText = pokedex[this.id]["desc"];
57+
}
58+
59+
60+
61+
62+
63+
64+
65+
66+
67+
68+
69+

‎Projects/PokeDex/photos/gith.png‎

49.9 KB
Loading

‎Projects/PokeDex/photos/peakpx.jpg‎

124 KB
Loading

‎Projects/PokeDex/photos/pokemon.png‎

62.4 KB
Loading

‎Projects/PokeDex/photos/wallpaperflare.com_wallpaper (8).jpg‎

254 KB
Loading

0 commit comments

Comments
 (0)