Author: Riva Davidowski
How to install
- Run
npm i
to install all dependencies - Run
npm start
to run the server
Tools used:
- Axios
- react-animated-css for the Animated Box
- FlexGrid
- Giphy API
About box-challenge
1st phase: Make a web page with a 3x3 grid of boxes, and when you click on a box it turns green. Only one box can be green, though. The boxes should all be the same component.
How do I break this down?
- App is the parent and can instantiate
GridOfBoxes.js
GridOfBoxes.js
will render a grid of boxes- GridOfBoxes needs to know how MANY boxes to render
- GridOfBoxes needs to remember which box is selected
- GridOfBoxes needs to know when a box is clicked on
- The
onClick()
handler will need some parameter to know which box is clicked
- The
Box.js
will render a box- Box needs to know when itself is selected
- Box needs to have behavior when it is clicked on
- Box's click handler will to need some parameter to know which box is clicked
- The box needs to know which box it is
- Box needs to change its class depending on whether it's selected
2nd Phase:
- First, if a box is selected, and clicked on, it should become unselected. In the first phase, the only way to deselect a box is to select a different one.
- Second, if one box (or no box) is selected, clicking on a box will select it.
- Third, if two boxes are selected, clicking on a new box will deselect the previous two boxes.
3rd Phase:
- Make a list of nine colors and randomly assign them to the boxes. When a box is selected, it turns it's own unique color.
- The random assignment should happen upon initial page load. Each a time a box is selected then deselected, the colors remains the same.
4th phase:
This next phase is a fun one!
- First, extend the grid to be 3x4.
- Second, choose 6 random colors and apply each color to two boxes.
- There should be 12 boxes, 6 colors, and each color appears exactly twice.
5th phase:
- Create a counter that tracks box clicks, but only the first of the two. So each time the selection resets, the timer increments.
- Show the counter at the bottom of the page
- When two boxes are selected at the same time, if they are the same color, they become invisible and are no longer clickable.
6th phase:
- It is time to introduce GIFs! When a box selected, it should show a Gif instead of a random color.
- There should be a total of 12 boxes, 6 GIFs, and each GIF appears twice
7th Phase:
- Set the players score to localStorage only when the game has ended
- Find a way to track to the player's bestScore
8th Phase:
- Introduce the search endpoint from Giphy API
- Users should be able to enter in a search term to search for GIFs of their choosing
- This allows the user to customize the memory game
- Show default gifs on page load of your choosing
9th Phase:
- Upon arrival to the game, the user should be given instructions on how to play this game
- Use a modal to show instructions