relaxedtomato/js-betting-game.html

## js-betting-game.html
<!DOCTYPE html>
<html>
<head>
  <script src="jquery-3.1.0.js"></script>
</head>

<body>
  <h1>Place Your Bets!</h1>
  <!--RB: You can remove this extra space, lint takes care of this, http://eslint.org/-->

  <form id="myForm">
    <label for="playerBet">Place your bet $</label>
    <input type="number" min="5" max="10" id="playerBet" value="10">
    <br>
    <label for="playerChoice">Pick your Number</label>
    <input type="number" min="1" max="10" id="playerChoice" value="1">
  </form>

  <p>
    <!--RB: When you learn jQuery, you will attach listeners to specific HTML elements, i.e. buttons -->
    <!--RB: $(button).click(function(e){ // do something})-->
    <!--RB: <button>Go!</button>-->
    <!--RB: https://api.jquery.com/click/-->
    <button onclick="bet()">Go!</button>
  </p>

  <div id="betInfo">

  </div>


  <!-- end html -->

  <script>

  // player enters bet and choice
  // do one comparison check (set earnings)
  // if enough earnings, enter bet and choice again, on enter, run comparison again, otherwise, game over

  var playerEarnings = 100;
  // Just curious what you used $
  var $info = $("#betInfo");

  function bet() {
    var playerBet = $('#playerBet').val();
    var playerChoice = $("#playerChoice").val();
    var computerChoice = Math.floor((Math.random() * 10) + 1);

    console.log(computerChoice);
    $info.empty();
    $info.append("<p>Your Number: " + playerChoice + "</p>")
    $info.append("<p>Computer's Number: " + computerChoice + "</p>")

    // RB: Explain the difference between == and === comparison operator
    if (playerChoice == computerChoice){
      $info.append("<p>>>You won this round!<<</p>");
      // alert("You won this round! Go again");
      // RB: Why do you have to use parseInt?
      playerEarnings += parseInt(playerBet);
      console.log(playerEarnings);
    }
    else if (playerChoice - computerChoice == 1 || playerChoice - computerChoice == -1){
      // RB: How would you handle these messages if you plan to share them in other parts
      $info.append("<p>>>Very close, you neither won nor lost your bet<<</p>");
      // alert("Very close, you neither won or lost your bet. Try again");
      playerEarnings;
      console.log(playerEarnings);
    }
    else{
      $info.append("<p>>>Too bad, you lost your bet<<</p>");
      // alert("Too bad, you lost your bet");
      // RB: No parseInt here?
      playerEarnings -= playerBet;
      console.log(playerEarnings);
    }
    if (playerEarnings <= 0) {
      alert("Game Over!");
      // RB: Pretty neat, how else could you have done this?
      location.reload();
    }
    // RB: Let's look at another way of doing this, ES6 style
    // $info.append(`<p>Your remaining earnings: ${playerEarnings} </p>`)
    // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals
    $info.append("<p>Your remaining earnings: " + playerEarnings + "</p>")
  }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="jquery-3.1.0.js"></script>
	</head>

	<body>
	<h1>Place Your Bets!</h1>
	<!--RB: You can remove this extra space, lint takes care of this, http://eslint.org/-->

	<form id="myForm">
	<label for="playerBet">Place your bet $</label>
	<input type="number" min="5" max="10" id="playerBet" value="10">
	<br>
	<label for="playerChoice">Pick your Number</label>
	<input type="number" min="1" max="10" id="playerChoice" value="1">
	</form>

	<p>
	<!--RB: When you learn jQuery, you will attach listeners to specific HTML elements, i.e. buttons -->
	<!--RB: $(button).click(function(e){ // do something})-->
	<!--RB: <button>Go!</button>-->
	<!--RB: https://api.jquery.com/click/-->
	<button onclick="bet()">Go!</button>
	</p>

	<div id="betInfo">

	</div>



	<!-- end html -->

	<script>

	// player enters bet and choice
	// do one comparison check (set earnings)
	// if enough earnings, enter bet and choice again, on enter, run comparison again, otherwise, game over

	var playerEarnings = 100;
	// Just curious what you used $
	var $info = $("#betInfo");

	function bet() {
	var playerBet = $('#playerBet').val();
	var playerChoice = $("#playerChoice").val();
	var computerChoice = Math.floor((Math.random() * 10) + 1);

	console.log(computerChoice);
	$info.empty();
	$info.append("<p>Your Number: " + playerChoice + "</p>")
	$info.append("<p>Computer's Number: " + computerChoice + "</p>")

	// RB: Explain the difference between == and === comparison operator
	if (playerChoice == computerChoice){
	$info.append("<p>>>You won this round!<<</p>");
	// alert("You won this round! Go again");
	// RB: Why do you have to use parseInt?
	playerEarnings += parseInt(playerBet);
	console.log(playerEarnings);
	}
	else if (playerChoice - computerChoice == 1 \|\| playerChoice - computerChoice == -1){
	// RB: How would you handle these messages if you plan to share them in other parts
	$info.append("<p>>>Very close, you neither won nor lost your bet<<</p>");
	// alert("Very close, you neither won or lost your bet. Try again");
	playerEarnings;
	console.log(playerEarnings);
	}
	else{
	$info.append("<p>>>Too bad, you lost your bet<<</p>");
	// alert("Too bad, you lost your bet");
	// RB: No parseInt here?
	playerEarnings -= playerBet;
	console.log(playerEarnings);
	}
	if (playerEarnings <= 0) {
	alert("Game Over!");
	// RB: Pretty neat, how else could you have done this?
	location.reload();
	}
	// RB: Let's look at another way of doing this, ES6 style
	// $info.append(`<p>Your remaining earnings: ${playerEarnings} </p>`)
	// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals
	$info.append("<p>Your remaining earnings: " + playerEarnings + "</p>")
	}
	</script>
	</body>
	</html>