<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Guess the Number</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <header>
        <h1>Guess the Number</h1>
        <h2>You have three chances to guess the number I'm thinking of. Your only hint is that it's a number 1-20.</h2>
        <button onclick="guessTheNumber()">Start Guessing</button> 
    </header>

       
<script src="script.js" defer></script>
</body>
</html>
body, h1, h2 {
    padding: 0;
    margin: 0;
    background-color: #9966ff;
}
header {
    margin-top: 10%;    
}

h1, h2 {
    text-align: center;
    padding: 0 30px 0 30px;
    font-family: sans-serif;
}

h1 {
    font-size: 36px;
}

h2 {
    margin-top: 10px;   
    font-size: 20px;
}

button {
    padding: 15px 35px 15px 35px;
    display: block;
    margin: 20px auto;
    border: none;
    background-color: #FFF;
    border-radius: 5px;
    font-size: 20px;
    cursor: pointer;
    transition: ease all 0.3s;
}

button:hover {
    background-color: #000;
    color: #FFF;
    
}
// I created two constants out here for the max number of guesses
// and for the max number for the chosenNumber.
const MAX_ATTEMPTS = 3;
const MAX_NUMBER = 20;

function guessTheNumber() {
  // I moved these variable declarations into this function
  // this is so that that these lines get run every time the function is called
  // this way they get 'reset' everytime a new game starts.
  // How there were before you could only play the game once before refreshing the page
  let userGuessCount = 0; 
  let userGuess = null;
  // Now lets break down this math!
  // First we are doing `Math.random()` which will return us a number between 0 and 1.
  // BUT not including 1 Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
  // But we want there to be MAX_NUMBER of options so we multiply
  // the random number by MAX_NUMBER. So now we have a random number between 0 and MAX_NUMBER
  // Now we use `Math.floor` to make this into an integer. Now we have a integer
  // between 0 and MAX_NUMBER-1, so we add 1 to get for instance 1-20 🎉
  const chosenNumber = Math.floor(Math.random() * MAX_NUMBER) + 1;

  // This is the same while condition that I added in the first example!
  while (userGuess !== chosenNumber && userGuessCount < MAX_ATTEMPTS) {
    userGuess = prompt ('Go ahead a take a guess.');
    userGuessCount++;

    // This next line is the magic sauce to get it NOT to tell you higher/lower
    // after you have guessed to many times. f you made your last guess we will
    // 'fail' this if, and then we won't show the extra alert
    if (userGuessCount < MAX_ATTEMPTS) {
      if (chosenNumber > userGuess) {
        alert('Higher!');
      } else if (chosenNumber < userGuess) { 
      // This is a total nit-pick, but this syntax ^^ with the `else` and the next `if`
      // on the same line is more common than nesting the else like you where, just FYI!
        alert('Lower!');
      }
    }
  }
  
  // Now we know there are only 2 ways for you to have exited that loop ^^
  // either you guessed the number or you took too many guesses. So we check
  // if you won, and if you didn't then we know you guessed too many times!
  if (userGuess == chosenNumber) {
    alert('You won!');
  } else {
    // I decided to print out the answer when you lose, to show we weren't lying to our users 😉
    alert('You failed! The answer was ' + chosenNumber + ' Try again?');          
  }
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.