12. Monster Shuffle

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<button class="button" value="monsters">Click to load and Shuffle!</button>

<div id="app"></div>

<footer>
  <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>,<br/> 
    and <a href="https://thenounproject.com/term/socks/38451/">Yazmin Alanis</a>.</p>
</footer>

JavaScript

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
/* Each monster (or sock) has a matching SVG in the source code.
For example, there’s a monster3 in the array, and a monster3.svg in the source code.
Shuffle the array of monsters, and render the matching SVG files into the #app element. */

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 = '<div class="row">' + monsters.map(monster => {
    return (`
      <div class="grid" aria-live="polite"><img alt= "A picture of ${monster}" src="../img/${monster}.svg"/></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;
}

shuffleBtn.addEventListener('click', function() {
  shuffleArr(monsters);
});