title: Coin Flip HTML / Javascript | (Help)
body: <p>I've tried to make my code work with the example below but after multiple hours of trying I'm giving up... Could someone please help me put this all together so it will work fine?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var result,userchoice;
  function resetAll(){
      var resetHTML = '&lt;div class="tail"&gt;&lt;img src="coin_F.png" /&gt;&lt;/div&gt;&lt;div class="head"&gt;&lt;img src="coin_G.png" /&gt;&lt;/div&gt;';
      setTimeout(function(){
          $('.coinBox').fadeOut('slow',function(){
              $(this).html(resetHTML)
          }).fadeIn('slow',function(){
              $('#btnFlip').removeAttr('disabled');
          });
      },2500);
  }
  // Checking User Input
  $(document).on('change','#userChoice', function(){
      userchoice = $(this).val();
      if(userchoice == "") {
          $(this).parent('p').prepend("&lt;span class='text text-danger'&gt;Please select a coin side to play the game&lt;/span&gt;")
          $('#btnFlip').attr('disabled','disabled');
      } else {
          /**/
          $('#btnFlip').removeAttr('disabled');
          $(this).siblings('span').empty();
      }
      return userchoice;
  });
  // Final result declaration
  function finalResult(result,userchoice){
      var resFormat = '&lt;h3&gt;';
      resFormat += '&lt;span class="text text-primary"&gt;You choose : &lt;u&gt;'+userchoice+'&lt;/u&gt;&lt;/span&gt; |';
      resFormat += '&lt;span class="text text-danger"&gt; Result : &lt;u&gt;'+result+'&lt;/u&gt;&lt;/span&gt;';
      resFormat += '&lt;/h3&gt;';
      var winr = '&lt;h2 class="text text-success" style="color: #49DF3E;"&gt;You Won!!&lt;/h2&gt;';
      var losr = '&lt;h2 class="text text-danger" style="color: #c34f4f;"&gt;You Lost...&lt;/h2&gt;';
      if(result == userchoice){
          $('.coinBox').append(resFormat+winr)
      } else{
          $('.coinBox').append(resFormat+losr)
      }
  }
  // Button Click Actions
  $(document).on('click','#btnFlip',function() {
      if($('#userChoice').val() == "") return;
      var flipr = $('.coinBox&gt;div').addClass('flip');
      var number = Math.floor(Math.random()*2);
      $(this).attr('disabled','disabled');
      setTimeout(function() {
          flipr.removeClass('flip');
          //result time
          if(number) {
              result = 'Global';
          //alert('Head = '+number);
              $('.coinBox').html('&lt;img src="coin_G.png" /&gt;&lt;h3 class="text-primary"&gt;Global&lt;/h3&gt;');
              finalResult(result,userchoice);
              resetAll();
          } else {
              result = 'Fortune';
          //alert('Tail = '+number);
              $('.coinBox').html('&lt;img src="coin_F.png" /&gt;&lt;h3 class="text-primary"&gt;Fortune&lt;/h3&gt;');
              finalResult(result,userchoice);
              resetAll();
          }
      },2000);
      return false;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper 
  {
      width: 100%;
      height: auto;
      min-height: 500px;
  }
  
  .btn
  {
      width: 12%;
      background-color: #c34f4f;
      color: white;
      padding: 14px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 22px;
  }
  
  .btn:hover
  {
      background-color: #A64242;
  }
  
  input[type=submit]:hover {
      background-color: #A64242;
  }
  
  .container
  {
      padding: 50px 0;
      text-align: center;
  }
  
  h1
  {
      margin-bottom: 100px;
  }
  
  .head
  {
      margin-top: -205px;
  }
  
  .flip img{animation: flipIt 0.5s linear infinite;}
  .head img
  {
      animation-delay: 0.25s;
  }
  
  @keyframes flipIt
  {
      0%{width: 0px;
          height: 200px;}
      25%{width: 200px;
          height: 200px;}
      50%{width: 0px;
          height: 200px;}
      100%{width: 0px;
          height: 200px;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="wrapper"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;h1&gt;Coin Flip | &lt;span&gt;Global or Fortune&lt;/span&gt;&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;!--blank--&gt;
                  &lt;div class="col-lg-4"&gt;&lt;/div&gt;
                  &lt;!--coin--&gt;
                  &lt;div class="col-lg-4"&gt;
                      &lt;div class="coinBox"&gt;
                          &lt;div class="tail"&gt;
                              &lt;img src="coin_F.png" /&gt;
                          &lt;/div&gt;
                          &lt;div class="head"&gt;
                              &lt;img src="coin_G.png" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!--user form elements--&gt;
                  &lt;div class="col-lg-4 text-left"&gt;
                          &lt;p&gt;
                          &lt;div class="form-control"&gt;
                            &lt;button name="Global" id="userChoice"&gt;Global&lt;/button&gt;
                            &lt;button name="Fortune" id="userChoice"&gt;Fortune&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;p&gt;
                              &lt;button class="btn btn-lg btn-primary" id="btnFlip" disabled&gt;Flip It&lt;/button&gt;
                          &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to use this example but couldn't get it to work: <code>https://jsfiddle.net/8jw1ogLd/</code></p>