irgeek/dice.html

## dice.html
<!doctype html>
<html>
    <head>
        <title>Dé de Couleurs</title>
        <meta name="description" content="Dé de Couleurs">
        <meta name="keywords" content="dice colour random">
        <meta charset="utf-8">
    </head>
    <style type="text/css" media="screen">
* {
    font-family: "Gill Sans", sans-serif;
    font-size: 12;
}
.flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#dice {
    margin: 20px;
}
.die {
    height:3ex;
    width:3ex;
    line-height: 2.8ex;
    margin: 50px;
    background-color: lightgray;
    border-radius: 10px;
    text-align: center;
    font-size: 12ex;
}
.face {}
.buttoncontainer {
    margin: 0 auto;
    display: table;
}
button {
    font-size: 2em;
}
#roll {
    margin-top: 40px;
}
.key {
    margin-top: 20px;
}
.keycontainer {
    position: relative;
}
.colour {
    width: 8ex;
    height: 8ex;
    line-height: 7.5ex;
    margin: 0px 10px;
    border-radius: 5px;
    text-align: center;
}
.colour.block .colour.label {
    position: absolute;
}
.colour.block span {
    font-size: 5ex;
}
.names {
    font-size: .8em;
    text-align: center;
}
    </style>
    <body>
        <div class="button-div">
            <div class="buttoncontainer">
                <button id="roll">Lancer</button>
                <!-- <button id="add">Ajouter</button> -->
            </div>
        </div>
        <div class="flex" id="dice"></div>
        <div class="key flex" id="key"></div>
        <div class="names flex" id="names"></div>
    </body>
    <script>
        var colours = [ "hotpink", "red", "green", "royalblue", "saddlebrown", "gold" ]
        var colour_labels = [ "Rose", "Rouge", "Vert", "Bleu", "Marron", "Jaune" ]
        var faces = [ "⚀", "⚁", "⚂", "⚃", "⚄", "⚅" ]
        function roll() {
            return Math.floor(Math.random() * colours.length);
        }
        function update_colours() {
            document.querySelectorAll("#dice > .die").forEach(function(node) {
                rolled = roll()
                node.style.backgroundColor = colours[rolled];
                node.innerHTML = `<div class="face">${faces[rolled]}</div>`;
            });
        }
        function add_die() {
            document.querySelector("#dice").innerHTML += '<div class="die"></div>'
        }
        function setup() {
            let key = document.querySelector("#key");
            let names = document.querySelector("#names");
            for (i in colours) {
                key.innerHTML += (`
                    <div class="keycontainer">
                      <div class="colour block" style="background-color: ${colours[i]}">
                        <div class=".face"><span>${faces[i]}</span></div>
                      </div>
                      <div class="colour label">${colour_labels[i]}</div>
                    </div>
                `);
            }
            let qs = new URLSearchParams(window.location.search);
            let count = qs.get('count');
            if (count) {
                for (i=0; i<count; i++) {
                    add_die()
                }
            } else {
                add_die()
            }
        }
        document.querySelector('#roll').addEventListener('click', update_colours);
        document.addEventListener('DOMContentLoaded', setup);
    </script>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Dé de Couleurs</title>
	<meta name="description" content="Dé de Couleurs">
	<meta name="keywords" content="dice colour random">
	<meta charset="utf-8">
	</head>
	<style type="text/css" media="screen">
	* {
	font-family: "Gill Sans", sans-serif;
	font-size: 12;
	}
	.flex {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	}
	#dice {
	margin: 20px;
	}
	.die {
	height:3ex;
	width:3ex;
	line-height: 2.8ex;
	margin: 50px;
	background-color: lightgray;
	border-radius: 10px;
	text-align: center;
	font-size: 12ex;
	}
	.face {}
	.buttoncontainer {
	margin: 0 auto;
	display: table;
	}
	button {
	font-size: 2em;
	}
	#roll {
	margin-top: 40px;
	}
	.key {
	margin-top: 20px;
	}
	.keycontainer {
	position: relative;
	}
	.colour {
	width: 8ex;
	height: 8ex;
	line-height: 7.5ex;
	margin: 0px 10px;
	border-radius: 5px;
	text-align: center;
	}
	.colour.block .colour.label {
	position: absolute;
	}
	.colour.block span {
	font-size: 5ex;
	}
	.names {
	font-size: .8em;
	text-align: center;
	}
	</style>
	<body>
	<div class="button-div">
	<div class="buttoncontainer">
	<button id="roll">Lancer</button>
	<!-- <button id="add">Ajouter</button> -->
	</div>
	</div>
	<div class="flex" id="dice"></div>
	<div class="key flex" id="key"></div>
	<div class="names flex" id="names"></div>
	</body>
	<script>
	var colours = [ "hotpink", "red", "green", "royalblue", "saddlebrown", "gold" ]
	var colour_labels = [ "Rose", "Rouge", "Vert", "Bleu", "Marron", "Jaune" ]
	var faces = [ "⚀", "⚁", "⚂", "⚃", "⚄", "⚅" ]
	function roll() {
	return Math.floor(Math.random() * colours.length);
	}
	function update_colours() {
	document.querySelectorAll("#dice > .die").forEach(function(node) {
	rolled = roll()
	node.style.backgroundColor = colours[rolled];
	node.innerHTML = `<div class="face">${faces[rolled]}</div>`;
	});
	}
	function add_die() {
	document.querySelector("#dice").innerHTML += '<div class="die"></div>'
	}
	function setup() {
	let key = document.querySelector("#key");
	let names = document.querySelector("#names");
	for (i in colours) {
	key.innerHTML += (`
	<div class="keycontainer">
	<div class="colour block" style="background-color: ${colours[i]}">
	<div class=".face"><span>${faces[i]}</span></div>
	</div>
	<div class="colour label">${colour_labels[i]}</div>
	</div>
	`);
	}
	let qs = new URLSearchParams(window.location.search);
	let count = qs.get('count');
	if (count) {
	for (i=0; i<count; i++) {
	add_die()
	}
	} else {
	add_die()
	}
	}
	document.querySelector('#roll').addEventListener('click', update_colours);
	document.addEventListener('DOMContentLoaded', setup);
	</script>
	</html>