die

by khemikal

HTML

<select id="guess">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>
<select id="bet">
  <option value="10%">10%</option>
  <option value="25%">25%</option>
  <option value="50%">50%</option>
  <option value="75%">75%</option>
</select>
<p id="placeholder">
</p>
<button id="button">Roll Dice</button>
<p id="money">
</p>
<p id="winLose">
</p>

CSS

* {
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
}

#placeholder {
  height: 100px;
  width: 100px;
  margin: 50px auto;
  font-size: 18px;
}

JavaScript

money = 50;
$("#money").html(money);
var dice = {
    sides: 6,
    roll: function() {
      var randomNumber = Math.floor(Math.random() * this.sides) + 1;
      return randomNumber;
    }
  }
  //Prints dice roll to the page
function printNumber(number) {
  var placeholder = document.getElementById('placeholder');
  placeholder.innerHTML = number;
}
var button = document.getElementById('button');
button.onclick = function() {
if(money > 1) {
  var bet = $("#bet").find(":selected").text();
  bet = bet.replace("%", "");
  bet = "." + bet;
  console.log(bet);
  var result = dice.roll();
  var guess = $("#guess").find(":selected").text();
  printNumber(result);
  if (result == guess) {
    $("#winLose").html("WIN");
    var calc = parseFloat(money * bet);
    calc = parseInt(calc);
    console.log(calc);
    var result = parseInt(money + calc);    
    money = result;
    $("#money").html(money);
  } else {
    $("#winLose").html("LOSE");
    var calc = parseFloat(money * bet);
    calc = parseInt(calc);
    console.log(calc);
    var result = parseInt(money - calc);
    money = result;
    $("#money").html(money);
  }
  }
  else{
  $("#winLose").html("Not enough $");
  }
};