gabericharde/dice_roller.markdown

## dice_roller.markdown

      
    Raw
  

              dice_roller.markdown
            
          
    dice_roller

A Pen by Gabriel RiCharde on CodePen.
License.

  
## duck snail calculator.markdown

      
    Raw
  

              duck snail calculator.markdown
            
          
    duck snail calculator

A Pen by Gabriel RiCharde on CodePen.
License.

  
## index.html
<body style="background: #333333">

  <ul class="flex-container">
    <li class="flex-item" style="width: 300px; height: 80px;"><i class="icon-wd icon-wd-3x icon-wd-dice" id="mainDice" style="color: #666666; vertical-align: middle;"></i></li>

  </ul>
  <div>
    <ul class="flex-container" style="padding-top: 125px;">
      <div class="flex-button" id="flexButton">Roll!</div>
    </ul>
    <ul class="flex-container">
      <li class="flex-item" style="padding-left: 100px;"><i class="icon-wd icon-wd-plus-circle icon-wd-lg icon-wd-dice" style="color: #019283; vertical-align: middle;"></i></li>
      <li class="flex-item" style="padding-right: 100px;"><i class="icon-wd icon-wd-minus-circle icon-wd-lg icon-wd-dice" style="color: #019283; vertical-align: middle;"></i></li>
    </ul>
  </div>
</body>

## script.js
/// Add shake animation to main dice
$('.flex-button').bind('mousedown', function() {
  $('#mainDice').removeClass("animated shake");
  // alert("User clicked on Roll!");
});

$('.flex-button').bind('mouseup', function() {
  $('#mainDice').addClass("animated shake");
  // alert("User clicked on Roll!");
});

// Function for determining numbers 1-6 randomly
var oldClass = 'icon-wd-dice';
$("#mainDice").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
  var randNum = Math.floor((Math.random() * 6) + 1)
  console.log(randNum);
  var newClass = ("icon-wd-dice-" + randNum);
  update(randNum, newClass, oldClass);
  oldClass = newClass;
});

// Function to update displayed dice!
function  update(randNum, newClass, oldClass) {
  var dice = document.querySelector("#mainDice");
  dice.classList.remove(oldClass);
  dice.classList.add(newClass);
  console.log(newClass);
};

//Roll! button animation

var buttonRoll = document.querySelector('.flex-button');

buttonRoll.addEventListener('mousedown', function() {
  buttonRoll.className = 'flex-button-down';
});
buttonRoll.addEventListener('mouseup', function() {
  buttonRoll.className = 'flex-button';
});

//Plus sign color change on click

var plusColorChange = document.querySelector('.icon-wd-plus-circle');

plusColorChange.addEventListener('mousedown', function() {
  plusColorChange.style.color = "gray";
});
plusColorChange.addEventListener('mouseup', function() {
  plusColorChange.style.color = '#019283';
});

// Minus sign color change on click

var minusColorChange = document.querySelector('.icon-wd-minus-circle');

minusColorChange.addEventListener('mousedown', function() {
  minusColorChange.style.color = "gray";
});
minusColorChange.addEventListener('mouseup', function() {
  minusColorChange.style.color = '#019283';
});


## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://whiskeyduck.com/dice_roll_generator/js/jquery.svg.js"></script>
<script src="http://whiskeyduck.com/dice_roll_generator/js/jquery.svganim.js"></script>

## style.css
@import "compass/css3";
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: none;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

.flex-button {
  background: #019283;
  width: 125px;
  height: 60px;
  border-style: outset;
  border-color: #229383;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  border-radius: 5px;
}

.flex-button-down {
  background: #019283;
  width: 125px;
  height: 60px;
  border-style: inset;
  border-color: #229383;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  border-radius: 5px;
}

## styles
<link href="https://use.fonticons.com/kits/b0fa3664/b0fa3664.css" rel="stylesheet" />
<link href="https://rawgit.com/daneden/animate.css/master/animate.css" rel="stylesheet" />
	<body style="background: #333333">

	<ul class="flex-container">
	<li class="flex-item" style="width: 300px; height: 80px;"><i class="icon-wd icon-wd-3x icon-wd-dice" id="mainDice" style="color: #666666; vertical-align: middle;"></i></li>

	</ul>
	<div>
	<ul class="flex-container" style="padding-top: 125px;">
	<div class="flex-button" id="flexButton">Roll!</div>
	</ul>
	<ul class="flex-container">
	<li class="flex-item" style="padding-left: 100px;"><i class="icon-wd icon-wd-plus-circle icon-wd-lg icon-wd-dice" style="color: #019283; vertical-align: middle;"></i></li>
	<li class="flex-item" style="padding-right: 100px;"><i class="icon-wd icon-wd-minus-circle icon-wd-lg icon-wd-dice" style="color: #019283; vertical-align: middle;"></i></li>
	</ul>
	</div>
	</body>
	/// Add shake animation to main dice
	$('.flex-button').bind('mousedown', function() {
	$('#mainDice').removeClass("animated shake");
	// alert("User clicked on Roll!");
	});

	$('.flex-button').bind('mouseup', function() {
	$('#mainDice').addClass("animated shake");
	// alert("User clicked on Roll!");
	});

	// Function for determining numbers 1-6 randomly
	var oldClass = 'icon-wd-dice';
	$("#mainDice").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
	var randNum = Math.floor((Math.random() * 6) + 1)
	console.log(randNum);
	var newClass = ("icon-wd-dice-" + randNum);
	update(randNum, newClass, oldClass);
	oldClass = newClass;
	});

	// Function to update displayed dice!
	function update(randNum, newClass, oldClass) {
	var dice = document.querySelector("#mainDice");
	dice.classList.remove(oldClass);
	dice.classList.add(newClass);
	console.log(newClass);
	};

	//Roll! button animation

	var buttonRoll = document.querySelector('.flex-button');

	buttonRoll.addEventListener('mousedown', function() {
	buttonRoll.className = 'flex-button-down';
	});
	buttonRoll.addEventListener('mouseup', function() {
	buttonRoll.className = 'flex-button';
	});

	//Plus sign color change on click

	var plusColorChange = document.querySelector('.icon-wd-plus-circle');

	plusColorChange.addEventListener('mousedown', function() {
	plusColorChange.style.color = "gray";
	});
	plusColorChange.addEventListener('mouseup', function() {
	plusColorChange.style.color = '#019283';
	});

	// Minus sign color change on click

	var minusColorChange = document.querySelector('.icon-wd-minus-circle');

	minusColorChange.addEventListener('mousedown', function() {
	minusColorChange.style.color = "gray";
	});
	minusColorChange.addEventListener('mouseup', function() {
	minusColorChange.style.color = '#019283';
	});
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="http://whiskeyduck.com/dice_roll_generator/js/jquery.svg.js"></script>
	<script src="http://whiskeyduck.com/dice_roll_generator/js/jquery.svganim.js"></script>
	@import "compass/css3";
	.flex-container {
	padding: 0;
	margin: 0;
	list-style: none;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	justify-content: space-around;
	}

	.flex-item {
	background: none;
	padding: 5px;
	width: 100px;
	height: 100px;
	margin-top: 10px;
	line-height: 150px;
	color: white;
	font-weight: bold;
	font-size: 3em;
	text-align: center;
	}

	.flex-button {
	background: #019283;
	width: 125px;
	height: 60px;
	border-style: outset;
	border-color: #229383;
	color: white;
	font-weight: bold;
	font-size: 3em;
	text-align: center;
	vertical-align: middle;
	line-height: 60px;
	border-radius: 5px;
	}

	.flex-button-down {
	background: #019283;
	width: 125px;
	height: 60px;
	border-style: inset;
	border-color: #229383;
	color: white;
	font-weight: bold;
	font-size: 3em;
	text-align: center;
	vertical-align: middle;
	line-height: 60px;
	border-radius: 5px;
	}
	<link href="https://use.fonticons.com/kits/b0fa3664/b0fa3664.css" rel="stylesheet" />
	<link href="https://rawgit.com/daneden/animate.css/master/animate.css" rel="stylesheet" />