Project: Guess The Number Game

Now you've learned something about the theory of JavaScript and what you can do with it, we will give you an idea of what the process of creating a simple JavaScript application is like by guiding you through a practical tutorial. In the last practice exercise, you'll build up a simple Guess the Number game step by step. The game uses "variables", "conditionals", "functions", "events", and "loops".

It is essential to practice "reading" a lot of code and running it when learning a new language. In addition, reading well-written code helps you write well-structured code. Don't worry about knowing events and built-in objects such as Math; we'll cover them in more detail in another course. This is a practice exercise, and if you can't get the game to work, check it against the source code.

Adding Variables

 

Let's get started. First of all, add the following lines inside your <script> element:

let randomNumber = Math.floor(Math.random() * 100) + 1;/span>

const guesses = document.querySelector('.guesses');
 const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');

 const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');

let guessCount = 1;
let resetButton;



This section of the code sets up the variables and constants we need to store the data our program will use. Variables are basically containers for values (such as numbers, or strings of text). You create a variable with the keyword let (or var) followed by a name for your variable (you'll read more about the difference between the keywords in a future article). Constants are used to store values that are immutable or can't be changed and are created with the keyword const. In this case, we are using constants to store references to parts of our user interface; the text inside some of them might change, but the HTML elements referenced stay the same.

You can assign a value to your variable or constant with an equals sign (=) followed by the value you want to give it.

In our example:

  • The first variable — randomNumber — is assigned a random number between 1 and 100, calculated using a mathematical algorithm.
  • The first three constants are each made to store a reference to the results paragraphs in our HTML, and are used to insert values into the paragraphs later on in the code (note how they are inside a <div> element, which is itself used to select all three later on for resetting, when we restart the game):

     

    <div class="resultParas"> <p class="guesses"></p> <p class="lastResult"></p> <p class="lowOrHi"></p> </div>


  • The next two constants store references to the form text input and submit button and are used to control submitting the guess later on.

     

    <label for="guessField">Enter a guess: </label>
     <input     type="text" id="guessField" class="guessField">
     <input     type="submit" value="Submit guess" class="guessSubmit">


  • Our final two variables store a guess count of 1 (used to keep track of how many guesses the player has had), and a reference to a reset button that doesn't exist yet (but will later).