<html >
  <head>
    <meta charset="UTF-8">
    <title>Guessing Game - JS 1</title>
    
    
    
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

        <link rel="stylesheet" href="css/style.css">

    
    
    
  </head>

<body class="background">
  <div class="container-fluid">
    <div class="center">
      <!-- Game title -->
      <h1>Guessing Game</h1>
      <p id='helper-text'>Enter a guess from 1-100. Guess right to win a prize!</p>

      <form id="guessing-form">
        <div>
          <!-- Number input box -->
          <input class='hide-me' id="number-input" type="text" placeholder="Enter a guess" autocomplete="off">
          <br>
          <!-- Hint button -->
          <button id="hint-btn" class="btn btn-default hide-me" type="button">Give a hint</button>
          <!-- Submit button -->
          <button id='submit-btn' class="btn btn-lg btn-primary hide-me" type="button">Submit</button>
          <!-- Start Over button -->
          <button id='startover-btn' class="btn btn-default" type="button">Start Over!</button>
        </div>
      </form>
      <div id='prev-guesses' class='hide-me'></div>
      <!-- Remaining guesses -->
      <div class='hide-me'><p>Remaining Guesses:</p><h4 id="guesses-remaining">5</h4></div>
      <div id="prize-image"></div>
    </div>
  </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

        <script src="js/index.js"></script>

    
    
    
  </body>
</html>
.center {
  margin: 0 auto;
  text-align: center;
}

#number-input {
  width: 350px;
  height: 60px;
  text-align: center;
  margin: 1.5%;
}

p, h1, h4, .btn {
  margin: 10px;
}

h1 {
  margin: 50px;
}

.background {
  background-color: ;
}

p {
    font-size: 16px;
  padding-top: 10px;
}

img {
  width: 400px;
  height: 350px;
  margin-top: 50px;
}
var num = Math.floor(Math.random() * 101);
//console.log(num)
var guesses=5;
var prevGuess;
document.getElementById("submit-btn").onclick = function() {
    var playerNum =           parseInt(document.getElementById("number-input").value);
    if (playerNum == num) {
      document.getElementById("number-input").value="Correct!";
      document.getElementById("number-input").disabled= true;
        document.getElementById("submit-btn").disabled= true;
        document.getElementById("hint-btn").disabled= true;
      return;
    }
    else {
      prevGuess=parseInt(document.getElementById("number-input").value);
      //console.log(prevGuess);
      document.getElementById("number-input").placeholder = "Wrong! Try again."
      document.getElementById("number-input").value=""; 
      guesses-=1;
      if (guesses==0) {
        document.getElementById("number-input").placeholder="Game Over. The number was "+num;
        document.getElementById("number-input").disabled= true;
        document.getElementById("submit-btn").disabled= true;
        document.getElementById("hint-btn").disabled= true;
      }
      //console.log(document.getElementById("guesses-remaining").value);
      $("#guesses-remaining").html(guesses);   
      }
     
}

document.getElementById("startover-btn").onclick= function() {
  num = Math.floor(Math.random() * 101);
  //console.log(num);
  guesses=5;
  document.getElementById("number-input").value="";
  document.getElementById("number-input").disabled= false;
    document.getElementById("submit-btn").disabled= false;
    document.getElementById("hint-btn").disabled= false;
  document.getElementById("number-input").placeholder="Enter a guess"
  $("#guesses-remaining").html(guesses);
}

document.getElementById("hint-btn").onclick= function() {
  //console.log(document.getElementById("number-input").value);
  if (num < prevGuess) {
    document.getElementById("number-input").placeholder="The number is less than the number you chose";
  }
  else {
    document.getElementById("number-input").placeholder="The number is greater than the number you chose";
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.