/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.die {
  border: 1px solid black;
  height: 75px;
  width: 100px;
  margin: 30px auto;
  font-family: 'Impact';
  font-size: 40px;
  text-align: center;
  padding-top:25px;
}

.die-button {
  padding: 5px;
  margin: auto;
  display: block;
}
</style>
</head>
<body>
  <div class="die"></div>
  <button class="die-button">roll die</button>
<script id="jsbin-javascript">
/*

INSTRUCTIONS:

1. Go to 'File' and click 'Clone'
2. Follow instructions in the slides to generate a random number for the die.

*/

// returns a random number between a provided minimum and maximum
var getRandomNumber = function generateRandomNumber()
{
  return Math.floor((Math.random() * 6) + 1);
};


// gets a random number from getRandomNumber, logs it to console, and inserts it into the '.die' div
var rollDie = function () {
  var number = getRandomNumber(1,6);
  $('.die').html(number);
};

/* every time the button with the class '.die-button' is clicked, use the rollDie function to get a new random side and display it in the die. */
$('.die-button').on('click', rollDie);
</script>


<script id="jsbin-source-css" type="text/css">.die {
  border: 1px solid black;
  height: 75px;
  width: 100px;
  margin: 30px auto;
  font-family: 'Impact';
  font-size: 40px;
  text-align: center;
  padding-top:25px;
}

.die-button {
  padding: 5px;
  margin: auto;
  display: block;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">/*

INSTRUCTIONS:

1. Go to 'File' and click 'Clone'
2. Follow instructions in the slides to generate a random number for the die.

*/

// returns a random number between a provided minimum and maximum
var getRandomNumber = function generateRandomNumber()
{
  return Math.floor((Math.random() * 6) + 1);
};


// gets a random number from getRandomNumber, logs it to console, and inserts it into the '.die' div
var rollDie = function () {
  var number = getRandomNumber(1,6);
  $('.die').html(number);
};

/* every time the button with the class '.die-button' is clicked, use the rollDie function to get a new random side and display it in the die. */
$('.die-button').on('click', rollDie);</script></body>
</html>

## jsbin.pitudi.css
.die {
  border: 1px solid black;
  height: 75px;
  width: 100px;
  margin: 30px auto;
  font-family: 'Impact';
  font-size: 40px;
  text-align: center;
  padding-top:25px;
}

.die-button {
  padding: 5px;
  margin: auto;
  display: block;
}

## jsbin.pitudi.js
/*

INSTRUCTIONS:

1. Go to 'File' and click 'Clone'
2. Follow instructions in the slides to generate a random number for the die.

*/

// returns a random number between a provided minimum and maximum
var getRandomNumber = function generateRandomNumber()
{
  return Math.floor((Math.random() * 6) + 1);
};


// gets a random number from getRandomNumber, logs it to console, and inserts it into the '.die' div
var rollDie = function () {
  var number = getRandomNumber(1,6);
  $('.die').html(number);
};

/* every time the button with the class '.die-button' is clicked, use the rollDie function to get a new random side and display it in the die. */
$('.die-button').on('click', rollDie);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.die {
	border: 1px solid black;
	height: 75px;
	width: 100px;
	margin: 30px auto;
	font-family: 'Impact';
	font-size: 40px;
	text-align: center;
	padding-top:25px;
	}

	.die-button {
	padding: 5px;
	margin: auto;
	display: block;
	}
	</style>
	</head>
	<body>
	<div class="die"></div>
	<button class="die-button">roll die</button>
	<script id="jsbin-javascript">
	/*

	INSTRUCTIONS:

	1. Go to 'File' and click 'Clone'
	2. Follow instructions in the slides to generate a random number for the die.

	*/

	// returns a random number between a provided minimum and maximum
	var getRandomNumber = function generateRandomNumber()
	{
	return Math.floor((Math.random() * 6) + 1);
	};




	// gets a random number from getRandomNumber, logs it to console, and inserts it into the '.die' div
	var rollDie = function () {
	var number = getRandomNumber(1,6);
	$('.die').html(number);
	};

	/* every time the button with the class '.die-button' is clicked, use the rollDie function to get a new random side and display it in the die. */
	$('.die-button').on('click', rollDie);
	</script>


	<script id="jsbin-source-css" type="text/css">.die {
	border: 1px solid black;
	height: 75px;
	width: 100px;
	margin: 30px auto;
	font-family: 'Impact';
	font-size: 40px;
	text-align: center;
	padding-top:25px;
	}

	.die-button {
	padding: 5px;
	margin: auto;
	display: block;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">/*

	INSTRUCTIONS:

	1. Go to 'File' and click 'Clone'
	2. Follow instructions in the slides to generate a random number for the die.

	*/

	// returns a random number between a provided minimum and maximum
	var getRandomNumber = function generateRandomNumber()
	{
	return Math.floor((Math.random() * 6) + 1);
	};




	// gets a random number from getRandomNumber, logs it to console, and inserts it into the '.die' div
	var rollDie = function () {
	var number = getRandomNumber(1,6);
	$('.die').html(number);
	};

	/* every time the button with the class '.die-button' is clicked, use the rollDie function to get a new random side and display it in the die. */
	$('.die-button').on('click', rollDie);</script></body>
	</html>