Memory Game ♠️

A memory card game built with Vue.js, Vuex, and Tailwind CSS.

There are 12 paired playing cards that start face down. Use a mouse or keyboard to click two cards to compare. If they match, they are removed from play. If they do not match, they flip back around.

Once all pairs have been found, you can play again.

To play faster, use the "cheat" button to reveal all card faces.

Accessibility ⌨️

All cards are keyboard accessible. Names of cards are revealed to screen readers once flipped.

Design 🎨

I'm using Tailwind CSS for quick utility classes and CSS Grid to layout the cards.

Deployment 🚀

This project is deployed by Netlify to memory-game.coltborg.com.

Project setup 🏗

Before doing anything, make sure dependencies are installed.

yarn install

# or

npm install

Compiles and hot-reloads for development 🧪

To run this app locally, start the local server.

yarn serve

# or

npm serve

Compiles and minifies for production 📦

Used to build for production, in this case Netlify.

yarn build

# or

npm build

Run your unit tests 🔬

yarn test:unit

# or

npm test:unit

If you watch to watch tests while developing.

yarn test:unit --watch

# or

npm test:unit --watch

Lints and fixes files 🧼

Using ESLint to lint and VSCode ESLint extension to fix on save. Using AirBnB and Vue code style guide.

yarn lint

# or

npm lint