savicas/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>
	<!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>