tyte/js-monsters-minesweeper.html

## js-monsters-minesweeper.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');

			/**
			 * 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);

			// New - no need for appends and create elements. Just use literals everywhere!
			app.innerHTML =
				`<div class="row">
					${monsters.map(function (monster){
						return `
						<a role="button" class="grid">
								<figure>
									<img src="door.svg" alt="Secret">
									<figcaption>Secret</figcaption>
								</figure>
							</a>`;
					}).join('')}
				</div>`;

				let doors = document.querySelectorAll('figure');


				for (let i = 0; i < monsters.length; i++) {
					doors[i].addEventListener('click', function (event) {
						doors[i].innerHTML =
							`
									<img src="${monsters[i].file}.svg" alt="${monsters[i].alt}">
									<figcaption>${monsters[i].title}</figcaption>
								`;
						if (i < (monsters.length - 2) && monsters[i].file == 'sock') {
							alert('You lost the game!');
						}
					});

				}

		</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');

	/**
	* 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);

	// New - no need for appends and create elements. Just use literals everywhere!
	app.innerHTML =
	`<div class="row">
	${monsters.map(function (monster){
	return `
	<a role="button" class="grid">
	<figure>
	<img src="door.svg" alt="Secret">
	<figcaption>Secret</figcaption>
	</figure>
	</a>`;
	}).join('')}
	</div>`;

	let doors = document.querySelectorAll('figure');


	for (let i = 0; i < monsters.length; i++) {
	doors[i].addEventListener('click', function (event) {
	doors[i].innerHTML =
	`
	<img src="${monsters[i].file}.svg" alt="${monsters[i].alt}">
	<figcaption>${monsters[i].title}</figcaption>
	`;
	if (i < (monsters.length - 2) && monsters[i].file == 'sock') {
	alert('You lost the game!');
	}
	});

	}

	</script>
	</body>
	</html>