SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 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

  2. #2
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can we add an additional element to the html for flip effect?

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    What browsers does the challenge need to support?

  4. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm doing both challenges (CSS and JS). I'm doing the advanced/expert thing. Here's my CSS entry (also uploaded a demo for convenience):

    Code:
    <!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">
        $(function() {
          $('.card').click(function(){
            $(this).toggleClass('down');
          });
        });
      </script>
      <script type="text/javascript">
      </script>
      <style type="text/css">
        #Playfield {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            
            perspective-origin: 50% 50%;
            -webkit-perspective-origin: 50% 50%;
            -moz-perspective-origin: 50% 50%;
            -o-perspective-origin: 50% 50%;
            -ms-perspective-origin: 50% 50%;
            
            perspective: 500px;
            -webkit-perspective: 500px;
            -moz-perspective: 500px;
            -o-perspective: 500px;
            -ms-perspective: 500px;
        }
        .card {
            background-color: #ffffff;
            border: 1px solid black;
            border-radius: 0px;
            float: left;
            width: 50px;
            height: 50px;
            padding: 5px;
            margin: 5px;
            
            transition: transform 500ms ease, background-color 500ms ease, border-radius 500ms ease;
            -webkit-transition: -webkit-transform 500ms ease, background-color 500ms ease, border-radius 500ms ease;
            -moz-transition: -moz-transform 500ms ease, background-color 500ms ease, border-radius 500ms ease;
            -o-transition: -o-transform 500ms ease, background-color 500ms ease, border-radius 500ms ease;
            -ms-transition: -ms-transform 500ms ease, background-color 500ms ease, border-radius 500ms ease;
        }
        
        .card.one {
            border-radius: 0px;
        }
        .card.two {
            border-radius: 10px;
        }
        .card.three {
            border-radius: 30px;
        }
        .card.four {
            border-top-left-radius: 60px;
        }
        .card.five {
            border-top-right-radius: 60px;
        }
        .card.six {
            border-bottom-right-radius: 60px;
        }
        .card.seven {
            border-bottom-left-radius: 60px;
        }
        .card.eight {
            border-top-left-radius: 60px;
            border-bottom-right-radius: 60px;
        }
        .card.nine {
            border-top-right-radius: 60px;
            border-bottom-left-radius: 60px;
        }
        .card.ten {
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
        }
        .card.eleven {
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
        }
        .card.twelve {
            border-top-right-radius: 30px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
        }
        .card.down {
            background-color: #000000;
            border-radius: 0px;
            
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -o-transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
        }
        .card.matched {
            background-color: #999999;
        }
      </style>
    </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>
    Here is a demo of both the JS and CSS entries working together, in case if anyone's interested. x] This and my post at the JS challenge are my first posts. I did a few of the challenges but I never posted them for reasons unknown to myself haha.

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    That was fun

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <title>Memory</title>
      <style>
        body {
          font-family: sans-serif;
          padding: 20px 20px 10px;
        }
        
        #Playfield {
          margin: 0 auto;
          -webkit-perspective: 1000;
          -moz-perspective: 1000;
          -ms-perspective: 1000;
          -o-perspective: 1000;
          -webkit-perspective: 1000;
          position: relative;
          width: 960px;
        }
        #Playfield .card {
          float: left;
          height: 110px;
          margin: 0 5px 10px;
          position: relative;
          -webkit-transform: rotateY(180deg);
          -moz-transform: rotateY(180deg);
          -ms-transform: rotateY(180deg);
          -o-transform: rotateY(180deg);
          -webkit-transform: rotateY(180deg);
          -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
          -o-transform-style: preserve-3d;
          -webkit-transform-style: preserve-3d;
          -webkit-transition: -webkit-transform 0.5s;
          -moz-transition: -moz-transform 0.5s;
          -o-transition: -o-transform 0.5s;
          -webkit-transition: -webkit-transform 0.5s;
          width: 110px;
        }
        #Playfield .card div {
          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          -ms-backface-visibility: hidden;
          -o-backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          height: 110px;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
        }
        #Playfield .card .front {
          background-color: #dedede;
          z-index: 0;
        }
        #Playfield .card .back {
          background-color: #333;
          color: #fff;
          font-size: 30px;
          line-height: 100px;
          text-align: center;
          -webkit-transform: rotateY(180deg);
          -moz-transform: rotateY(180deg);
          -ms-transform: rotateY(180deg);
          -o-transform: rotateY(180deg);
          -webkit-transform: rotateY(180deg);
        }
        #Playfield .card.down {
          -webkit-transform: rotateY(0deg);
          -moz-transform: rotateY(0deg);
          -ms-transform: rotateY(0deg);
          -o-transform: rotateY(0deg);
          -webkit-transform: rotateY(0deg);
        }
        #Playfield .card.down .front {
          z-index: 1;
        }
      </style>
    </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>
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script type="text/javascript">
        (function($){
          $.fn.shuffle = function() {
            return this.each(function(){
              var items = $(this).children();
              return (items.length)
              ? $(this).html($.shuffle(items))
              : this;
            });
          }
          
          $.shuffle = function(arr) {
            for(
              var j, x, i = arr.length; i;
              j = parseInt(Math.random() * i),
              x = arr[--i], arr[i] = arr[j], arr[j] = x
              );
            return arr;
          }
        })(jQuery);
        
        // The total number of cards currently selected and total times failed
        var counter = 0,
            failed  = 0,
            limit   = 3;
        
        // Shuffle the cards around
        $('#Playfield').shuffle();
        
        $('.card').each(function() {
          var $this = $(this);
          
          // Create the front side of the card
          $('<div />', {'class' : 'front'}).appendTo($this);
          
          // Create the back side of the card
          $('<div />', {
            'class' : 'back',
            html    : $this.data('face')
          }).appendTo($this);
        });
        
        // Bind the click event to the card so we can toogle the state the
        // backface-visibility, this property only applies to browsers that
        // support it
        $(document.body).on('click', '.card', function() {
          // If the counter/current class matches something that should ensure the
          // click is check for it and prevent anything else from happening
          if (counter === 2 || $(this).is('.matched') || !$(this).is('.down'))
          return;
          
          // Remove the "down" class since the current card can't be turned off
          // unless a second card is selected
          $(this).removeClass('down');
          
          // Increment the active cards counter
          counter++;
          
          // Find the 2 cards that have been selected if the counter is at 2
          if (counter === 2) {
            var cards = $('.card:not(.down, .matched)'),
                delay = 0,
                match = $(cards[0]).data('face') === $(cards[1]).data('face');
            
            if (match) {
              cards.addClass('matched');
              
              // Now we need to check if every card was matched, we can do this by
              // simply getting a total count of all the cards compared to how many
              // have the "matched" class
              var $cards  = $('.card'),
                  total   = $cards.length,
                  matched = $('.card.matched').length;
              
              if (total === matched){
                alert('You Win!');
                
                $cards.toggleClass('matched down');
              }
            } else {
              delay = 700;
              failed++;
              
              setTimeout(function() {
                cards.addClass('down');
              }, delay);
            }
            
            // Check the number of times that the player has failed, if they have hit
            // the limit reset the cards and the counter
            setTimeout(function() {
              if (failed === limit) {
                alert('Sorry, but you have wrongly matched too many cards. The cards will now be shuffled around!');
                
                // Reset the cards
                $('.card').removeClass('matched').addClass('down');
                
                // Shuffle the cards around
                setTimeout(function() {
                  $('#Playfield').shuffle();
                }, 200);
                
                // Reset the counters
                counter = failed = 0;
              } else {
                counter = 0;
              }
            }, delay);
          }
        });
      </script>
      
    </body>
    </html>
    Live demo as well http://codepen.io/ChrisUpjohn/full/6...05b613e4c368fc

  6. #6
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sami89 View Post
    Can we add an additional element to the html for flip effect?
    If necessary yes
    Quote Originally Posted by chris.upjohn View Post
    What browsers does the challenge need to support?
    Whichever ones you feel like - this is a fun challenge, not a production task.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    What browsers does the challenge need to support?
    Usually just specify which browsers you have supported.

    Quote Originally Posted by chris.upjohn View Post
    Good work Chris but but it took me 10 minutes to match one pair

    Quote Originally Posted by jather
    I did a few of the challenges but I never posted them for reasons unknown to myself haha.
    Well done on this challenge and you can still post the old ones if you can find the threads

  8. #8
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)

    CSS Challenge #5 - Flip A Card.

    Quote Originally Posted by Paul O'B View Post
    Good work Chris but but it took me 10 minutes to match one pair
    I did that just for you , j/ks. I really only added the failed counter to make it more gamely feeling, pretty much built it for the design.

    PS: Mine supports IE7+, Chrome 12+, Firefox 10+ and Safari 4+, IE10 however doesn't seem to like the CSS3 so it can stay broken.

  9. #9
    SitePoint Enthusiast jorgepson's Avatar
    Join Date
    Dec 2012
    Location
    Melbourne, Victoria, Australia, Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice its kinda fun. i tried to play lol. does the demo site includes or is there a different file for java script?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jorgepson View Post
    nice its kinda fun. i tried to play lol. does the demo site includes or is there a different file for java script?
    I'm not quite sure what you are asking but the details are explained in post #1 above and in post #1 of the JS section. If that doesn't answer your question please clarify.

  11. #11
    SitePoint Member
    Join Date
    Mar 2013
    Location
    Galway, Ireland
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by jayther View Post

    Here is a demo of both the JS and CSS entries working together, in case if anyone's interested. x] This and my post at the JS challenge are my first posts. I did a few of the challenges but I never posted them for reasons unknown to myself haha.
    Thanks jayther, I was just playing with transforms and I learned a lot from your code.

  12. #12
    SitePoint Enthusiast jorgepson's Avatar
    Join Date
    Dec 2012
    Location
    Melbourne, Victoria, Australia, Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I'm not quite sure what you are asking but the details are explained in post #1 above and in post #1 of the JS section. If that doesn't answer your question please clarify.
    Thanks, I already understand the post. Anyways thanks again.


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
  •