CoinFlip_HMK2

by Ryan Brown

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<form id ='Formski'>
Input Flips to Attempt<input type="number" id="Flips" size="5" value="1000" min="1" max="100000"/><br/>
<input type="button" value="Flip" id="button"/>


<div id='coin'>

</div>

<div id='result'>

</div>
<div id='headsCounter'>

</div>
<div id='tailsCounter'>

</div>  
<div id='FlipCounter'>

</div>  
 </form>

CSS

body {
  background: #fff;
}

#button {
  background:orange;
  color:#fff;
  padding:10px 15px;
  border-radius:2px;
  display:inline-block;
  transition:0.5s;
  cursor:pointer;
}

JavaScript

var coin = document.getElementById('coin');
var button = document.getElementById('button');
var result = document.getElementById('result');
var headsCounter = document.getElementById('headsCounter');
var TailsCounter = document.getElementById('TailsCounter');
var FlipCounter = document.getElementById('FlipCounter');
var heads = 0;
var tails = 0;
var Flips = 0;
var FlipsToAttempt = 1000;


function flipCount() {
FlipsToAttempt = Number($('#Flips').val());
	Flips += 1;
	FlipCounter.innerHTML = '<h1> Number of Flips: ' + Flips + '</h1>';
  if (Flips < FlipsToAttempt) {
  coinToss();
  
  }
}


function coinToss() {
  /* Random number 0 or 1  */
  var x = Math.floor(Math.random() * 100);
  /* If statement */
  if (x <= 50) {
    heads += 1;
    headsCounter.innerHTML = '<h1> Number of heads: ' + heads + '</h1>';
  flipCount();
  } else {
     tails += 1;
     tailsCounter.innerHTML = '<h1> Number of tails: ' + tails + '</h1>';
 flipCount();

  }
  

}
button.onclick = function() {
heads = 0;
tails = 0;
Flips = 0;
  coinToss();
}