/memory-game

A memory card game created with react as part of the odin project

Primary LanguageJavaScript

Memory Card Game

Project to create a Memory Card Game

Live Demo

Memory Card Game

memory-game

Note: This Website works best with High Resolution Screens (1080p and up). Check the improvements section for future updates.

Features

  • Dynamic dataset - The app supports any custom dataset! Make sure to edit the data.js file and the pictures folder.

  • Dynamic elements - The game currently shows 5 cards at a time, the game will create X cards at a time, where X is the length of the "for" loop in CardContainer

  • Implements hooks

Built with

Technologies

  • JS
  • CSS
  • HTML
  • REACT

Tools

  • Visual Studio Code
  • Linux terminal
  • Git and GitHub
  • ESLint
  • Prettier
  • npm
  • Webpack

Third party code

Outcome

  • Used ES6 Modules for more modular code.
  • Used CSS3 grid and flex to create layout.
  • Used Git and GitHub for project management.
  • Tried to maintain clean code.
  • Cross tested on Firefox and Chromium based browsers.

Improvements

Features I am going to add to this app:

  • Approach a Responsive Web Design(RWD)
  • Add slider to set Max Cards

Summary

What I learned

  • learn to use React
  • learn to use react hooks
  • learn to use useEffect

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

You will need Node.js and npm installed globally on your machine.

Installation

  1. Clone the repo 
    git clone https://github.com/voidchef/memory-game.git
  2. Install NPM packages 
    npm install
  3. Build an app 
    npm run build

Contributing

Contributions, issues, and feature requests are welcome!

Author

👤 voidchef