https://github.com/epictetusz1/memory-game

A Memory Game project, to learn and implement: React, Hooks, Functional Components and Lifecycle methods
https://github.com/epictetusz1/memory-game

authors books react reacthooks reactjs theodinproject useeffect

Last synced: 9 days ago
JSON representation

A Memory Game project, to learn and implement: React, Hooks, Functional Components and Lifecycle methods

• Host: GitHub
• URL: https://github.com/epictetusz1/memory-game
• Owner: EpictetusZ1
• Created: 2021-12-11T17:44:05.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-13T21:53:36.000Z (about 3 years ago)
• Last Synced: 2024-11-06T08:13:25.642Z (about 2 months ago)
• Topics: authors, books, react, reacthooks, reactjs, theodinproject, useeffect
• Language: JavaScript
• Homepage: https://epictetusz1.github.io/memory-game/
• Size: 1.96 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Memory Game  

## Who's That Author?

### Test your memory - Beat the game and find out who all the authors are

An assignment from [The Odin Project](https://www.theodinproject.com/) to learn and practice:

- React Hooks:

  - ```useState()```

  - ```useEffect()```

- General React concepts and implementation

### Things I learned:

- The difference between ```e.target```  and ```e.currrentTarget``` and why that matters in React ( it's because React does not Propagate, it goes straight to Bubbling.)

- Updating state in Functional Components with Arrays, Objects, and normal variables as the state.

- The importance of passing a callback (```prevState => ```) when calling ```useEffect()```

### Functionality:

- Show rules before game starts, take away rules once playing.

- Shuffle cards on click

- Alert to game over

- Show current score and High-score

- You get to find out the authors names if you can beat the game, good luck!

#### Technologies Used:

- HTML, CSS

- React.js

- CSS Modules

- Webpack

- Create React App - A npm package: ```npm create-react-app```