-
Notifications
You must be signed in to change notification settings - Fork 17
Expand file tree
/
Copy pathreact2.txt
More file actions
19 lines (16 loc) · 2.19 KB
/
Copy pathreact2.txt
File metadata and controls
19 lines (16 loc) · 2.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
**Make sure to complete both the CodePen Collection and the Create React App**
In a Codepen Collection (You do not have to make these challenges in Codepen but they have be turned in Via CodePen.)
VERY EASY: Inside of your ‘App’ class ‘render’ method, return a div with your basic information for example name, number, date of birth and etc. This div should be hard-coded to prepare for the Medium Challenge.
EASY: Create a ‘constructor’ that takes in ‘props’ , call the ‘super()’ method, and set ‘this.state’ to an empty object inside of the ‘App’ class. Inside of ‘this.state’ create a ‘person’ property and set it to an empty object
MEDIUM: Replace all of the hard-coded with data from ‘this.state.person’ in the constructor. Then take the returned the ‘div’ and create a component, pass state into it and import it as ‘BasicInfo’. (This challenge should not change the look of the page)
HARD: Now that you have a basic react app to display one person’s worth of information, now modify the app to iterate over a array of people’s basic information, while still keeping the new list of contacts in the top-level of state. (Optional: add styling to space out each person’s info)
In Create React App
Create a guessing game app in React.
When the page loads, display a header that says Start Game and underneath that have two buttons. One button should read Standard and the other should read Expert. If the user clicks Standard, randomly generate a number between 1 and 10 for the user to guess. Expert should be between 1 and 100. Once either of these buttons is clicked, the game starts.
There should be an input for the user to guess a number and submit.
There should be a place that shows how many guesses they have made.
Once the user guesses, tell them whether their guess was too high or too low.
Once the user wins, display a message telling them that they have won and how many guesses it took.
Keep track of the least number of tries it takes the user to win. This is the "High Score". If the user beats their high score, congratulate them.
Keep separate track of the high score for the standard and expert levels.
Have a reset button if the user gets tired of trying.