Skip to content

Instantly share code, notes, and snippets.

@savicas
Last active November 5, 2019 20:06
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save savicas/17a53108dc80d4454acf8798a89d286b to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment