cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Your task:</h1>
<h2>Fork this codepen to your own account (or an anonymous account) and create an entire deck of cards based on the image below using CSS and JavaScript.<h2>
  <h3>The end result should be a function that generates 52 individual cards on the screen: 13 hearts, 13 spades, 13 diamonds, 13 clubs. You should generate the cards with JavaScript and add styles using CSS. You may use the Unicode characters: &spades;, &hearts;, &diams;, and &clubs;. The "face cards" (jack, queen, king, ace) do not need any special illustration on the body of the card but should be noted with the letter (as in the example). </h3>
  <h3>When complete, you should save the pen and email back a link to the URL where we can view your work. Code quality and self-documentation will be considered in our evaluation.</h3>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Playing_card_spade_A.svg/2000px-Playing_card_spade_A.svg.png" width="200px"/>
  
<!-- Please do not add anything in this file as you complete this challenge. You will complete your work entirely in CSS and JavaScript. -->
            
          
!
            
              body{
  background-image: url("http://www.benbathen.com/images/washington_post/cardTable.jpg");
  background-size: 512px 512px;
    background-repeat: repeat-x repeat-y;
  color: white;
}

h1, h2, h3{
  background-color: rgba(0, 0, 0, 0.5);
}

.card{
  display: none;
  width: 200px;
  height: 250px;
  border: 2px solid;
  border-radius: 10px;
  background-color: white;
  box-shadow: -5px 7px 5px rgba(0, 0, 0, 0.5);
  font-size: 1.6em;
  font-family: "Book Antiqua",
   Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
  font-style: bold italic;
  -webkit-text-stroke: 1px black;
  transform: rotate(5deg);
}

#emphasize{
  color: darkred;
  -webkit-text-stroke: 1px rgb(15, 17, 30);
  font-size: 1.5em;
}

.topLeft{
  position: relative;
  top: 10px;
  left: 5px;
}

.bottomRight{
  position: relative;
  top: 100px;
  left: 120px;
   display: inline-block;
  -webkit-transform: rotateX(180deg);
  transform: scale(-1); 
}

.red{
  color: #800000;
  border-color: #800000;
}

.black{
  color: rgb(20, 20, 20);
  border-color: black;
}

.tag{
  width: 70px;
  height: 70px;
  line-height: 80%;
  font-size: 1.5em;
  font-weight: 700;
  z-index: 4;
}

.center{
  position: relative;
  top: -100px;
  left: 70px;
  font-size: 5em;
}

.cntrImg{
  position: relative;
  top: -120px;
  left: 25px;
  font-size: 4em;
  width: 145px;
  height: 210px;
  z-index: 2;
}

#ace{
  width: 115px;
  height: 220px;
}

#shflBtn{
  display: block;
  position: absolute;
  top: 400px;
  left: 82%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 150px;
  border: 2px solid black;
  text-align: center;
  background-color: white;
  border-radius: 25px;
  background-color: rgba(50, 155, 50, 0.5);
  z-index: 20;
  color: rgba(0, 70, 0, 0.5);
  font-weight: 900;
  font-size: 1.5em;
  -webkit-text-stroke: 1px black;
   box-shadow: -5px 7px 5px rgba(0, 0, 0, 0.75);
  font-family: "Book Antiqua",
   Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}

#dealBtn{
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 150px;
  border: 2px solid black;
  text-align: center;
  background-color: white;
  border-radius: 25px;
  background-color: rgba(50, 155, 50, 0.5);
  z-index: 20;
  color: rgba(0, 70, 0, 0.5);
  font-weight: 900;
  font-size: 1.5em;
  -webkit-text-stroke: 1px black;
   box-shadow: -5px 7px 5px rgba(0, 0, 0, 0.5);
  font-family: "Book Antiqua",
   Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}

.centerTxt{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#bkgKing{
  opacity: 0.25;
  background-image: url("http://www.benbathen.com/images/washington_post/king.svg");
  background-size: 512px 512px;
  background-repeat: repeat-x repeat-y;
  background-position: center; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000%;
  height: 1000%;
  z-index: -11;
}

#bkgDirt{
  opacity: 0.35;
  background-image: url("http://www.benbathen.com/images/washington_post/grime.png");
  background-size: 1024px 1024px;
  background-repeat: repeat-x repeat-y;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000%;
  height: 1000%;
  z-index: -10;
}
            
          
!
            
              // includes jQuery, but feel free to write in vanilla JS if you prefer.

//functional stuff probably not worth creating a class for...
var doc = $( 'body' );
var exampleImg = $( 'img' ).first();

var grime = document.createElement('div');
grime.id ='bkgDirt';
$( grime ).appendTo( doc );

var kingBkg = document.createElement('div');
kingBkg.id ='bkgKing';
$( kingBkg ).appendTo( doc );

var button = "<div id='dealBtn' onClick='deckOfCards.deal();'><div class='centerTxt'>CLICK TO <div id='emphasize' >DEAL</div> THE DECK OF CARDS</div></div>" ;
$( button ).appendTo( doc );

//create an object of type shuffle button
function shflBtn () {
  this.domElement = this.create();
}
//add a function to construct the shuffle button.
shflBtn.prototype.create = function () {
  var shuffleBtn = document.createElement("div");
  shuffleBtn.id = 'shflBtn';
  shuffleBtn.setAttribute('onClick', 'deckOfCards.shuffle()');
  var innerDiv = document.createElement("div");
  innerDiv.className = 'centerTxt';
  shuffleBtn.appendChild(innerDiv);
  innerDiv.innerHTML  = "CLICK TO <div id='emphasize'>SHUFFLE</div> THE DECK OF CARDS" ;
  $( shuffleBtn ).appendTo(doc);
  return shuffleBtn;
}

var shuffle = new shflBtn();


//constructor function for an object of type card...
function card(index){
  this.visible = false;
  this.index = index;
  this.suit = this.setSuit();
  this.color = this.setColor();
  this.number = this.setNumber();
  this.xCoord = this.setXCoord();
  this.yCoord = this.setYCoord();
  this.offsetX = 10;
  this.offsetY = 600;
  this.domElement = this.addCardToDom();
}

//getters for the card object
card.prototype.getSuit = function () {
  return this.suit;
}

card.prototype.getColor = function () {
  return this.color;
}

card.prototype.getNumber= function () {
  return this.number;
}

card.prototype.getXCoord = function () {
  return this.xCoord;
}

card.prototype.getYCoord = function () {
  return this.yCoord;
}



//function to add the card to the DOM.
card.prototype.addCardToDom = function (){
    //private helper function to randomly generate  a number within a positive and negative range.
    function getRandom(val) {
      max = val;
      min = val * -1;
      return Math.random() * (max - min) + min;
    }
  
    var theCard = this.createCard(this.index);
    var domElement = $(theCard).clone().appendTo(doc);
    $(domElement).addClass(this.getColor());
    var x = this.getXCoord();
    var y = this.getYCoord(); 

    $(domElement).css({
      transform: "rotate(" + getRandom(3) + "deg)",
      left: x + this.offsetX, 
      top: y + this.offsetY, 
      position:'absolute'
    });
  return domElement;
}

card.prototype.setColor = function () {
	var theColor;
	if( this.getSuit() == 'heart' || this.getSuit() == 'diamond'){
	  theColor = 'red';
  }else {	
    theColor = 'black';
  }  
  this.color = theColor;
  return theColor;
}

//get the suit for the card.
card.prototype.setSuit = function (){
  var theSuit;
  if(this.index < 13){
    theSuit = "spade";
  }else if(this.index >= 13 && i < 26){
    theSuit = "heart";
  }else if(this.index >= 26 && i < 39){
    theSuit = "diamond";
  }else{
    theSuit = "club";
  }
  this.suit = theSuit;
  return theSuit;
}

//function to get the correct number for the card.  
//remember it's not zero indexed...
card.prototype.setNumber = function (){
  var theNum = (this.index % 13) + 1;
  if(theNum == 1){ 
    return 'A'
  }else if(theNum == 11){
    return 'J';
  }else if(theNum == 12){
    return 'Q';
  }else if(theNum == 13){
    return 'K';
  }else{
    return theNum
  };
}

//function to create the tags in the upperleft and lowerright of the card.
card.prototype.createTag = function (){
  var tag = "<div class='tag topLeft'>" + this.getNumber() +"<br/>"+ this.getSuitContent() + "</div>" ;
   tag += "<div class='tag bottomRight'>" + this.getNumber() +"<br/>"+ this.getSuitContent() + "</div>" ;
  return tag;
}

//function to create the center image or unicode character
card.prototype.createCenter = function (){
  var theNum = (this.index % 13) + 1;
  var base = "<div><img class='cntrImg' src='http://www.benbathen.com/images/washington_post/";
  if(theNum == 1){ 
    var center = base + "ace.jpg' id='ace'></div>" ;
  }else if(theNum == 11){
	var center = base + "jack2.jpg'></div>" ;
  }else if(theNum == 12){
    var center = base + "queen.jpg'></div>" ;
  }else if(theNum == 13){
    var center = base + "king.jpg'></div>" ;
  }else{
      var center = "<div class='center'>" + this.getSuitContent() + "</div>" ;
  };
  return center;
}

//function to create the base card
card.prototype.createCard = function (){
  var card = "<div class='card' id=card_" + this.index + ">" + this.createTag(this.index) + this.createCenter(this.index)+"</div>";
  return card;
}

//get the content for the suit
card.prototype.getSuitContent = function (){
  if(this.index < 13){
    return "<div id='spade'>&spades;</div>";
  }else if(this.index >= 13 && i < 26){
    return "<div id='heart'>&hearts;</div>";
  }else if(this.index >= 26 && i < 39){
   return "<div id='diam'>&diams;</div>";
  }else{
    return "<div id='club'>&clubs;</div>";
  }
}

//function to generate the X (horizontal) position of the card.
card.prototype.setXCoord = function (){
  return ((this.index % 13) * 190) ;
}

//function to generate the Y (vertical) position of the card.
card.prototype.setYCoord = function getY(){
  var yCoord = Math.floor(this.index / 13) * 145;
  yCoord += this.index * 10;
  return yCoord;
}

card.prototype.spin = function () {
  //private helper function to randomly generate  a number within a positive and negative range.
  function getRandom(val) {
    max = val;
    min = val * -1;
    return Math.random() * (max - min) + min;
  }
  
  $( "#" + this.domElement[0].id ).animate({  borderSpacing: getRandom(-3) - 360 }, {
      step: function( now ) {
        $(this).css('transform','rotate('+ now +'deg)');  
      },
      duration: 800
  },'smooth');
}

card.prototype.translate = function () {
  $( "#" + this.domElement[0].id ).css({top: 327, left: 0,});
  $( "#" + this.domElement[0].id ).animate({  top: this.yCoord + this.offsetY, left: this.xCoord + this.offsetX }, 500);
  this.spin();
}

card.prototype.showCard = function (){ 
  $( "#card_" + deckOfCards.cardIndex ).fadeIn(300);
  //deckOfCards.cards[deckOfCards.cardIndex].spin();
  deckOfCards.cards[deckOfCards.cardIndex].translate();
  this.visible = true;
  
  deckOfCards.cardIndex++;
  if(deckOfCards.cardIndex == 52){
     deckOfCards.cardIndex = 0;
  }
}

card.prototype.hideCard = function (){    
  $( "#card_" + deckOfCards.cardIndex ).hide();
  deckOfCards.cardIndex++;
  if(deckOfCards.cardIndex == 52){
     deckOfCards.cardIndex = 0;
  }
  this.visible = false;
}

//create an object of type deck
function deck() {
    this.cards = this.populateCards();
    this.cardIndex = 0;
}

//add a fuction or method to populate the array of cards.
deck.prototype.populateCards = function () {
      var cardArray = [];
      for(i = 0; i < 52; i++){
        var theCard = new card(i);
        cardArray.push(theCard);
        theCard.addCardToDom();
     }
    return cardArray;
}

//add a function to deal the cards to the deck object
deck.prototype.deal = function () {
  $( exampleImg ).show();
  for(i = 0; i < this.cards.length; i++){
     this.cards[i].hideCard();
  }
  for(i = 0; i < this.cards.length; i++){
     var time = i * 200;
     setTimeout(this.cards[i].showCard, time);
  }
  $( exampleImg ).hide();
}


//still working on this.  not quite working.
//will eventually be the callback function for the shuffle button...
deck.prototype.shuffle = function () {
  for(i = 0; i < this.cards.length; i += 4){
    var rndIndex1 = i;
    var rndIndex2 = (51 - i) ;

    var cardA = this.cards[rndIndex1];
    var cardB = this.cards[rndIndex2];

    aXCoord = cardA.getXCoord();
    aYCoord = cardA.getYCoord();
    bXCoord = cardB.getXCoord();
    bYCoord = cardB.getYCoord();

    $( "#" + cardA.domElement[0].id ).css({top: bYCoord + cardB.offsetY, left: bXCoord + cardB.offsetX});
    $( "#" + cardB.domElement[0].id ).css({top: aYCoord + cardA.offsetY, left: aXCoord + cardA.offsetX});
    
    cardA.xCoord = aXCoord;
    cardA.yCoord = aYCoord;
    cardB.xCoord = bXCoord;
    cardB.yCoord = bYCoord;
    this.cards[rndIndex1].spin();
    this.cards[rndIndex2].spin();
  }
  console.log("you shuffled the deck!");
}

//create an instance of type deck
var deckOfCards = new deck();


//just for fun.  no practical application really.
function rndSpin(){
    var rndIndex = Math.floor(Math.random() * 52);
    deckOfCards.cards[rndIndex].spin();
}

setInterval(rndSpin, 2000);

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console