Guess the Number
by kirupa (https://www.kirupa.com/about/whatiskirupa.htm) | filed under Coding Exercises (https://www.kirupa.com/codingexercises/index.htm)
At some point in your life, you would have played the classic Guess the Number game. This is a game where one person has a number in their mind. It is up to you to guess what that number is, and let's learn how to play it by...actually playing it! You can play this game below (or open it in a new window (https://www.kirupa.com/codingexercises/examples/guess_the_number.htm)):
Your goal is to guess the number the game has in mind. The rules of this game are straightforward. For every number you guess, if you didn't guess the number correctly, you will be told whether your guess is greater than or less than the actual number the game has in mind. With that information, you make another guess to get closer to the answer.
The idea is that, with each answer on where your guess falls, you can narrow down on the correct answer until you eventually guess the correct answer exactly:
[Image: ] (https://www.kirupa.com/codingexercises/images/answer_guessed_number.png)
Seems like a fun and simple game, right? What you are going to do in this exercise is re-create this game.
Onwards!
Starting Point
The easiest way is to fork the following Codepen pen and start adding your modifications:
See the Pen Coding Exercises Start (https://codepen.io/kirupa/pen/qBYxQpr) by Kirupa Chinnathambi (@kirupa (https://codepen.io/kirupa)) on CodePen (https://codepen.io).
You may want to open the pen in a new window (https://codepen.io/kirupa/pen/qBYxQpr) if you want more space to code your solution or bring up the Console to see the output.
If you prefer developing locally in your favorite code editor (like Visual Studio Code), create a new HTML document and copy/paste the following boilerplate/starting content into it:
Coding Exercises Start
The HTML you see here is just the bare minimum content needed to help us get our web page up and running. The rest of the content is what you will add entirely on your own!
Getting Your Badge
Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to your collection (https://forum.kirupa.com/badges/):
[Image: ] (https://www.kirupa.com/codingexercises/images/guessnumber.png)
To claim it, head over to the forums and respond in the Guess the Number Game topic (https://forum.kirupa.com/t/guess-the-number-game/653698). Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:
[Image: ] (https://www.kirupa.com/codingexercises/images/create_forum_topic.png)
Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.
One Possible Solution
We want to make this a fun learning activity. If you are stuck and need help, please ask on the forums (https://forum.kirupa.com). Please explain your problem in detail and one of the many helpful forum members will help you out.
If you want to see one way of solving this, check out Kirupa's video and article below:
The Approach
Before we write the first line of code, it is helpful to take a step back and think about what is going on in this game. If we start with the UI, the primary elements are the input field where we enter our guess and a scrollable results area below where we see whether:
1. Our guess is correct and the game restarts
2. Our guess is too low
3. Our guess is too high
4. We didn't enter a guess at all and left the input blank
There are some other visual elements like the picture of a hamburger and the game title itself that round out all of the interesting parts that we see:
[Image: ] (https://www.kirupa.com/codingexercises/images/gng_example_200.png)
Digging deeper, beneath the UI is the game logic itself. This is where we have some JavaScript to ensure the number we enter is processed, compared to the answer value, and the appropriate results are generated and displayed in the scrollable results area. Let's turn all of these words and explanations into a working app in the next few sections. The best way for you to learn is to take a moment and try to create this game yourself. Once you have made sufficient progress (or gotten stuck), you can read on and follow along with how I would build this.
Building the App
One way to get started building this app is by focusing on the UI first and then making one's way down tothe game logic. We are going to spice things up a bit and do things differently. The way we are going to start building this app is by starting with the core logic needed to make our game work first. Only after we get the game's core capabilities working will we shift our focus to the UI.
Starting with the Game Logic
If you want to actively following along, create a new HTML document and add the following contents into it:
Guess Number (Tutorial)
Take a moment to look at what this page is doing. Outside of the basic HTML boilerplate content, we have our checkNumber function that checks the value of enteredNumber against numberToGuess:
function checkNumber() {
if (enteredNumber == numberToGuess) {
console.log("You win!");
return;
}
if (enteredNumber < numberToGuess) {
console.log("Your guess is too low!");
}
if (enteredNumber > numberToGuess) {
console.log("Your guess is too high!");
}
}
checkNumber();
For the purposes of what we are doing, the values of enteredNumber and numberToGuess are hardcoded to 15 and 10 respectively. If you run this example in the browser, bring up the Console to see the Your guess is too high! output:
[Image: ] (https://www.kirupa.com/codingexercises/images/console_gtn_high.png)
To test what our game will do for other values, change the value for enteredNumber in our example to other values like 9 or 10 to see our checkNumber function print the other messages to our console. Each time you change the value of enteredNumber in your code editor, you do have to refresh the page to ensure the new value gets picked up. That's the temporary price of starting from a very blank slate!
Adding Richer Messages
From this humble starting point, the first thing we'll do is replace the messages being printed to our console to having the messages show up in our page. To do this, make the following highlighted additions and modifications to our page:
Guess Number (Tutorial)
We added some HTML that will act as the parent for displaying our results, and we created the results value in JavaScript to store a reference to our #results HTML element. We also replaced our console.log statements to print the messages to our HTML element itself. After making these changes, go back to the browser and see what the new changes look like. You will see the results of our guesses appearing in our HTML document (as opposed to the Console):
[Image: ] (https://www.kirupa.com/codingexercises/images/console_gtn_ptag.png)
Notice what I'm doing in the Console. I'm overwriting the numberToGuess variable and calling checkNumber again to run different code paths inside our checkNumber function. This is different than what we did earlier where we changed the value of numberToGuess in code and refreshed the page.
Specifying Numbers via an Input Field
Next, let's add our input field and submit button to allow us to enter our guesses without writing and overwriting the numberToGuess variable directly. This will require making the following changes to our HTML and JavaScript:
Guess Number (Tutorial)