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