Last active
August 29, 2015 14:08
-
-
Save angelorubin/b3a5bbf68e3af869f930 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Acerte o Número</title> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> | |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script> | |
| $(function(){ | |
| // Gerando número aleatório entre 0 e 100 | |
| var numSecret = 50; // Math.floor((Math.random() * 100) + 0); | |
| $('.identical, .greater, .lower, .attempts').hide(); | |
| var numAttempts = 0; | |
| $('.btn').on('click', function(event){ | |
| event.preventDefault(); | |
| var numChosen = parseFloat($('.numChosen').val()); | |
| if(numChosen >= 0 && numChosen <= 100) { | |
| if(numChosen === numSecret){ | |
| numAttempts++; | |
| $('.numAttempts').text(numAttempts); | |
| $('.attempts, .identical').fadeIn('slow'); | |
| $('.numSecret').text(numSecret); | |
| $('.greater, .lower').hide(); | |
| $('.numChosen').val(''); | |
| numAttempts = 0 | |
| } | |
| if(numChosen > numSecret){ | |
| numAttempts++; | |
| $('.numAttempts').text(numAttempts); | |
| $('.attempts, .greater').fadeIn('slow'); | |
| $('.lower, .identical').hide(); | |
| } | |
| if(numChosen < numSecret){ | |
| numAttempts++; | |
| $('.numAttempts').text(numAttempts); | |
| $('.attempts, .lower').fadeIn('slow'); | |
| $('.greater, .identical').hide(); | |
| } | |
| } | |
| else { | |
| alert('O número precisa estar entre 0 e 100.'); | |
| $('.numChosen').val(''); | |
| $('.identical, .greater, .lower').hide(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-7 col-md-offset-5"> | |
| <h4>Digite um número entre 0 e 100</h4> | |
| <form class="form-horizontal"> | |
| <div class="form-group col-lg-12"> | |
| <input type="text" class="numChosen input-sm"> | |
| <input type="button" class="btn btn-primary btn-sm" value="Tentar"> | |
| </div> | |
| <div class="form-group col-lg-12"> | |
| <p class="attempts">Você tentou <span class="numAttempts badge"></span> vez(es).</p> | |
| </div> | |
| <div class="form-group col-lg-12"> | |
| <span class="alert alert-success identical input-sm"> | |
| PARABÉNS, o número secreto é <span class="numSecret badge"></span> | |
| </span> | |
| <span class="alert alert-danger greater input-sm"> | |
| O número escolhido é <span class="badge">MAIOR</span> do que o secreto. | |
| </span> | |
| <span class="alert alert-danger lower input-sm"> | |
| O número escolhido é <span class="badge">MENOR</span> do que o secreto. | |
| </span> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment