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
51
52
53
54
55
56
57
58
|
const shuffleBtn = document.querySelector('.button');
const app = document.querySelector('#app');
const monsters = [
'monster1',
'monster2',
'monster3',
'monster4',
'monster5',
'monster6',
'monster7',
'monster8',
'monster9',
'monster10',
'monster11',
'sock'
];
const render = function () {
app.innerHTML = '<p>Click a door to reveal a monster. Try not to find the sock.</p><div class="row">' + monsters.map(monster => {
return (`
<div class="grid" aria-live="polite"><button class="show_button" data-id="${monster}"><img alt= "Click this picture of door to see monster" src="../img/door.svg"/></button></div>
`)
}).join('') + '</div>';
};
const shuffleArr = function (arr) {
var currentIndex = arr.length;
var temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = arr[currentIndex];
arr[currentIndex] = arr[randomIndex];
arr[randomIndex] = temporaryValue;
}
render();
return arr;
}
const replaceTargetElement = function (e) {
const monster = e.target.closest('[data-id]');
if (!monster) return;
const monsterID = monster.getAttribute('data-id');
monster.parentNode.innerHTML = `<img alt="A picture of ${monsterID}" src="../img/${monsterID}.svg"/>`
}
document.addEventListener('click', replaceTargetElement);
shuffleBtn.addEventListener('click', function () {
shuffleArr(monsters);
});
|