ASSIGNMENT
The Guessing Game Project is a two part project. The first part involves creating a HTML and CSS file and create the elements of the project such as buttons to click, input fields to collect data, and more. Here is the Guessing Game Example Project. The example is a simple implementation of the guessing game. We expect you to create a more personalized and cleaner design! During this section, do not worry about adding any functionality(JavaScript or jQuery) focus on all the HTML and CSS elements of the project! You are allowed (optional) to use Twitter Bootstrap to make CSS styling easy. If you are unfamiliar with Twitter Bootstrap there are a few short Team Treehouse Tutorials Twitter Bootstrap Tutorials - First 3 Sections. If you want more information about the project, read the section below.
GUESSING GAME PROJECT OVERVIEW
The guessing game tests your basic knowledge of JavaScript and jQuery. The game is simple, guess a number between 1-100. The app should respond and indicate if you are 'hot' or 'cold' based on how close you are to the number you are trying to guess.
In order to create this project you are going to need the following files:
HTML File CSS File JS File TIP:The project requirements below are for the complete Guessing Game project. Focus only on creating the HTML/CSS. We will start Part 2 of the project during Part 2 of foundations where your Guessing Game will come to life using JavaScript! The HTML/CSS may change when you start adding JavaScript and jQuery to your Guessing Game in Part 2.
Project Requirements:
When a game begins, there should be a random number generated between 1-100. The user should have an input field where they can submit a guess. After the user submits a guess, indicate whether their guess is 'hot' or 'cold'. Let the user know if they need to guess higher or lower. Allow the user to guess only a certain amount of times. When they run out of guesses let them know the game is over. Feel free to use prompts to get user input on your first version. For the final version of your project, you'll need to create an HTML-based interface for getting user inputs and giving feedback on guesses. Validate inputs that they are real numbers between 1-100. Create a new game button that resets the game. Store all of the guesses and create a way to check if the guess is a repeat. Track the user's previous guess. Let them know if they are getting “hotter” or “colder” based on their previous guess. Create a button that provides the answer (Give me a Hint). Submit the guess by pressing enter or clicking the submit button. After a user guesses a number keep a visual list of Hot and Cold answers that the user can see. Change the background color, add an image, or do something creative when the user guesses the correct answer.