SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Threaded View

  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    57 Post(s)
    Tagged
    0 Thread(s)

    CSS Challenge #5 - Flip A Card.

    Ever play Memory as a kid? In this game you're presented with an even number of cards, and pairs of the cards have the same face. All of the cards start face down. You then reveal two cards - if they match they remain face up. Here's our HTML

    Code html:
    <!DOCTYPE html>
    <html>
    <head>
      <title>Memory</title>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script type="text/javascript">
        $('.card').click(function(){
    	  $(this).toggleClass('down');
    	});
      </script>
    </head>
    <body>
      <div id="Playfield">
        <div class="card down one" data-face="1"></div>
        <div class="card down two" data-face="2"></div>
        <div class="card down three" data-face="3"></div>
        <div class="card down four" data-face="4"></div>
        <div class="card down five" data-face="5"></div>
        <div class="card down six" data-face="6"></div>
        <div class="card down seven" data-face="7"></div>
        <div class="card down eight" data-face="8"></div>
        <div class="card down nine" data-face="9"></div>
        <div class="card down ten" data-face="10"></div>
        <div class="card down eleven" data-face="11"></div>
        <div class="card down twelve" data-face="12"></div>
        <div class="card down one" data-face="1"></div>
        <div class="card down two" data-face="2"></div>
        <div class="card down three" data-face="3"></div>
        <div class="card down four" data-face="4"></div>
        <div class="card down five" data-face="5"></div>
        <div class="card down six" data-face="6"></div>
        <div class="card down seven" data-face="7"></div>
        <div class="card down eight" data-face="8"></div>
        <div class="card down nine" data-face="9"></div>
        <div class="card down ten" data-face="10"></div>
        <div class="card down eleven" data-face="11"></div>
        <div class="card down twelve" data-face="12"></div>
      </div>
    </body>
    </html>

    Now, this challenge is broken in two. The CSS side of the challenge is to do the following:

    Beginner Level
    Style the shape of the cards, their backs and fronts. Respond to Java Script toggling the presence of 'down' - if the class is present the card should be face down.
    Your styling must tolerate Java Script changing the position of the card in the DOM or absolute positioning of the card.

    Javascript will also be applying a class of 'matched' to the cards when the player successfully matches a pair. You need to style for this (perhaps by changing the border color). To test your styling you'll need to manually edit the HTML (or do the JS challenge as well )

    Advanced and Expert
    Animate the flip using a 3D transition.

    As usual, use spoiler tags to hide your answers to the challenge that you post.

    This...
    [code][spoiler]Like this[/spoiler][/code]

    Renders
    Code:
    Like this

    If you have Java Script programming skills there is a tie in challenge in the Java Script forum.

    Note - the data-face attribute is present to make the JS code easier to write - I realize it's redundant to the final CSS class name. I also know it's possible to style on attributes, but browser support for that trick is uneven (not that such has stopped us before). Both are presented to keep the difficulty of the challenge down some.
    Last edited by cpradio; Mar 4, 2013 at 15:36. Reason: Added closing script tag and http: so the reference works locally


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •