This repository has been archived by the owner on Apr 24, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
/
app.js
50 lines (42 loc) · 1.27 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
let PLAYERS = [];
const WRAPPER = document.querySelector('.players');
fetch('./players.json')
.then(response => {
return response.json()
})
.then(json => {
PLAYERS = json.players
})
.then(players => {
makePlayer(['gk', 'df', 'ml', 'fw']);
});
function makePlayer(filters) {
WRAPPER.innerHTML = '';
PLAYERS
.filter(player => {
return filters.indexOf(player.position) > -1
})
.map(player => {
let element = document.createElement('div');
element.classList.add('player');
// element.style.backgroundImage = `url("assets/players/${player.name.first}-${player.name.last}.jpeg")`;
element.innerHTML = `<img src="assets/players/${player.name.first}-${player.name.last}.jpeg">`;
let name = document.createElement('span');
name.classList.add('player__name');
name.innerText = `${player.name.first[0]}.${player.name.last}`;
element.appendChild(name);
WRAPPER.appendChild(element);
});
}
let form = document.querySelector('#filters');
form.addEventListener('change', (e) => {
e.preventDefault();
let inputs = document.forms[0].querySelectorAll('input');
let filters = [];
for (let input of inputs) {
if (input.checked) {
filters.push(input.name);
}
}
makePlayer(filters);
});