React JS Assignment implementing game of memory coding

Assignment

Implement the game of memory.

Requirements

1. The game is implemented on codepen.io or jsfiddle.net where a link can be shared. For example, you may use https://jsfiddle.net/boilerplate/react-jsx as a starting point.

2. It is a single-player game.

3. You may use any popular utility libraries and choose to use JavaScript or TypeScript.

4. The game board is always square (N x N) where N is some hard coded value you can pick and

N%2 = 0.

5. The game board is composed of randomly generated pairs.

6. Render the game board in HTML with React.js.

7. The board should be a grid of squares.

8. The grid line width should be 2px (device-independent-pixels).

9. Use UTF-8 characters for the card images. 🌀 () through &#x1F5FF () work well.

10. All cards start face-down, displaying a placeholder UTF-8 character of your choosing.

11. The game starts as soon as the page loads (codepen.io) or after clicking Run (jsfiddle.net)

12. Clicking on a card that is face-down will display the cards UTF-8 character, replacing the face-

down character.

13. At most, two cards can be visible (face-up) at the same time.

14. If two visible cards do not match, fill the grid squares containing the two cards with red.

15. If two visible cards match, fill the grid squares containing the two cards with a color other than

red.

16. Display the background color change for the two cards for two seconds.

17. If the two cards matched, remove the cards and display empty squares.

18. When removing the card background colors, if the cards did not match, change the squares back

to the face-down characters.

19. When removing the card background colors, if the cards did match, remove the characters,

leaving empty squares.

20. When all matches are found, change the entire board to the color used when a match was

found.

21. Meeting the requirements is all that is necessary, but do fix bugs that make the game

unplayable.