SitePoint Code Challenge: CSS – Flip A Card
Ever play Memory as a kid? It’s a card game – you place all the cards face down and when it’s your turn you flip over two cards. The aim is to get matching pairs. Today’s challenge uses CSS & JavaScript to recreate that game that stole so much of my childhood. Before I go any further though, I need to point out that I’ve been a bit remiss in not crediting the creation of these challenges to forum mentor Michael Morris.
Here’s our HTML:
<!DOCTYPE html>
<html>
<head>
<title>Memory</title>
<script src="https://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 data-face="1"></div>
<div data-face="2"></div>
<div data-face="3"></div>
<div data-face="4"></div>
<div data-face="5"></div>
<div data-face="6"></div>
<div data-face="7"></div>
<div data-face="8"></div>
<div data-face="9"></div>
<div data-face="10"></div>
<div data-face="11"></div>
<div data-face="12"></div>
<div data-face="1"></div>
<div data-face="2"></div>
<div data-face="3"></div>
<div data-face="4"></div>
<div data-face="5"></div>
<div data-face="6"></div>
<div data-face="7"></div>
<div data-face="8"></div>
<div data-face="9"></div>
<div data-face="10"></div>
<div data-face="11"></div>
<div 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 Javascript toggling the presence of ‘down’ – if the class is present the card should be face down.
Your styling must tolerate Javascript 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).
Advanced and Expert Levels
Animate the flip using a 3D transition.
If you have Javascript programming skills there is a tie in challenge in the Javascript forum. If not, why not hit up someone that does and make it a team challenge?
Note – the data-face attribute is present to make the JS code easier to write, although it’s redundant to the final CSS class name. It’s possible to style on attributes, but browser support for that trick is unreliable. Both are presented to keep the difficulty of the challenge down some.
