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.