Share via


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

Tasks

Design your first Windows Store app (HTML)

Concepts

Memory game overview (HTML)