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

A memory game website
https://github.com/alissanguyen/memory-game

Last synced: about 2 months ago
JSON representation

A memory game website

• Host: GitHub
• URL: https://github.com/alissanguyen/memory-game
• Owner: alissanguyen
• Created: 2022-01-25T06:08:54.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-01T22:57:40.000Z (almost 3 years ago)
• Last Synced: 2024-10-24T18:50:39.194Z (2 months ago)
• Language: JavaScript
• Size: 690 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Memory Game

URL https://memory.alissanguyen.dev

A memory game website.

## Usage

Users should be able to:

- View the optimal layout for the game depending on their device's screen size

- See hover states for all interactive elements on the page

- Play the Memory game either solo or multiplayer (up to 4 players)

- Set the theme to use numbers or icons within the tiles

- Choose to play on either a 6x6 or 4x4 grid

## What to expect

![game-desktop](https://user-images.githubusercontent.com/69443738/150931792-e0940d2e-db6c-4ece-b31c-80c6563949bf.png)

![preview](https://user-images.githubusercontent.com/69443738/150931804-1ad5690f-57dd-4336-bec2-a1daf397f99f.jpg)

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- Mobile-first workflow

- Tab trapping

- Utility classes

### Resources

- [Tab trapping in a modal](https://uxdesign.cc/how-to-trap-focus-inside-modal-to-make-it-ada-compliant-6a50f9a70700) - the tab focus was disappearing and most of the times could not locate as it wasn't in view. This was caused by having modal dialogues which opens and close.

- [Shuffle function](http://stackoverflow.com/a/2450976) - Article for algorithm to randomly shuffle elements

#### Acknowledgments

- Special thanks to [Chamu Mutezva](https://github.com/ChamuMutezva) and [FrontendMentor](https://www.frontendmentor.io/)