davelooi/dice.html

## dice.html
<html>
  <head>
    <script>
      function numberOfDice() {
        return document.getElementById("numberOfDice").value;
      }
      function handleDiceChange() {
        document.getElementById('rangeValLabel').innerHTML = numberOfDice();
      }
      function rollDice() {
        return Math.floor(Math.random() * 6) + 1;
      }
      function renderDice() {
        return "<div class='die'>" + rollDice() + "</div>";
      }
      function dynamicDice() {
        var dice = document.getElementById("dices");
        dice.innerHTML = "";
        for(i = 0; i< numberOfDice(); i++) {
          dice.innerHTML += renderDice();
        }
      }
    </script>
    <style>
.die {
  color: red;
  font-size: 3em;
  margin: 1em;
  display: inline;
}
    </style>
  </head>

  <body>
    <div class="dice">
      <div>
        Number of dice
        <em id="rangeValLabel"></em>
      </div>
      <input
        id="numberOfDice"
        type="range"
        min="1"
        max="10"
        value="1"
        onchange="handleDiceChange()"
      />
      <button onclick="dynamicDice()">Dynamic Dice</button>
      <div id="dices"></div>
    </div>
  </body>
  <tail>
    <script>
      handleDiceChange();
    </script>
  </tail>
</html>
	<html>
	<head>
	<script>
	function numberOfDice() {
	return document.getElementById("numberOfDice").value;
	}
	function handleDiceChange() {
	document.getElementById('rangeValLabel').innerHTML = numberOfDice();
	}
	function rollDice() {
	return Math.floor(Math.random() * 6) + 1;
	}
	function renderDice() {
	return "<div class='die'>" + rollDice() + "</div>";
	}
	function dynamicDice() {
	var dice = document.getElementById("dices");
	dice.innerHTML = "";
	for(i = 0; i< numberOfDice(); i++) {
	dice.innerHTML += renderDice();
	}
	}
	</script>
	<style>
	.die {
	color: red;
	font-size: 3em;
	margin: 1em;
	display: inline;
	}
	</style>
	</head>

	<body>
	<div class="dice">
	<div>
	Number of dice
	<em id="rangeValLabel"></em>
	</div>
	<input
	id="numberOfDice"
	type="range"
	min="1"
	max="10"
	value="1"
	onchange="handleDiceChange()"
	/>
	<button onclick="dynamicDice()">Dynamic Dice</button>
	<div id="dices"></div>
	</div>
	</body>
	<tail>
	<script>
	handleDiceChange();
	</script>
	</tail>
	</html>