Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<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%;
<div id="app"></div>
<button id="btn">Shuffle</button>
<p class="text-small text-muted">Icons by <a href="">Jamie
Dickinson</a>, <a href="">Nicky Knicky</a>, <a
href="">Alvaro Cabrera</a>, <a
href="">Eliricon</a>, <a
href="">April Yang</a>, <a
href="">tk66</a>, <a
href="">Alex WaZa</a>, <a
href="">Husein Aziz</a>, <a
href="">iconcheese</a>, and <a
href="">Yazmin Alanis</a>.</p>
// The monsters and socks
var monsters = [
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 => {
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;
btn.addEventListener('click', shuffle_and_show_monsters, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment