Skip to content

Commit a10ece2

Browse files
author
Hugues Signamarcheix
committed
merge
2 parents 69f8cc6 + 4de9783 commit a10ece2

File tree

5 files changed

+124
-22
lines changed

5 files changed

+124
-22
lines changed

‎2019-12-11/hugues.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Je suis présent

‎index.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,21 @@
77
<link rel="stylesheet" href="style.css">
88
</head>
99
<body>
10-
<h1>Javascript workers in action</h1>
11-
<div class="container">
12-
<button id="refresh" class="btn">Générer un Pokémon</button>
10+
<h1>Javascript workers in action</h1>
11+
<p>Click on the pokeball and see which Pokemon you catched !</p>
12+
<div class="container">
13+
<button id="refresh" class="btn"><span></span></button>
1314
<div id="text-placeholder" class="is-empty">
1415
<img class="sprite" src="">
1516
<div>Name : <span class="name"></span></div>
1617
<div>Types : <span class="types"></span></div>
1718
<div>Height : <span class="height"></span> ft</div>
18-
<div>Weight : <span class="weight"></span> kg</div>
19+
<div>Weight : <span class="weight"></span> lbs</div>
1920
</div>
2021
<div class="loader">
2122
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
2223
</div>
23-
</div>
24+
</div>
2425
<script src="javascript/script.js"></script>
2526
</body>
2627
</html>

‎javascript/script.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,32 @@
11
const fields = ['name', 'height', 'weight']
2+
const typesColor = {
3+
'normal': '#A8A77A',
4+
'fire': '#EE8130',
5+
'water': '#6390F0',
6+
'electric': '#F7D02C',
7+
'grass': '#7AC74C',
8+
'ice': '#96D9D6',
9+
'fighting': '#C22E28',
10+
'poison': '#A33EA1',
11+
'ground': '#E2BF65',
12+
'flying': '#A98FF3',
13+
'psychic': '#F95587',
14+
'bug': '#A6B91A',
15+
'rock': '#B6A136',
16+
'ghost': '#735797',
17+
'dragon': '#6F35FC',
18+
'dark': '#705746',
19+
'steel': '#B7B7CE',
20+
'fairy': '#D685AD',
21+
}
222

323
document.addEventListener("DOMContentLoaded",() => {
424
if (window.Worker) {
525
let worker = new Worker('./javascript/dist/worker-bundled.js');
626

727
let btnRefresh = document.getElementById("refresh");
828
let container = document.getElementsByClassName("container")[0];
29+
let card = document.getElementById("text-placeholder");
930

1031
btnRefresh.addEventListener("click",() => {
1132
container.classList.add('is-loading');
@@ -18,6 +39,14 @@ document.addEventListener("DOMContentLoaded",() => {
1839
document.getElementsByClassName(fieldName)[0].innerHTML = jsonFetched[fieldName];
1940
}
2041
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];
49+
}
2150
document.getElementsByClassName('sprite')[0].src = jsonFetched['sprites'].front_default;
2251
container.classList.remove('is-loading');
2352
}

‎scss/pages/index.scss

Lines changed: 45 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,65 @@
1-
h1 {
1+
h1,p {
22
font-family: sans-serif;
3+
text-align: center;
34
}
5+
46
.container {
57
position: relative;
68
display: flex;
79
flex-direction: column;
810
align-items: center;
911
#refresh {
10-
width: 30%;
11-
padding: 10px;
12-
background-color: #268fc3;
13-
color: white;
12+
position: relative;
13+
padding: 20px;
14+
background-color: red;
15+
color: black;
1416
font-size: 16px;
15-
border-radius: 5px;
17+
border-radius: 50px;
18+
border: 2px solid black;
1619
outline: none;
1720
margin-bottom: 20px;
21+
&::before {
22+
content: '';
23+
position: absolute;
24+
bottom: 0;
25+
left: 0;
26+
background-color: white;
27+
border-bottom-left-radius: 50px;
28+
border-bottom-right-radius: 50px;
29+
height: 50%;
30+
width: 100%;
31+
}
32+
&::after {
33+
content: '';
34+
position: absolute;
35+
top: 50%;
36+
left: 50%;
37+
transform: translate(-50%,-50%);
38+
width: 7px;
39+
height: 7px;
40+
border: 2px solid black;
41+
border-radius: 50%;
42+
}
43+
span {
44+
position: absolute;
45+
top: 50%;
46+
left: 50%;
47+
transform: translate(-50%,-50%);
48+
font-weight: bold;
49+
}
1850
}
1951
#text-placeholder {
20-
background-color: lightgray;
52+
display: flex;
53+
flex-direction: column;
54+
align-items: center;
55+
background-color: white;
2156
padding: 20px 20px;
2257
line-height: 20px;
2358
letter-spacing: 1px;
2459
font-family: sans-serif;
2560
border-radius: 5px;
26-
width: 96%;
61+
border: solid 10px black;
62+
width: 15%;
2763
> div {
2864
font-weight: bold;
2965
span { font-weight: normal; }
@@ -38,4 +74,4 @@ h1 {
3874
&:not(.is-loading) {
3975
.loader { display: none; }
4076
}
41-
}
77+
}

‎style.css

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

0 commit comments

Comments
 (0)