Andsbf/bet_game.html

## bet_game.html
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Bet game</title>
  <meta name="description" content="Bet gamed">
  <meta name="author" content="Anderson">
</head>

<body>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Bet Game</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="http://getbootstrap.com/examples/starter-template/starter-template.css">

  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bet Game</a>
        </div>


        <!-- <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse --> -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Make your bet!!</h1>
        <p class="lead">Your money: $<span id='money'></span> </p>
        <p class="text-info" id='bank_money'></p>
        <p class="text-info" id='info_result'></p>

        <div class="form" style="width: 500px; margin: auto">
          <div class="form-group">
            <label class="sr-only" for="bet_value">bet_value</label>
            <div class="input-group">
              <div class="input-group-addon">$</div>
              <input type="text" class="form-control" id="bet_value" placeholder="Bet Value Amount (in dollars)">
              <div class="input-group-addon"></div>
            </div>
            <label class="sr-only" for="bet_guess">bet_guess</label>
            <div class="input-group">
              <div class="input-group-addon">?</div>
              <input type="text" class="form-control" id="bet_guess" placeholder="Guess a Number(1..10)">
              <div class="input-group-addon"></div>
            </div>
          </div>
          <button class="btn btn-primary" id="make_bet">Bet</button>
          <button class="btn btn-primary hidden" id="restart_btn">Restart Game</button>
        </div>
      </div>
    </div><!-- /.container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="scripts.js"></script>

  </body>
</html>

## scripts.js
$(document).ready(function(){
  var money = 20;
  var rightNumber;
  var bet_value ;
  var bet_guess ;
  var money_balance;


  $('#money').text(money)
  $('#bank_money').text('$'.repeat(money))

  $("#make_bet").on('click',function(){

    rightNumber = Math.floor((Math.random() * 10) + 1);

    bet_guess = parseInt($('#bet_guess').val(),10);
    bet_value = parseInt($('#bet_value').val(),10);

    if (bet_value > money) return alert("HEYYY, you can't bet more money than you have");

    if (isNaN(bet_value)) bet_value = 0;

    switch(bet_guess) {
      case rightNumber:
        money += bet_value * 2;
        msg = "Right on! the right number was: " + rightNumber ;
        break;
      case (rightNumber + 1):
      case (rightNumber - 1):
        msg = "Close, you didn't lose your money, the right number was:" + rightNumber ;
        break;
      default:
        money -= bet_value;
        msg = "better luck next time the right answer was : " + rightNumber;
    };
    $('#info_result').text(msg);
    $('#money').text(money);
    money <= 0 ? $('#bank_money').text(String.fromCharCode(9785)) : $('#bank_money').text('$'.repeat(money)) ;

    money_balance = parseInt($('#money').text(),10);

    if (money_balance <= 0) {
      $('#make_bet').addClass('hidden');
      $('#info_result').text('Looks like you have loose all your money');
      $('#restart_btn').attr('class', 'btn btn-primary');
    };
  });

 $("#restart_btn").on('click',function(){
    money = 20;
    $('#money').text(money);
    $('#bank_money').text('$'.repeat(money))
    $('#info_result').text('Game restarted, try again!');
    $('#restart_btn').attr('class', 'btn btn-primary hidden');
    $('#make_bet').removeClass( "hidden" )
   });


});
	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Bet game</title>
	<meta name="description" content="Bet gamed">
	<meta name="author" content="Anderson">
	</head>

	<body>

	</body>
	</html>



	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="../../favicon.ico">

	<title>Bet Game</title>

	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

	<!-- Custom styles for this template -->
	<link rel="stylesheet" href="http://getbootstrap.com/examples/starter-template/starter-template.css">

	</head>

	<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">Bet Game</a>
	</div>


	<!-- <div id="navbar" class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#contact">Contact</a></li>
	</ul>
	</div><!--/.nav-collapse --> -->
	</div>
	</nav>

	<div class="container">

	<div class="starter-template">
	<h1>Make your bet!!</h1>
	<p class="lead">Your money: $<span id='money'></span> </p>
	<p class="text-info" id='bank_money'></p>
	<p class="text-info" id='info_result'></p>

	<div class="form" style="width: 500px; margin: auto">
	<div class="form-group">
	<label class="sr-only" for="bet_value">bet_value</label>
	<div class="input-group">
	<div class="input-group-addon">$</div>
	<input type="text" class="form-control" id="bet_value" placeholder="Bet Value Amount (in dollars)">
	<div class="input-group-addon"></div>
	</div>
	<label class="sr-only" for="bet_guess">bet_guess</label>
	<div class="input-group">
	<div class="input-group-addon">?</div>
	<input type="text" class="form-control" id="bet_guess" placeholder="Guess a Number(1..10)">
	<div class="input-group-addon"></div>
	</div>
	</div>
	<button class="btn btn-primary" id="make_bet">Bet</button>
	<button class="btn btn-primary hidden" id="restart_btn">Restart Game</button>
	</div>
	</div>
	</div><!-- /.container -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script src="scripts.js"></script>

	</body>
	</html>
	$(document).ready(function(){
	var money = 20;
	var rightNumber;
	var bet_value ;
	var bet_guess ;
	var money_balance;


	$('#money').text(money)
	$('#bank_money').text('$'.repeat(money))

	$("#make_bet").on('click',function(){

	rightNumber = Math.floor((Math.random() * 10) + 1);

	bet_guess = parseInt($('#bet_guess').val(),10);
	bet_value = parseInt($('#bet_value').val(),10);

	if (bet_value > money) return alert("HEYYY, you can't bet more money than you have");

	if (isNaN(bet_value)) bet_value = 0;

	switch(bet_guess) {
	case rightNumber:
	money += bet_value * 2;
	msg = "Right on! the right number was: " + rightNumber ;
	break;
	case (rightNumber + 1):
	case (rightNumber - 1):
	msg = "Close, you didn't lose your money, the right number was:" + rightNumber ;
	break;
	default:
	money -= bet_value;
	msg = "better luck next time the right answer was : " + rightNumber;
	};
	$('#info_result').text(msg);
	$('#money').text(money);
	money <= 0 ? $('#bank_money').text(String.fromCharCode(9785)) : $('#bank_money').text('$'.repeat(money)) ;

	money_balance = parseInt($('#money').text(),10);

	if (money_balance <= 0) {
	$('#make_bet').addClass('hidden');
	$('#info_result').text('Looks like you have loose all your money');
	$('#restart_btn').attr('class', 'btn btn-primary');
	};
	});

	$("#restart_btn").on('click',function(){
	money = 20;
	$('#money').text(money);
	$('#bank_money').text('$'.repeat(money))
	$('#info_result').text('Game restarted, try again!');
	$('#restart_btn').attr('class', 'btn btn-primary hidden');
	$('#make_bet').removeClass( "hidden" )
	});


	});