Skip to content

Instantly share code, notes, and snippets.

@PrimeTimeTran
Created September 10, 2019 02:46
Show Gist options
  • Save PrimeTimeTran/9afab33af11cc39333a6efd2ea650656 to your computer and use it in GitHub Desktop.
Save PrimeTimeTran/9afab33af11cc39333a6efd2ea650656 to your computer and use it in GitHub Desktop.
# Number Guessing Game (Basic)
Congratulations, you're on your way to learning JavaScript. For your final Day 1 assignment, you'll have to build a simple number guessing game.
Doing this assignment will test your ability to use variables, functions, and (optionally, if you're brave!) Arrays. We'll cover Arrays in depth next week, but if you want to try now, go ahead!
## Milestone 0: Draw a Picture
![](https://i.imgur.com/KZVZMOT.png)
Here's a basic drawing of how you'll implement this program. Here is a drawing that was created using an online tool: http://www.draw.io. BUT WAIT! The picture is not complete.
There is one thing missing from this diagram: we need to tell the user if their guess was too low or too high, otherwise our game will be quite difficult. Add that to the diagram so we remember to do this later.
Writing diagrams or sketching pictures will help you as you learn to code. Remember: take a little time to think before coding.
## Milestone 1: Create a new file .js file in your chosen folder
Create a new .js file in your chosen folder. Open the file with Chrome, and open the Chrome Developer Tool (View\Developer\Developer Tools) to see the results display in the console
## Milestone 2: Generate a random number between 1 and 10
Use the `Math.floor`, `Math.random` functions to generate a new random number. Assign that to a variable that you'll use throughout the problem.
**Hints**:
* [How to generate random numbers between a range](https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range)
* [How to generate whole random numbers](https://www.freecodecamp.org/challenges/generate-random-whole-numbers-with-javascript_)
## Milestone 3: Ask for User Guess
![](https://i.imgur.com/F3eVcV7.png)
Pop up a dialog box and ask for the user's first guess. Save the user's guess to a variable (use a nice, descriptive name). Remember: you'll have to convert the input from a String into a Number.
Check the following links for instructions on how to do this:
* [How to prompt user](https://www.dummies.com/web-design-development/javascript/how-to-prompt-the-user-for-input-in-javascript/)
* [How to convert a String to a Number from a prompt](https://stackoverflow.com/a/17907490/396324)
## Milestone 4: Check if the Values are equal
Now you'll have to do a quick check if the values are equal. If the values are equal, we're done - print out a congratulations message. If the values are not equal, we'll have to do a few more steps:
* Tell the user if their guess was too low or too high.
* Increment number of times guessed.
* Check to see if we have guesses.
* Go back to Milestone 3.
Let's start with allowing the user **10 guesses per game**.
Hmm, seems like we need a method here! This will be your major challenge. If you can finish this step, you have mastered the basics of programming.
![](https://www.classroomcapers.co.uk/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/c/t/ctp1804-star-smile-stickers.jpg)
## Milestone 5 (Optional!): Showing past guesses.
It might be hard for the user to remember their previous guesses. To make our game a little easier, every time they guess they should have to say something like:
`Sorry! Your guess of 54 was too high! You have 8 guesses remaining. Your previous guesses were: 12, 15.`
To do this you'll have to save an _array_ of past guesses.
```
let pastGuesses = [];
```
Every time the user guesses, you can `push` into this Array. Or wait, maybe you need to `unshift`? Either is fine, as long as you know the difference.
To print out the array nicely, you'll want to use the `join` method.
Last but not least (this is a big step!) you may have been keeping track of times the user has guessed. You don't need to do that anymore - you can now do what's called a _code refactor_.
Refactoring is when you take old code and rewrite it to be cleaner. You can now _refactor_ your code to use `pastGuesses.length` instead of the other variable you were incrementing.
**HINTS**:
* [Documentation for Push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push)
* [Documentation for Unshift](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)
* [Documentation for Join](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join)
Congratulations! Now you've really done the basics for the program. It's time to submit this to Git! Create a new repository on GitHub and upload your source code, and flag down your teacher to get a high five!
![doggo](http://i.imgur.com/KJhahgP.gif)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment