Day_23_Shuffle The Monsters

## Day_23_Shuffle The Monsters
<!DOCTYPE html>
<html>

<head>
	<title>Monsters!</title>

	<style type="text/css">
		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 {
			border: 1px solid red;
			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>
	<button id="btn">Shuffle</button>

	<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'
		];
		const app = document.querySelector("#app");
		const btn = document.querySelector("#btn");


		// injects markup
		const shuffle_and_show_monsters = function (event) {
			let html = "";
			html = '<div class="row">';
			monsters = shuffle(monsters);
			monsters.forEach(monster => {
				console.log(monster)
				html += `<div class="grid"><img src="./monsters/${monster}.svg"/></div`;
			});
			html += '</div>';
			app.innerHTML = html;
		};

		//shuffle monsters
		function shuffle(array) {
			var currentIndex = array.length, temporaryValue, randomI
			// 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;
		}

		shuffle_and_show_monsters();
		btn.addEventListener('click', shuffle_and_show_monsters, false);
	</script>
</body>

</html>