title: Guessing Game Help on JavaScript
body: <p>Basically, I created a number guessing game. I have got it to work but I need help on calculating the number of guesses the user has made. This is HTML and JS Code. If the user gets the number in X amount of guesses, I want the game to display "You guessed the number in X amount of guesses!"</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>let targetNum;
  
  targetNum = Math.floor((Math.random() * 100) + 1);
  
  function checkValue() {
    let result = parseInt($(".form-control").val())
  
  
    if (result &gt; targetNum) {
  
      $("#result").css("color", "red");
      $("#result").text("Too High!");
    } else if (result &lt; targetNum) {
  
      $("#result").css("color", "orange");
      $("#result").text("Too Low!");
    } else if (result == targetNum) {
  
      $("#result").css("color", "green");
      $("#result").text("You got it!, the number was " + targetNum);
    } else {
  
      $("#result").text("Please re input with an actual number -_-");
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
    &lt;!--bootstrap --&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;center&gt;
      &lt;div id=text&gt;
  
        &lt;h1&gt;High-Low Game!&lt;/h1&gt;
        &lt;p&gt;Please enter a number between 0 and 100&lt;/p&gt;
        &lt;div class="input-group input-group-lg" id="input"&gt;
          &lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;
          &lt;div class="input-group-prepend"&gt;
            &lt;span class="input-group-text" id="inputGroup-sizing-lg"&gt;Enter Number Here&lt;/span&gt;
          &lt;/div&gt;
          &lt;input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" id="number"&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;button type="button" class="btn btn-info" onclick="checkValue()"&gt;Guess&lt;/button&gt;
  
        &lt;br&gt;
        &lt;h2 id='result'&gt;Make a guess!&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/center&gt;
  
    &lt;!--javascript--&gt;
    &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>