<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 x;
var attempts = 5;
var random = Math.floor((Math.random()*100)+1);
document.getElementById("submit-btn").onclick = function() {
var guess1 = parseInt(document.getElementById("number-input").value, 10);
if(guess1 == random){
document.getElementById("submit-btn").disabled = true;
document.getElementById("number-input").value = "You guessed correctly!";
document.getElementById("number-input").disabled = true;
document.getElementById("hint-btn").disabled = true;
 }else{
attempts -= 1;
x = document.getElementById("number-input").value;
document.getElementById("guesses-remaining").value = attempts;
document.getElementById("number-input").placeholder = "Incorrect.";
document.getElementById("number-input").value = "";
if(attempts == 0){
document.getElementById("submit-btn").disabled = true;
document.getElementById("number-input").disabled = true;
document.getElementById("hint-btn").disabled = true;
document.getElementById("number-input").placeholder = ("You lose. the correct number was " + number);
    }
$("#guesses-remaining").html(attempts);
  }
}
document.getElementById("hint-btn").onclick = function(){
if(x > random){
document.getElementById("number-input").placeholder = "Lower than your previous guess.";
}else{
document.getElementById("number-input").placeholder = "Higher than your previous guess.";
  }
}
document.getElementById("startover-btn").onclick = function(){ 
document.getElementById("submit-btn").disabled = false;
document.getElementById("number-input").disabled = false;
document.getElementById("hint-btn").disabled = false;
document.getElementById("number-input").value = "";
document.getElementById("number-input").placeholder = "Enter a number";
$("#guesses-remaining").html(attempts);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.