Memory Game Project

Tools

• OS : Windows 10 Home
• language : HTML, CSS, JavaScript
• tools : Atom text editor, Github Desktop, gulp, SASS, gulp-autoprefixer, ESLint

Function

• When click card, it turns blue with animation. (using keyframes animation)
• Compare cards which are clicked.
  • change class to match when they're same
  • turn back cards when they're different
  • each time comparing cards, count updates and shows at moves class
• All cards are matching, Success message will appear.
• Timer checks how many times to matching cards. And when comparing cards takes long, star will be changed.
• Using gulp dev tools such as SASS, gulp-autoprefixer to change CSS, and ESLint to check JavaScript file.

Reference

• W3Schools
• SweetAlert2
• MDN web docs
• gulp-eslint
• gulp-sass

Images