Build a simple clicker "game" that makes use of React, props, and state!
-
Fork and clone this repository.
-
Navigate to the cloned repository's directory on your command line. Then, run the following command:
npm install
This will install the libraries needed.
-
Open up the repository in VSCode. Follow the instructions below to complete the Lab.
-
Deploy this application to Netlify and add the link to your netlify site below:
You will be building an application that is similar to popular "clicker" games. The game has the following rules:
- Clicking the "+X" button will increase the score by
X
. The value ofX
starts at 1. - If the user has at least 10 points and clicks the button "Pay 10 points to change from +X to +Y", the value of
X
will increase by 1. For example, at the beginning of the game the incrementor will be "+1". If you pay 10 points, the incrementor will change to "+2". - If the user doesn't have 10 points but clicks the button "Pay 10 points to change from +X to +Y", an alert message will say "You can't afford that!"
- Once the user has accumulated 100 points, the game shows "You Win!" and allows the player to restart the game.
The following is a list of more detailed requirements. As always, check the tests to see exactly what is being tested.
- Display the current score to the user, starting from a score of
0
- Use the exact text:
Current Score:
followed by the score
- Use the exact text:
- Clicking a button increments the score by one
- The button text should have the exact text:
+1
- The button text should have the exact text:
- Have a button where the user can spend
10
points to increase the value of each click by1
- The button should have the exact text:
Pay 10 points to change from +1 to +2
- Display an
alert
with the exact textYou can't afford that!
if the user doesn't have enough points to spend - If the user has enough points, reduce the score by 10, and add
1
to points you add to your score each time you click the button. - The button text should change as well, for example from
+1
to+2
- The pay button text should also update, for example from
Pay 10 points to change from +1 to +2
toPay 10 points to change from +2 to +3
- The button should have the exact text:
- When the user has
100
or more points, display a victory screen- There should be an
<h2>
element with the exact textYou Win!
- There should be a button with the text
Play again?
(including the question mark)- Clicking on this button starts the game over again with a score of 0, a
+1
button, etc.
- Clicking on this button starts the game over again with a score of 0, a
- Keep the user's score on the screen
- Do not show the buttons to add to the score or pay points.
- There should be an