Skip to content

Commit adb38b7

Browse files
author
Sonyl Nagale
committed
Pokemon
1 parent 962aa85 commit adb38b7

File tree

12 files changed

+454
-53
lines changed

12 files changed

+454
-53
lines changed

‎chapter-7/ajax/fonts/starjedi-webfont.woff‎

18.7 KB
Binary file not shown.

‎chapter-7/ajax/fonts/starjedi-webfont.woff2‎

14.5 KB
Binary file not shown.

‎chapter-7/ajax/images/124147.jpg‎

107 KB
Loading

‎chapter-7/ajax/index.html‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,31 @@
11
<!DOCTYPE html>
22
<html lang="en" dir="ltr">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>SWAPI Lab</title>
6-
</head>
7-
<body>
8-
<h1>Hello</h1>
9-
<div id="main">
10-
11-
</div>
12-
13-
<script src="main.js"></script>
14-
</body>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>SWAPI, Revisited</title>
7+
<link rel="stylesheet" type="text/css" href="style.css" />
8+
</head>
9+
10+
<body>
11+
12+
<h1>Star Wars Exploration</h1>
13+
14+
<div id="loader"></div>
15+
16+
<div id="people">
17+
<h2>People</h2>
18+
<select id="peopleSelector">
19+
20+
</select>
21+
<button class="go">Go</button>
22+
</div>
23+
24+
<div id="planet">
25+
<h2></h2>
26+
</div>
27+
28+
<script src="main.js"></script>
29+
</body>
30+
1531
</html>

‎chapter-7/ajax/main.js‎

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,50 @@
1-
let name = '',
2-
planet = '',
3-
films = [],
4-
filmNames = ''
5-
let hello = "Hello! My name is {name} and I'm from {planet}. I've been in {films} and I'm a Jedi."
1+
class SWAPI {
2+
constructor() {
3+
this.loader = document.querySelector('#loader')
4+
this.people = []
5+
}
66

7-
fetch('https://swapi.co/api/people/1/')
8-
.then((response) => {
9-
return response.json()
10-
})
11-
.then((json) => {
12-
name = json.name
13-
planet = json.homeworld
14-
films = json.films
15-
return json
16-
})
17-
.then((json) => {
18-
fetch(planet)
7+
fetchThis(url, arr, resolve, reject) {
8+
fetch(url)
199
.then((response) => {
2010
return response.json()
2111
})
22-
.then((json) => {
23-
planet = json.name
12+
.then((data) => {
13+
arr = [...arr, ...data.results]
14+
15+
if (data.next !== null) {
16+
this.fetchThis(data.next, arr, resolve, reject)
17+
} else {
18+
resolve(arr)
19+
}
2420
})
25-
.then(() => {
26-
const filmPromise = new Promise((resolve, reject) => {
27-
let counter = 0
28-
for (let i = 0; i < films.length; i++) {
29-
fetch(films[i])
30-
.then((response) => {
31-
return response.json()
32-
})
33-
.then((json) => {
34-
filmNames += json.title + ', '
35-
counter++
36-
if (counter === films.length) {
37-
resolve()
38-
}
39-
})
40-
}
21+
}
4122

42-
})
43-
.then(() => {
44-
hello = hello.replace('{name}', name).replace('{planet}', planet).replace('{films}', filmNames)
45-
document.querySelector('#main').innerHTML = hello
46-
})
23+
getPeople() {
24+
new Promise((resolve, reject) => {
25+
this.fetchThis('https://swapi.co/api/people', this.people, resolve, reject)
26+
})
27+
.then((response) => {
28+
this.people = response
29+
const peopleSelector = document.querySelector('#peopleSelector')
30+
this.people.forEach((person) => {
31+
const option = document.createElement('option')
32+
option.value = person.url
33+
option.innerHTML = person.name
34+
peopleSelector.appendChild(option)
35+
})
36+
this.toggleLoader()
37+
document.querySelector('#people').style.visibility = 'visible'
4738
})
48-
})
39+
}
40+
41+
toggleLoader() {
42+
if (this.loader.style.visibility === 'visible' || this.loader.style.visibility === '') {
43+
this.loader.style.visibility = 'hidden'
44+
} else {
45+
this.loader.style.visibility = 'visible'
46+
}
47+
}
48+
}
49+
50+
const s = new SWAPI().getPeople()

‎chapter-7/ajax/style.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@font-face {
2+
font-family: 'star_jediregular';
3+
src: url('fonts/starjedi-webfont.woff2') format('woff2'),
4+
url('fonts/starjedi-webfont.woff') format('woff');
5+
font-weight: normal;
6+
font-style: normal;
7+
}
8+
9+
body {
10+
background: #000 url('images/124147.jpg');
11+
color: #ccc;
12+
}
13+
14+
h1, h2 {
15+
font-family: 'star_jediregular', sans-serif;
16+
}
17+
18+
#loader {
19+
position: absolute;
20+
left: 50%;
21+
top: 50%;
22+
z-index: 1;
23+
width: 150px;
24+
height: 150px;
25+
margin: -75px 0 0 -75px;
26+
border: 16px solid #111;
27+
border-radius: 50%;
28+
border-top: 16px solid #ccc;
29+
width: 120px;
30+
height: 120px;
31+
-webkit-animation: spin 2s linear infinite;
32+
animation: spin 2s linear infinite;
33+
visibility: visible;
34+
}
35+
36+
@-webkit-keyframes spin {
37+
0% { -webkit-transform: rotate(0deg); }
38+
100% { -webkit-transform: rotate(360deg); }
39+
}
40+
41+
@keyframes spin {
42+
0% { transform: rotate(0deg); }
43+
100% { transform: rotate(360deg); }
44+
}
45+
46+
#people {
47+
visibility: hidden;
48+
}

‎chapter-7/pokeapi/fonts/pokemon_solid-webfont.woff‎

21 KB
Binary file not shown.

‎chapter-7/pokeapi/fonts/pokemon_solid-webfont.woff2‎

15.8 KB
Binary file not shown.

‎chapter-7/pokeapi/images/pokemon-2048x1152.jpg‎

2.06 MB
Loading

‎chapter-7/pokeapi/index.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Pokémon Battle!</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<h1>Pokémon Battle!</h1>
10+
11+
<div id="loader"></div>
12+
13+
<div id="result"><h2></h2></div>
14+
15+
<div id="Player1" class="player">
16+
<h2>Choose a Pokémon, Player 1!</h2>
17+
<select class="pokeSelector main">
18+
19+
</select>
20+
<button class="go">Go</button>
21+
22+
<div id="card1" class="card">
23+
<h3></h3>
24+
25+
<table>
26+
<tr>
27+
<td rowspan="2"><img src=""></td>
28+
<td>HP:<span class="hp"></span></td>
29+
</tr>
30+
<tr>
31+
<td>Moves:
32+
<button class="move1"></button>
33+
<button class="move2"></button>
34+
</td>
35+
</tr>
36+
</table>
37+
</div>
38+
</div>
39+
40+
41+
42+
43+
<div id="Player2" class="player">
44+
<h2>Choose a Pokémon, Player 2!</h2>
45+
<select class="pokeSelector clone">
46+
47+
</select>
48+
<button class="go">Go</button>
49+
50+
<div id="card2" class="card">
51+
<h3></h3>
52+
53+
<table>
54+
<tr>
55+
<td rowspan="2"><img src=""></td>
56+
<td>HP:<span class="hp"></span></td>
57+
</tr>
58+
<tr>
59+
<td>Moves:
60+
<button class="move1"></button>
61+
<button class="move2"></button>
62+
</td>
63+
</tr>
64+
</table>
65+
</div>
66+
</div>
67+
68+
69+
70+
71+
<script src="main.js"></script>
72+
</body>
73+
</html>

0 commit comments

Comments
 (0)