-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvanilla-day-23
104 lines (89 loc) · 2.68 KB
/
vanilla-day-23
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<title>Monsters!</title>
<style>
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
}
/**
* A simple grid layout
*/
.row {
display: grid;
grid-template-columns: auto auto auto;
text-align: center;
}
.grid {
min-height: 6em;
padding: 1em;
}
/**
* Make sure images scale
*/
img {
height: auto;
max-width: 100%;
}
</style>
</head>
<body>
<h1>Monsters!</h1>
<div id="app">
</div>
<footer>
<hr>
<p class="text-small text-muted">Icons by <a href="https://thenounproject.com/term/door/311732/">Jamie Dickinson</a>, <a href="https://thenounproject.com/term/monster/184225/">Nicky Knicky</a>, <a href="https://thenounproject.com/term/monster/1510400/">Alvaro Cabrera</a>, <a href="https://thenounproject.com/term/monster/28460/">Eliricon</a>, <a href="https://thenounproject.com/term/monster/82823/">April Yang</a>, <a href="https://thenounproject.com/term/monster/1062009/">tk66</a>, <a href="https://thenounproject.com/term/monster/24990/">Alex WaZa</a>, <a href="https://thenounproject.com/term/monster/37212/">Husein Aziz</a>, <a href="https://thenounproject.com/term/monster/2236082">iconcheese</a>, and <a href="https://thenounproject.com/term/socks/38451/">Yazmin Alanis</a>.</p>
</footer>
<script>
// The monsters and socks
var monsters = [
'monster1',
'monster2',
'monster3',
'monster4',
'monster5',
'monster6',
'monster7',
'monster8',
'monster9',
'monster10',
'monster11',
'sock'
];
let app = document.querySelector('#app');
/**
* Randomly shuffle an array
* https://stackoverflow.com/a/2450976/1293256
* @param {Array} array The array to shuffle
* @return {String} The first item in the shuffled array
*/
var shuffle = function (array) {
var currentIndex = array.length;
var temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
};
// let shuffledArray = shuffle(monsters);
// or
// https://css-tricks.com/snippets/javascript/shuffle-array/
let shuffledArray = monsters.sort(function() { return 0.5 - Math.random() });
shuffledArray = shuffledArray.map(monster => {
return `<div class="grid"><img src="${monster}.svg" /></div>` ;
});
var result = '<div class="row">' + shuffledArray.join('') + '</div>';
app.innerHTML = result;
</script>
</body>
</html>