JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Tries: <span class='coinflip_tries'>0</span>
<br>Your money: <b><span class='coinflip_money'></span></b>
<br>How much will you bet? <input class='coinflip_bet' type='number' min='1' value='50'>

<p><button class='coinflip_btn'>Flip!</button>
</p><b>Result:</b> <span class='coinflip_result'></span>

<p>
<div id='divname'>
. <img src="http://atrocity.mysidiahost.com/picuploads/png/53dd9eaf7a9ccc31b481b927a2cbcb4c.png"></div>

JavaScript

$(document).ready(function(){
    // our global variables, which will be changed by the functions. On game, 'money' will be user's money, fetched from mysidia.
    var money = 10000;
    var name = 'naaame';
    var bet = 50; // default bet amount
    var tries = 0; // to count how many tries/plays

    // flipping the coin.
    function toss(){
      // generate a number between 0 and 1.
      var coin = Math.random();
      // check and update the bet value.
      bet = $('.coinflip_bet').val();
     
      // if it was greater than 0.5, yay!
      if (coin > 0.5){
      // double the bet, add it to money.
      var winnings = bet * 2;
      money = money + winnings;
      // update the money span with new amount.
      $('.coinflip_money').text(money);
      // and show message in result span.
    $('#divname').html('<img src="http://atrocity.mysidiahost.com/picuploads/png/dcbc18a889a557c069b94053c94daae5.png">');

      $('.coinflip_result').html('Heads! Congratulations '+name+', you won '+winnings+' Beads. Trent is annoyed at you now.');
      // notice how the JS variable is inserted in the message, between + + ?
      // finally update the tries variable.
      tries = tries + 1;
      $('.coinflip_tries').text(tries);
      }
     
      else if (coin <= 0.5){
      // take away the bet amount from money.
      money = money - bet;
      $('.coinflip_money').text(money);
      // and write losing message.
    $('#divname').html('<img src="http://atrocity.mysidiahost.com/picuploads/png/caafea02b35cfa99852063b84c564eaa.png">');

      $('.coinflip_result').text('Tails! Oh no '+name+'. You lost '+bet+' Beads...');
      // and update flips.
      tries = tries + 1;
      $('.coinflip_tries').text(tries);
      }
     
      // always good to have a backup in case of errors.
      // nothing is updated here.  it's not fair to waste a try if user has limited daily tries.
      else{
    $('#divname').html('<img...