Developer notes (HTML)

These are the notes that the developer provided for this sample application.

The gameGrid element is a container that holds the game cards. The cards are generated by the code.
Each card is a clone of the content of the cardTemplate element, which is only used as a template for the game cards. The code looks inside the template you provide and sets the source property of any image element it finds to a card image for the game. Also, if it finds a <p> tag, it sets the content to the URL of the image.
Every game card has a class name gameItem assigned to it. Use the gameItem class to style against the card.
Each card has three class names assigned to it depending on its state:
- closedCard The face down state.
- openCard The face up state.
- foundCard The matched state.
The game logic supports three sizes for the game board:
- smallGame Uses 16 cards (8 pairs).
- mediumGame Uses 36 cards (18 pairs).
- largeGame Uses 64 cards (32 pairs).
The image view popup is defined in the div popupHolder:
- openImagePopup openImagePopup is the class that is assigned when the pop-up image is displayed.
- closeImagePopup closeImagePopup is the class that is assigned when the pop-up image is hidden.

See Also