tyte/js-shuffle-and-display-images.html

## js-shuffle-and-display-images.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Monsters!</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<style type="text/css">
			body {
				margin: 0 auto;
				max-width: 40em;
				width: 88%;
			}

			/**
			 * A simple grid layout
			 */
			.row {
				display: grid;
				grid-template-columns: auto auto auto;
				text-align: center;
				align-items: baseline;
			}

			.grid {
				min-height: 6em;
				padding: 1em;
			}

			/**
			 * Make sure images scale
			 */
			img {
				height: auto;
				max-width: 100%;
				padding-bottom: 1em;
			}
		</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
			let monsters = [
				{file: 'monster1',
				title: 'Little Moo',
				alt: 'A little cute cyclope yellowish monster'},
				{file: 'monster2',
				title: 'Mustard Teethy',
				alt : 'Tall mustard color cyclope monster, not so cute'
				},
				{file: 'monster3',
				title: 'Green Day',
				alt: 'Aggressive, green monster, stay away',
			},
				{file: 'monster4',
				title: 'Red One',
				alt: 'Red, for armed, extremely odd monster'
			},
				{file: 'monster5',
				title: 'Eyebully',
				alt: 'Big eyes, little mind, friend with Piranhas',},
				{file: 'monster6',
				title: 'Triadmoon',
				alt: 'Triangular green upside down monster'},
				{file: 'monster7',
				title: 'Octomon',
				alt: 'Cure cyclope with a touch of octopus'},
				{file: 'monster8',
				title: 'Eggy Pop',
				alt: `Purple monster, doesn't like to talk`},
				{file: 'monster9',
			title: 'Anty',
		alt: 'Bluish antlike cuty'},
				{file: 'monster10',
				title: 'Bloomb',
				alt: 'Just a typically blue monster you meet on the streets'},
				{file: 'monster11',
			title: 'Greyjoe',
			alt: 'A very grey monster'},
				{file: 'sock',
			title: 'Sockmo',
			alt: `Looks like socks, but perhaps it's a disquised monster`}
			];

			let app = document.querySelector('#app');
			let appGrid = document.createElement('div');
			appGrid.classList.add('row');
			app.appendChild(appGrid);

			/**
			 * 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
			 */
			function shuffle (array) {

			let currentIndex = array.length;
			let 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;

			}

			shuffle(monsters);

			monsters.forEach(monster => {
				let monsterFig = document.createElement('figure');
				let monsterImg = document.createElement('img');
				let monsterCaption = document.createElement('figcaption');
				let monsterGrid = document.createElement('div');
				monsterGrid.classList.add('grid');
				monsterCaption.textContent = monster.title;
				monsterImg.src = `${monster.file}.svg`;
				monsterImg.alt = monster.alt;
				monsterFig.appendChild(monsterImg);
				monsterFig.appendChild(monsterCaption);

				monsterGrid.appendChild(monsterFig);

				appGrid.appendChild(monsterGrid);
			});

			// Your code goes here...
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Monsters!</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style type="text/css">
	body {
	margin: 0 auto;
	max-width: 40em;
	width: 88%;
	}

	/**
	* A simple grid layout
	*/
	.row {
	display: grid;
	grid-template-columns: auto auto auto;
	text-align: center;
	align-items: baseline;
	}

	.grid {
	min-height: 6em;
	padding: 1em;
	}

	/**
	* Make sure images scale
	*/
	img {
	height: auto;
	max-width: 100%;
	padding-bottom: 1em;
	}
	</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
	let monsters = [
	{file: 'monster1',
	title: 'Little Moo',
	alt: 'A little cute cyclope yellowish monster'},
	{file: 'monster2',
	title: 'Mustard Teethy',
	alt : 'Tall mustard color cyclope monster, not so cute'
	},
	{file: 'monster3',
	title: 'Green Day',
	alt: 'Aggressive, green monster, stay away',
	},
	{file: 'monster4',
	title: 'Red One',
	alt: 'Red, for armed, extremely odd monster'
	},
	{file: 'monster5',
	title: 'Eyebully',
	alt: 'Big eyes, little mind, friend with Piranhas',},
	{file: 'monster6',
	title: 'Triadmoon',
	alt: 'Triangular green upside down monster'},
	{file: 'monster7',
	title: 'Octomon',
	alt: 'Cure cyclope with a touch of octopus'},
	{file: 'monster8',
	title: 'Eggy Pop',
	alt: `Purple monster, doesn't like to talk`},
	{file: 'monster9',
	title: 'Anty',
	alt: 'Bluish antlike cuty'},
	{file: 'monster10',
	title: 'Bloomb',
	alt: 'Just a typically blue monster you meet on the streets'},
	{file: 'monster11',
	title: 'Greyjoe',
	alt: 'A very grey monster'},
	{file: 'sock',
	title: 'Sockmo',
	alt: `Looks like socks, but perhaps it's a disquised monster`}
	];

	let app = document.querySelector('#app');
	let appGrid = document.createElement('div');
	appGrid.classList.add('row');
	app.appendChild(appGrid);

	/**
	* 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
	*/
	function shuffle (array) {

	let currentIndex = array.length;
	let 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;

	}

	shuffle(monsters);

	monsters.forEach(monster => {
	let monsterFig = document.createElement('figure');
	let monsterImg = document.createElement('img');
	let monsterCaption = document.createElement('figcaption');
	let monsterGrid = document.createElement('div');
	monsterGrid.classList.add('grid');
	monsterCaption.textContent = monster.title;
	monsterImg.src = `${monster.file}.svg`;
	monsterImg.alt = monster.alt;
	monsterFig.appendChild(monsterImg);
	monsterFig.appendChild(monsterCaption);

	monsterGrid.appendChild(monsterFig);

	appGrid.appendChild(monsterGrid);
	});

	// Your code goes here...
	</script>
	</body>
	</html>