title: if else loops and jquery not working in hot or cold app
body: <p>I wrote JavaScript for a hot or cold app and I'm having issues with the loops that check if the user's guess is hot of cold returning text to the feedback id. The function that resets everything when the "New Game" button is clicked is also not working. Let me break it down:</p>
  
  <ol>
  <li><p>In the checkGuess function, the second if..else loop that returns the apprioriate text ("Hot" "Cold" etc.) into the feedback id is not working after the first guess is entered. For any subsequent guesses, the text in the feedback ID does not change. </p></li>
  <li><p>The function to re-set the game when you click the new game button is not working. I do not want to refresh the page to re-set the game. Currently, nothing happens when you click the new game button.</p></li>
  </ol>
  
  <p>HTML and JS code is below. I also have a codepen here with CSS: <a href="http://codepen.io/elisamarie/pen/grXdJN" rel="nofollow">http://codepen.io/elisamarie/pen/grXdJN</a></p>
  
  <p>HTML</p>
  
  <pre><code>        &lt;header&gt; &lt;!--Header --&gt;
  
              &lt;!-- Top Navigation --&gt;
              &lt;nav&gt; 
                  &lt;ul class="clearfix"&gt;
                      &lt;li&gt;&lt;a class="what" href="#"&gt;What ?&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="new" href="#"&gt;+ New Game&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  
              &lt;!-- Modal Information Box --&gt;
              &lt;div class="overlay" id="modal"&gt;
                  &lt;div class="content"&gt;
                      &lt;h3&gt;What do I do?&lt;/h3&gt;
                      &lt;div&gt;
                          &lt;p&gt;This is a Hot or Cold Number Guessing Game. The game goes like this: &lt;/p&gt;
                          &lt;ul&gt;
                              &lt;li&gt;1. I pick a &lt;strong&gt;random secret number&lt;/strong&gt; between 1 to 100 and keep it hidden.&lt;/li&gt;
                              &lt;li&gt;2. You need to &lt;strong&gt;guess&lt;/strong&gt; until you can find the hidden secret number.&lt;/li&gt;
                              &lt;li&gt;3. You will &lt;strong&gt;get feedback&lt;/strong&gt; on how close ("hot") or far ("cold") your guess is.&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;p&gt;So, Are you ready?&lt;/p&gt;
                          &lt;a class="close" href="#"&gt;Got It!&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- logo text --&gt;
              &lt;h1&gt;HOT or COLD&lt;/h1&gt;
  
          &lt;/header&gt;
  
          &lt;section class="game"&gt; &lt;!-- Guessing Section --&gt;
  
              &lt;h2 id="feedback"&gt;Make your Guess!&lt;/h2&gt;
  
              &lt;form&gt;
                  &lt;input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/&gt;
                  &lt;input type="submit" id="guessButton" class="button" name="submit" value="Guess"/&gt;
              &lt;/form&gt;
  
              &lt;p&gt;Guess #&lt;span id="count"&gt;0&lt;/span&gt;!&lt;/p&gt;
  
              &lt;ul id="guessList" class="guessBox clearfix"&gt;
  
              &lt;/ul&gt;
  
          &lt;/section&gt;
          &lt;!-- JavaScript --&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>var number = generateNumber();
  var count = 0;
  
  // return generated random number
  function generateNumber() {
    return Math.floor(Math.random() * 100) + 1;
  }
  
  // returning user's guess
  function getGuess() {
      return document.getElementById('userGuess').value;
  }
  
  // validate user's guess and return hot or cold
  function checkGuess() {
    var guess = getGuess(); 
    var difference = 0;
  
    console.log(guess);
  
    if (guess === number) {
      return $("#feedback").text("You win!"); // if guess is the same as random number, you win!
    } else if (guess &gt; number) {
      difference = guess - number; // calculate difference if guess is great than number
    } else if (guess &lt; number) {
      difference = number - guess; // calculate different if guess is less than number
    }
  
    console.log(difference);
  
    if (difference &gt;= 1 &amp;&amp; difference &lt;= 5) {
      $("#feedback").text("On fire!"); // if calculated difference is 1-5 away from guess, you're close
    } else if (difference &gt; 5 &amp;&amp; difference &lt;= 15) {
      $("#feedback").text("Hotter!"); // if diff btwn 6 and 15, hotter
    } else if (difference &gt; 15 &amp;&amp; difference &lt;= 30) {
      $("#feedback").text("Hot"); // if between 15 and 30, hot
    } else if (difference &gt; 30 &amp;&amp; difference &lt;= 45) {
      $("#feedback").text("Warm"); // if between 30 and 45, warm
    } else if (difference &gt; 45 &amp;&amp; difference &lt;= 65) {
      $("#feedback").text("Cold"); // if between 45 and 65, cold
    } else if (difference &gt; 65) {
      $("#feedback").text("Freezing"); // if difference is over 65, freezing
    }
  }
  
  // count number of guesses
  function countGuess() {
    count++; // increse count by 1
    $('#count').text(count); // add text to #count id
  }
  
  
  
  $(document).ready(function() {
  
    /*--- Display information modal box ---*/
    $(".what").click(function() {
      $(".overlay").fadeIn(1000);
  
    });
  
    /*--- Hide information modal box ---*/
    $("a.close").click(function() {
      $(".overlay").fadeOut(1000);
    });
  
    // start new game
  
    $("#guessButton").click(function() { //when guess button is clicked do these things
      var guess = getGuess(); // define variable and guess user enters
      // var number = generateNumber(); //  can you define a variable as a function???
      var listGuess = '&lt;li&gt;' + guess + '&lt;/li&gt;'; // listGuess is user's guess with some list tags
      $('#guessList').append(listGuess); // add user's guess to the list
      $('#userGuess').val(''); // empty user guess field so they can add a new guess
      countGuess(); // run countguess function
      checkGuess(); // pass user's guess through checkguess function
    });
  
  
    // reset game
  
    $(".new").on('click', function(e) {// when new game button is clicked do the following
      e.preventDefault();
      // Empty Guesses
      $('#guessList').innerHTML = ""; // empty listguess field
      // Reset Guess number on page
      $('#count').text = "0";
      //Reset Guess Count in javascript
      count = 0;
      // Feedback needs to equal Guess
      $('#feedback').innerHTML = "Make your Guess!";
      // Generate New Random Number
      number = generateNumber(); //generate a new random number
    });
  
  });
  </code></pre>