Skip to content

Commit 6182a9a

Browse files
author
Hugues Signamarcheix
committed
add poke-list to the left
1 parent fe96ba7 commit 6182a9a

File tree

7 files changed

+123
-38
lines changed

7 files changed

+123
-38
lines changed

‎index.html

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,17 @@
1010
<h1>Javascript workers in action</h1>
1111
<p>Click on the pokeball and see which Pokemon you catched !</p>
1212
<div class="container">
13-
<button id="refresh" class="btn"><span></span></button>
14-
<div id="text-placeholder" class="is-empty">
15-
<img class="sprite" src="">
16-
<div>Name : <span class="name"></span></div>
17-
<div>Types : <span class="types"></span></div>
18-
<div>Height : <span class="height"></span> ft</div>
19-
<div>Weight : <span class="weight"></span> lbs</div>
20-
</div>
13+
<ul class="poke-list"></ul>
14+
<div>
15+
<button id="refresh" class="btn"><span></span></button>
16+
<div id="text-placeholder" class="is-empty">
17+
<img class="sprite" src="">
18+
<div>Name : <span class="name"></span></div>
19+
<div>Types : <span class="types"></span></div>
20+
<div>Height : <span class="height"></span> ft</div>
21+
<div>Weight : <span class="weight"></span> lbs</div>
22+
</div>
23+
</div>
2124
<div class="loader">
2225
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
2326
</div>

‎javascript/dist/worker-bundled.js

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,25 @@
22
const axios = require('axios');
33

44
const apiMaxId = 150;
5-
const baseUrl = "https://pokeapi.co/api/v2/pokemon/"
5+
const baseUrl = "https://pokeapi.co/api/v2/pokemon"
6+
67
onmessage = (e) => {
7-
let id = (Math.floor(Math.random() * Math.floor(apiMaxId))) + 1
8-
axios.get(baseUrl + id)
9-
.then(response => (postMessage(response.data)))
8+
if(e.data == 'fetch') {
9+
let id = (Math.floor(Math.random() * Math.floor(apiMaxId))) + 1
10+
axios.get(baseUrl + '/' + id)
11+
.then(response => (postMessage(
12+
{
13+
todo: 'fetch',
14+
data: response.data
15+
})))
16+
} else if(e.data == 'init') {
17+
axios.get(baseUrl + '?limit=151')
18+
.then(response => (postMessage(
19+
{
20+
todo: 'init',
21+
data: response.data
22+
})))
23+
}
1024
}
1125
},{"axios":2}],2:[function(require,module,exports){
1226
module.exports = require('./lib/axios');

‎javascript/script.js

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,27 +28,42 @@ document.addEventListener("DOMContentLoaded",() => {
2828
let container = document.getElementsByClassName("container")[0];
2929
let card = document.getElementById("text-placeholder");
3030

31+
worker.postMessage('init');
32+
3133
btnRefresh.addEventListener("click",() => {
3234
container.classList.add('is-loading');
33-
worker.postMessage('go');
35+
worker.postMessage('fetch');
3436
});
3537

3638
worker.onmessage = function(e) {
37-
let jsonFetched = e.data;
38-
for(let fieldName of fields) {
39-
document.getElementsByClassName(fieldName)[0].innerHTML = jsonFetched[fieldName];
40-
}
41-
document.getElementsByClassName('types')[0].innerHTML = jsonFetched['types'].map(x => x.type.name)
42-
if(jsonFetched['types'].length > 1) {
43-
card.style.borderTopColor = typesColor[jsonFetched['types'][0].type.name];
44-
card.style.borderLeftColor = typesColor[jsonFetched['types'][0].type.name];
45-
card.style.borderBottomColor = typesColor[jsonFetched['types'][1].type.name];
46-
card.style.borderRightColor = typesColor[jsonFetched['types'][1].type.name];
47-
} else {
48-
card.style.borderColor = typesColor[jsonFetched['types'][0].type.name];
39+
if(e.data.todo == 'fetch') {
40+
let jsonFetched = e.data.data;
41+
for(let fieldName of fields) {
42+
document.getElementsByClassName(fieldName)[0].innerHTML = jsonFetched[fieldName];
43+
}
44+
document.getElementsByClassName('types')[0].innerHTML = jsonFetched['types'].map(x => x.type.name)
45+
if(jsonFetched['types'].length > 1) {
46+
card.style.borderTopColor = typesColor[jsonFetched['types'][0].type.name];
47+
card.style.borderLeftColor = typesColor[jsonFetched['types'][0].type.name];
48+
card.style.borderBottomColor = typesColor[jsonFetched['types'][1].type.name];
49+
card.style.borderRightColor = typesColor[jsonFetched['types'][1].type.name];
50+
} else {
51+
card.style.borderColor = typesColor[jsonFetched['types'][0].type.name];
52+
}
53+
document.getElementsByClassName('sprite')[0].src = jsonFetched['sprites'].front_default;
54+
container.classList.remove('is-loading');
55+
} else if(e.data.todo == 'init') {
56+
let pokeArray = e.data.data.results;
57+
let pokeList = document.getElementsByClassName("poke-list")[0];
58+
console.log(pokeArray)
59+
for(let poke of pokeArray) {
60+
let li = document.createElement('li');
61+
pokeList.appendChild(li);
62+
li.dataset['name'] = poke.name;
63+
li.classList.add('empty','poke-badge');
64+
console.log(poke.name);
65+
}
4966
}
50-
document.getElementsByClassName('sprite')[0].src = jsonFetched['sprites'].front_default;
51-
container.classList.remove('is-loading');
5267
}
5368
}
5469
})

‎javascript/worker.js

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
11
const axios = require('axios');
22

33
const apiMaxId = 150;
4-
const baseUrl = "https://pokeapi.co/api/v2/pokemon/"
4+
const baseUrl = "https://pokeapi.co/api/v2/pokemon"
55

66
onmessage = (e) => {
7-
let id = (Math.floor(Math.random() * Math.floor(apiMaxId))) + 1
8-
axios.get(baseUrl + id)
9-
.then(response => (postMessage(response.data)))
7+
if(e.data == 'fetch') {
8+
let id = (Math.floor(Math.random() * Math.floor(apiMaxId))) + 1
9+
axios.get(baseUrl + '/' + id)
10+
.then(response => (postMessage(
11+
{
12+
todo: 'fetch',
13+
data: response.data
14+
})))
15+
} else if(e.data == 'init') {
16+
axios.get(baseUrl + '?limit=151')
17+
.then(response => (postMessage(
18+
{
19+
todo: 'init',
20+
data: response.data
21+
})))
22+
}
1023
}

‎scss/pages/index.scss

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,14 @@ h1,p {
66
.container {
77
position: relative;
88
display: flex;
9-
flex-direction: column;
10-
align-items: center;
9+
//flex-direction: column;
10+
//align-items: center;
11+
> div {
12+
width: 30%;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
}
1117
#refresh {
1218
position: relative;
1319
padding: 20px;
@@ -53,13 +59,12 @@ h1,p {
5359
flex-direction: column;
5460
align-items: center;
5561
background-color: white;
56-
padding: 20px 20px;
62+
padding: 20px 30px;
5763
line-height: 20px;
5864
letter-spacing: 1px;
5965
font-family: sans-serif;
6066
border-radius: 5px;
6167
border: solid 10px black;
62-
width: 15%;
6368
> div {
6469
font-weight: bold;
6570
span { font-weight: normal; }
@@ -74,4 +79,20 @@ h1,p {
7479
&:not(.is-loading) {
7580
.loader { display: none; }
7681
}
82+
.poke-list {
83+
list-style-type: none;
84+
width: 32.3%;
85+
height: 500px;
86+
overflow: scroll;
87+
display: flex;
88+
flex-wrap: wrap;
89+
.poke-badge {
90+
width: 55px;
91+
height: 55px;
92+
border-radius: 50%;
93+
background-color: lightgray;
94+
margin-bottom: 10px;
95+
margin-right: 10px;
96+
}
97+
}
7798
}

‎style.css

Lines changed: 21 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)