JavaScript Number Guessing Game Project

Hosted Project

JavaScript Number Guessing Game Project (Hosted on Github Pages)

Source Files

https://github.com/JS-Beginners/number-guess-game-project(Hosted on Github)

Project Objective

This JavaScript number guessing game project's objective is to code a game where the user must guess a randomly generated number from 1 to 100.

JavaScript Used

• Math.random()
• DOM manipulations
• arrays
• functions
• conditionals

My Personalize Summary

This JavaScript number guessing game project was fun to build. The game that I have hosted on github is slightly different than what the instructor created.

First, I change a lot of the CSS styling. For whatever reason, the instructor styled most of the HTML elements with a left margins and left paddings, which made the elements off-center. I changed this to make the game look much more pleasant to me.

Second, the instructor used a <div> element to wrap the input box, and simply gave the div a class of “form”. This meant that the user had to actually click a button with mouse each time a guess was submitted.

I changed the project so that the input box was wrapped in an HTML form. With this change, the user could simply key in a guess and press the ENTER key or click the submit button. It made the game much more fun to play.

Last, the instructor created a game with values from 1 to 500. I changed my game to use values from 1 to 100. Both games still give the user 10 changes to guess the number.

New Things Learned or Refreshed

Coding as many projects as I have (and learning to debug them) has certainly helped with memory recall.

The first debugging tactic I used was checking up on why code was not getting through when using the line if (NaN === NaN){}. I was tried to check if the condition were true, which I know it was.

Then I remembered (from my most recent studies from Tony Alicea's JavaScript Course) that NaN === NaN evaluates to false. So, my code would have never gotten through.

I remembered that if I wanted to check fo NaN, I needed to use the isNaN() built in function.

Learning more about JavaScript's execution context also helped me code this project relatively quickly. I easily determined which variables were accessible to which functions instead of beating myself up, like I would do in the past, when I couldn't find out what was going on.

Time to Code

This project took me about two hours to code the JavaScript functionality completely on my own, having never looked at the instructor's code.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Number Guessing Game Project in action.

Need to see the video solution for this project?

Need to see the video solution for this project? Get Bluelime's JavaScript for Beginners: Create 27 Projects from Scratch Course Now!