The game board consists of sixteen "cards" arranged in a grid. The deck is made up of eight different pairs of cards, each with different symbols on one side. The cards are arranged randomly on the grid with the symbol face down. The gameplay rules are very simple: flip over two hidden cards at a time to locate the ones that match!
Each turn:
The player flips one card over to reveal its underlying symbol. The player then turns over a second card, trying to find the corresponding card with the same symbol. If the cards match, both cards stay flipped over. If the cards do not match, both cards are flipped face down. The game ends once all cards have been correctly matched.
The memory game presents the first opportunity to fully combine your skills in HTML, CSS, and JavaScript into a large project. Aside from solidifying your skills with these three technologies, you'll discover how best to combine them in a complex application.
The following are some of the tasks which challenged me as a developer:
Figuring out the ideal workflow by writing down the steps considering the algorithm Writing higher order function(The function receiving the callback function and/or which returns another function) and callback(The function passed an argument) functions Writing JavaScript built in properties like style.cssText and style.setAttribute. Writing @Keyframes for Animation in CSS3. Writing code avoiding tight coupling and name collision. I wrote the code using JavaScript ES6 Syntax - implementing using let and const instead of var, used arrow functions, template literals, spread and rest parameters, for of / for in loops for iteration etc.
External Libraries and Icons used from following websites:
Font Awesome, jQuery, Stack Overflow