The game has 16 cards, and when the game starts they are all facing down. The cards flip when clicked, and must be paired to their equal. When the wrong card is flipped, both selected cards return to their initial state (backwards). The cards are randomly shuffled each time the page is refreshed.
In order to write this game, I started drawing wireframes in paper, connecting elements by actions in a chronological order. I also checked tutorials and videos that also build this type of game, in order to improve my initial sketches.
The fist step was to create all elements in HTML, then I would go on to styling using CSS, showing and hiding the img of .card based on (‘click’) event listeners. Then I would move to style the board, and would start building its functionality with function and if else arguments.
Besides a few syntax errors and typos, I struggled to make the flipCard() function work, as I was not using the if statements correctly. Once I solved it, I had to re-format the shuffle() function.
I found these issues using console.log on a regular basis.
These mistakes made me deepen my knowledge of complex javascript functions.