Chance calculator with rolls

by Andrejs Gubars

HTML

<h1>Calculate your chances of getting something, by trying to roll the same number (enter probability below)</h1>
<small>for example if you want number <strong>1</strong> out of <strong>2000</strong> possible numbers, and you try to roll <strong>300</strong> times</small>
<form>
<label for="calc">Odds: </label><input type="text" name="calc" id="calc" placeholder="f.e 1/2000">
<label for="rols">Rolls: </label><input type="text" name="rols" id="rols" placeholder="300">
<br>
<button>Calculate</button>
</form>
<div id="result"></div>

CSS

body {
  font-family: 'Lato';
}

h1 {
  font-size: 20px;
  color: #666;
  margin: 0 0 20px;
}

#result {
  margin-top: 10px;
  color: red;
  font-size: 20px;
}

input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  font-size: 16px;
  border-radius: 8px;
  font-family: inherit;
}

button {
  background: #fafafa;
  color: #000;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
  border-radius: 8px;
  margin-top: 10px;
  background: #dd3;
  cursor: pointer;
}

JavaScript

var calc, result, form, rols;

var returnSingleElement = function(selector) {
	return document.querySelector(selector);
}

calc = returnSingleElement('#calc');
rols = returnSingleElement('#rols');
result = returnSingleElement('#result');
form = returnSingleElement('form');

form.addEventListener('submit', function(e) {
	e.preventDefault();
  e.stopPropagation();
	
  var d, f, E, r, i, s, R, m;
  
  i = calc.value;
  s = i.split('/');
  d = parseInt(s[0]);
  f = parseInt(s[1]);
  R = parseInt(rols.value);
	r = 1 - Math.pow( (f - d) / f , R);
  console.log('Result', r + '%');
  result.innerHTML = (r * 100).toFixed(2) + '% is the chance that you should have recived a winning roll!';
  return false;
});