Skip to content

Commit 6fb7b12

Browse files
author
Hugues Signamarcheix
committed
js logic is cleaner
1 parent 7720d39 commit 6fb7b12

File tree

5 files changed

+113
-103
lines changed

5 files changed

+113
-103
lines changed

‎javascript/script.js

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,14 @@ const typesColor = {
1919
'steel': '#B7B7CE',
2020
'fairy': '#D685AD',
2121
}
22+
const container = document.getElementsByClassName("container")[0];
23+
const btnRefresh = document.getElementById("refresh");
24+
const card = document.getElementById("text-placeholder");
25+
2226

2327
document.addEventListener("DOMContentLoaded",() => {
2428
if (window.Worker) {
2529
let worker = new Worker('./javascript/dist/worker-bundled.js');
26-
27-
let btnRefresh = document.getElementById("refresh");
28-
let container = document.getElementsByClassName("container")[0];
29-
let card = document.getElementById("text-placeholder");
30-
3130
worker.postMessage('init');
3231

3332
btnRefresh.addEventListener("click",() => {
@@ -37,46 +36,57 @@ document.addEventListener("DOMContentLoaded",() => {
3736

3837
worker.onmessage = function(e) {
3938
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-
let pokeList = [...document.getElementsByClassName("poke-badge")];
56-
let find = pokeList.filter((elem) => {
57-
if(elem.dataset.name == jsonFetched['name'] && elem.classList.contains("empty")) {
58-
return true;
59-
}
60-
return false;
61-
})
62-
if(find.length) {
63-
find[0].style.backgroundImage = 'url(' + jsonFetched['sprites'].front_default + ')';
64-
find[0].style.backgroundColor = typesColor[jsonFetched['types'].filter(e => e.slot == 1)[0].type.name];
65-
find[0].classList.remove("empty");
66-
}
67-
39+
updateWithPokemon(e.data.data);
6840
} else if(e.data.todo == 'init') {
69-
let pokeArray = e.data.data.results;
70-
let pokeList = document.getElementsByClassName("poke-list")[0];
71-
console.log(pokeArray)
72-
for(let poke of pokeArray) {
73-
let li = document.createElement('li');
74-
pokeList.appendChild(li);
75-
li.dataset['name'] = poke.name;
76-
li.classList.add('empty','poke-badge');
77-
console.log(poke.name);
78-
}
41+
pokeListInitialization(e.data.data.results);
7942
}
8043
}
8144
}
82-
})
45+
})
46+
47+
48+
49+
50+
51+
function updateWithPokemon(pokemon) {
52+
let pokeList = [...document.getElementsByClassName("poke-badge")];
53+
for(let fieldName of fields) { document.getElementsByClassName(fieldName)[0].innerHTML = pokemon[fieldName]; }
54+
document.getElementsByClassName('types')[0].innerHTML = pokemon['types'].map(x => x.type.name)
55+
document.getElementsByClassName('sprite')[0].src = pokemon['sprites'].front_default;
56+
57+
if(pokemon['types'].length > 1) {
58+
card.style.borderTopColor = typesColor[pokemon['types'][0].type.name];
59+
card.style.borderLeftColor = typesColor[pokemon['types'][0].type.name];
60+
card.style.borderBottomColor = typesColor[pokemon['types'][1].type.name];
61+
card.style.borderRightColor = typesColor[pokemon['types'][1].type.name];
62+
} else {
63+
card.style.borderColor = typesColor[pokemon['types'][0].type.name];
64+
}
65+
66+
67+
container.classList.remove('is-loading');
68+
69+
let find = pokeList.filter((elem) => {
70+
if(elem.dataset.name == pokemon['name'] && elem.classList.contains("empty")) {
71+
return true;
72+
}
73+
return false;
74+
})
75+
76+
if(find.length) {
77+
find[0].style.backgroundImage = 'url(' + pokemon['sprites'].front_default + ')';
78+
find[0].style.backgroundColor = typesColor[pokemon['types'].filter(e => e.slot == 1)[0].type.name];
79+
find[0].classList.remove("empty");
80+
}
81+
}
82+
83+
84+
function pokeListInitialization(pokeArray) {
85+
let pokeList = document.getElementsByClassName("poke-list")[0];
86+
for(let poke of pokeArray) {
87+
let li = document.createElement('li');
88+
pokeList.appendChild(li);
89+
li.dataset['name'] = poke.name;
90+
li.classList.add('empty','poke-badge');
91+
}
92+
}

‎javascript/worker.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@ const apiMaxId = 150;
44
const baseUrl = "https://pokeapi.co/api/v2/pokemon"
55

66
onmessage = (e) => {
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=150')
17-
.then(response => (postMessage(
18-
{
19-
todo: 'init',
20-
data: response.data
21-
})))
22-
}
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=150')
17+
.then(response => (postMessage(
18+
{
19+
todo: 'init',
20+
data: response.data
21+
})))
22+
}
2323
}

‎scss/pages/index.scss

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -23,56 +23,56 @@ h1,p {
2323
border-radius: 50px;
2424
border: 2px solid black;
2525
outline: none;
26-
margin-bottom: 20px;
27-
&::before {
28-
content: '';
29-
position: absolute;
30-
bottom: 0;
31-
left: 0;
32-
background-color: white;
33-
border-bottom-left-radius: 50px;
34-
border-bottom-right-radius: 50px;
35-
height: 50%;
36-
width: 100%;
37-
}
38-
&::after {
39-
content: '';
40-
position: absolute;
41-
top: 50%;
42-
left: 50%;
43-
transform: translate(-50%,-50%);
44-
width: 7px;
45-
height: 7px;
46-
border: 2px solid black;
47-
border-radius: 50%;
48-
}
49-
span {
50-
position: absolute;
51-
top: 50%;
52-
left: 50%;
53-
transform: translate(-50%,-50%);
54-
font-weight: bold;
55-
}
26+
margin-bottom: 20px;
27+
&::before {
28+
content: '';
29+
position: absolute;
30+
bottom: 0;
31+
left: 0;
32+
background-color: white;
33+
border-bottom-left-radius: 50px;
34+
border-bottom-right-radius: 50px;
35+
height: 50%;
36+
width: 100%;
37+
}
38+
&::after {
39+
content: '';
40+
position: absolute;
41+
top: 50%;
42+
left: 50%;
43+
transform: translate(-50%,-50%);
44+
width: 7px;
45+
height: 7px;
46+
border: 2px solid black;
47+
border-radius: 50%;
48+
}
49+
span {
50+
position: absolute;
51+
top: 50%;
52+
left: 50%;
53+
transform: translate(-50%,-50%);
54+
font-weight: bold;
55+
}
5656
}
5757
#text-placeholder {
5858
display: flex;
5959
flex-direction: column;
6060
align-items: center;
6161
background-color: white;
62-
padding: 20px 30px;
63-
line-height: 20px;
64-
letter-spacing: 1px;
65-
font-family: sans-serif;
66-
border-radius: 5px;
67-
border: solid 10px black;
68-
> div {
69-
font-weight: bold;
70-
span { font-weight: normal; }
71-
}
62+
padding: 20px 30px;
63+
line-height: 20px;
64+
letter-spacing: 1px;
65+
font-family: sans-serif;
66+
border-radius: 5px;
67+
border: solid 10px black;
68+
> div {
69+
font-weight: bold;
70+
span { font-weight: normal; }
71+
}
7272
}
7373
.loader {
7474
position: absolute;
75-
top: 65%;
75+
top: 27%;
7676
left: 50%;
7777
transform: translate(-50%,-50%);
7878
}

‎style.css

Lines changed: 1 addition & 1 deletion
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)