cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

            
              <div class="step step-0">
  <h1>27 Card Trick</h1>
  <p>Hello stranger. In this pen I wanna show you a pretty cool magic trick. It's a mathematical card trick.</p>
  <p>Follow the steps as instructed. You'll be impressed.</p>
  <br />
  <p>Please give me your favorite number between 1 and 27 (you should remember it till the end):</p>
  <p><input class="fav_number_range" type="range" min="1" value="1" max="27" /></p>
  <p class="fav_number">1</p>
  <button>Start the trick!</button>
</div>
<div class="step step-1">
  <h1>Step 1</h1>
  <p>In this step you need to choose one of these 27 cards. You can choose by clicking on the card. Please make sure to remember this card! Your card will not be saved. If you don't trust me look at the javascript.</p>
  <div class="cards">
    <div class="card black">A&spades;</div>
    <div class="card red">A&hearts;</div>
    <div class="card black">A&clubs;</div>
    <div class="card red">A&diams;</div>
    <div class="card black">2&spades;</div>
    <div class="card red">2&hearts;</div>
    <div class="card black">2&clubs;</div>
    <div class="card red">2&diams;</div>
    <div class="card black">3&spades;</div>
    <div class="card red">3&hearts;</div>
    <div class="card black">3&clubs;</div>
    <div class="card red">3&diams;</div>
    <div class="card black">4&spades;</div>
    <div class="card red">4&hearts;</div>
    <div class="card black">4&clubs;</div>
    <div class="card red">4&diams;</div>
    <div class="card black">5&spades;</div>
    <div class="card red">5&hearts;</div>
    <div class="card black">5&clubs;</div>
    <div class="card red">5&diams;</div>
    <div class="card black">6&spades;</div>
    <div class="card red">6&hearts;</div>
    <div class="card black">6&clubs;</div>
    <div class="card red">6&diams;</div>
    <div class="card black">7&spades;</div>
    <div class="card red">7&hearts;</div>
    <div class="card black">7&clubs;</div>
    <br style="clear: both;" />
  </div>
</div>
<div class="step step-2">
  <h1>Step 2</h1>
  <p>This step is the same as the following steps 3 and 4. The cards are randomly shuffled by the javascript. There are now 3 rows of cards. Each pile has 9 cards. There's also a button right next to each pile. Please look for your card and click on the button right next to that pile. DON'T cheat, otherwise the trick won't work.</p>
  <div class="pile pile-1">
    <button data-pile="0">In this pile</button>
    <br style="clear: both;" />
  </div>
  <div class="pile pile-2">
    <button data-pile="1">In this pile</button>
    <br style="clear: both;" />
  </div>
  <div class="pile pile-3">
    <button data-pile="2">In this pile</button>
    <br style="clear: both;" />
  </div>
</div>
<div class="step step-3">
  <h1>Step 3</h1>
  <p>This step is the same as the steps 2 and 4. There are now 3 rows of cards. Each pile has 9 cards. There's also a button right next to each pile. Please look for your card and click on the button right next to that pile. DON'T cheat, otherwise the trick won't work.</p>
  <div class="pile pile-1">
    <button data-pile="0">In this pile</button>
    <br style="clear: both;" />
  </div>
  <div class="pile pile-2">
    <button data-pile="1">In this pile</button>
    <br style="clear: both;" />
  </div>
  <div class="pile pile-3">
    <button data-pile="2">In this pile</button>
    <br style="clear: both;" />
  </div>
</div>
<div class="step step-4">
  <h1>Step 4</h1>
  <p>This step is the same as the steps 2 and 3. There are now 3 rows of cards. Each pile has 9 cards. There's also a button right next to each pile. Please look for your card and click on the button right next to that pile. DON'T cheat, otherwise the trick won't work.</p>
  <div class="pile pile-1">
    <button data-pile="0">In this pile</button>
    <br style="clear: both;" />
  </div>
  <div class="pile pile-2">
    <button data-pile="1">In this pile</button>
    <br style="clear: both;" />
  </div>
  <div class="pile pile-3">
    <button data-pile="2">In this pile</button>
    <br style="clear: both;" />
  </div>
</div>
<div class="step step-5">
  <h1>Step 5</h1>
  <p>After 3 rounds of dealing out the cards into 3 piles the order of the cards has changed. If we hold the deck of cards face down and start dealing out the cards to reveal them we will count each card, starting with 1. What was your favorite number again? <span class="your_number"></span>? Have a look at the card of your favorite number. Is that your card?</p>
  <p>There is no trick like saving your choice at the beginning. It's a mathemtical card trick.</p>
  <div id="final_cards"></div>
</div>
            
          
!
            
              @import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

* {
  border: 0;
  padding: 0;
  margin: 0;
}

html, body {
  min-height: 100%;
}

body {
  background-color: #333;
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

h1 {
  font-weight: 300;
  font-size: 30px;
  line-height: 45px;
}

p {
  max-width: 50%;
  margin: 0 auto;
}

button {
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 3px;
  cursor: pointer;
  float: left;
  margin-top: 30px;
  margin-right: 15px;
}
.step {
  padding: 20px;
  text-align: center;
  display: none;
  &:nth-child(odd) {
    background: #333;
    color: #ffffff;
    button {
      background-color: aquamarine;
      color: #333;
    }
  }
  &:nth-child(even) {
    background: aquamarine;
    color: #333;
    button {
      background-color: #333;
      color: #ffffff;
    }
  }
  &.step-0 {
    display: block;
    button {
      float: none;
      margin: 0;
    }
  }
}

.pile {
  max-width: 50%;
  margin: 20px auto;
}

.cards {
  margin: 0 auto;
  max-width: 420px;  
}

.card {
  font-size: 20px;
  font-weight: bold;
  background: snow;
  cursor: pointer;
  width: 50px;
  height: 75px;
  border-radius: 10px;
  margin: 5px;
  float: left;
  text-align: center;
  line-height: 75px;
  box-shadow: 2px 2px 1px #666, inset 2px 2px 1px #aaa;
  &.red {
    color: #ff0000;
  }
  &.black {
    color: #000000;
  }
}

#final_cards {
  width: 100px;
  margin: 0 auto;
  div {
    width: 50px;
    display: inline-block;
    line-height: 75px;
    text-align: center;
    margin: 0px 0px 5px 0px;
    &:nth-child(1) {
      color: #333;
      font-size: 20px;
    }
  }
}

.your_number {
  color: #f00;
  font-weight: bold;
}
            
          
!
            
              jQuery.fn.outerHTML = function() {
  return jQuery('<div />').append(this.eq(0).clone()).html();
};

function Shuffle(o) {
  for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
  return o;
};

function orderCards(pile, cards, belongs) {
  var tmp_cards = new  Array();
  tmp_cards = [].concat(cards);
  switch(pile) {
    case 0:
      switch(belongs) {
        case "top":
          cards[0] = tmp_cards[0];
          cards[1] = tmp_cards[3];
          cards[2] = tmp_cards[6];
          cards[3] = tmp_cards[9];
          cards[4] = tmp_cards[12];
          cards[5] = tmp_cards[15];
          cards[6] = tmp_cards[18];
          cards[7] = tmp_cards[21];
          cards[8] = tmp_cards[24];
          cards[9] = tmp_cards[1];
          cards[10] = tmp_cards[4];
          cards[11] = tmp_cards[7];
          cards[12] = tmp_cards[10];
          cards[13] = tmp_cards[13];
          cards[14] = tmp_cards[16];
          cards[15] = tmp_cards[19];
          cards[16] = tmp_cards[22];
          cards[17] = tmp_cards[25];
          cards[18] = tmp_cards[2];
          cards[19] = tmp_cards[5];
          cards[20] = tmp_cards[8];
          cards[21] = tmp_cards[11];
          cards[22] = tmp_cards[14];
          cards[23] = tmp_cards[17];
          cards[24] = tmp_cards[20];
          cards[25] = tmp_cards[23];
          cards[26] = tmp_cards[26];
          break;
        case "middle":
          cards[0] = tmp_cards[1];
          cards[1] = tmp_cards[4];
          cards[2] = tmp_cards[7];
          cards[3] = tmp_cards[10];
          cards[4] = tmp_cards[13];
          cards[5] = tmp_cards[16];
          cards[6] = tmp_cards[19];
          cards[7] = tmp_cards[22];
          cards[8] = tmp_cards[25];
          cards[9] = tmp_cards[0];
          cards[10] = tmp_cards[3];
          cards[11] = tmp_cards[6];
          cards[12] = tmp_cards[9];
          cards[13] = tmp_cards[12];
          cards[14] = tmp_cards[15];
          cards[15] = tmp_cards[18];
          cards[16] = tmp_cards[21];
          cards[17] = tmp_cards[24];
          cards[18] = tmp_cards[2];
          cards[19] = tmp_cards[5];
          cards[20] = tmp_cards[8];
          cards[21] = tmp_cards[11];
          cards[22] = tmp_cards[14];
          cards[23] = tmp_cards[17];
          cards[24] = tmp_cards[20];
          cards[25] = tmp_cards[23];
          cards[26] = tmp_cards[26];
          break;
        case "bottom":
          cards[0] = tmp_cards[2];
          cards[1] = tmp_cards[5];
          cards[2] = tmp_cards[8];
          cards[3] = tmp_cards[11];
          cards[4] = tmp_cards[14];
          cards[5] = tmp_cards[17];
          cards[6] = tmp_cards[20];
          cards[7] = tmp_cards[23];
          cards[8] = tmp_cards[26];
          cards[9] = tmp_cards[1];
          cards[10] = tmp_cards[4];
          cards[11] = tmp_cards[7];
          cards[12] = tmp_cards[10];
          cards[13] = tmp_cards[13];
          cards[14] = tmp_cards[16];
          cards[15] = tmp_cards[19];
          cards[16] = tmp_cards[22];
          cards[17] = tmp_cards[25];
          cards[18] = tmp_cards[0];
          cards[19] = tmp_cards[3];
          cards[20] = tmp_cards[6];
          cards[21] = tmp_cards[9];
          cards[22] = tmp_cards[12];
          cards[23] = tmp_cards[15];
          cards[24] = tmp_cards[18];
          cards[25] = tmp_cards[21];
          cards[26] = tmp_cards[24];
          break;
        }
      break;
    case 1:
      switch(belongs) {
        case "top":
          cards[0] = tmp_cards[1];
          cards[1] = tmp_cards[4];
          cards[2] = tmp_cards[7];
          cards[3] = tmp_cards[10];
          cards[4] = tmp_cards[13];
          cards[5] = tmp_cards[16];
          cards[6] = tmp_cards[19];
          cards[7] = tmp_cards[22];
          cards[8] = tmp_cards[25];
          cards[9] = tmp_cards[0];
          cards[10] = tmp_cards[3];
          cards[11] = tmp_cards[6];
          cards[12] = tmp_cards[9];
          cards[13] = tmp_cards[12];
          cards[14] = tmp_cards[15];
          cards[15] = tmp_cards[18];
          cards[16] = tmp_cards[21];
          cards[17] = tmp_cards[24];
          cards[18] = tmp_cards[2];
          cards[19] = tmp_cards[5];
          cards[20] = tmp_cards[8];
          cards[21] = tmp_cards[11];
          cards[22] = tmp_cards[14];
          cards[23] = tmp_cards[17];
          cards[24] = tmp_cards[20];
          cards[25] = tmp_cards[23];
          cards[26] = tmp_cards[26];
          break;
        case "middle":
          cards[0] = tmp_cards[0];
          cards[1] = tmp_cards[3];
          cards[2] = tmp_cards[6];
          cards[3] = tmp_cards[9];
          cards[4] = tmp_cards[12];
          cards[5] = tmp_cards[15];
          cards[6] = tmp_cards[18];
          cards[7] = tmp_cards[21];
          cards[8] = tmp_cards[24];
          cards[9] = tmp_cards[1];
          cards[10] = tmp_cards[4];
          cards[11] = tmp_cards[7];
          cards[12] = tmp_cards[10];
          cards[13] = tmp_cards[13];
          cards[14] = tmp_cards[16];
          cards[15] = tmp_cards[19];
          cards[16] = tmp_cards[22];
          cards[17] = tmp_cards[25];
          cards[18] = tmp_cards[2];
          cards[19] = tmp_cards[5];
          cards[20] = tmp_cards[8];
          cards[21] = tmp_cards[11];
          cards[22] = tmp_cards[14];
          cards[23] = tmp_cards[17];
          cards[24] = tmp_cards[20];
          cards[25] = tmp_cards[23];
          cards[26] = tmp_cards[26];
          break;
        case "bottom":
          cards[0] = tmp_cards[2];
          cards[1] = tmp_cards[5];
          cards[2] = tmp_cards[8];
          cards[3] = tmp_cards[11];
          cards[4] = tmp_cards[14];
          cards[5] = tmp_cards[17];
          cards[6] = tmp_cards[20];
          cards[7] = tmp_cards[23];
          cards[8] = tmp_cards[26];
          cards[9] = tmp_cards[0];
          cards[10] = tmp_cards[3];
          cards[11] = tmp_cards[6];
          cards[12] = tmp_cards[9];
          cards[13] = tmp_cards[12];
          cards[14] = tmp_cards[15];
          cards[15] = tmp_cards[18];
          cards[16] = tmp_cards[21];
          cards[17] = tmp_cards[24];
          cards[18] = tmp_cards[1];
          cards[19] = tmp_cards[4];
          cards[20] = tmp_cards[7];
          cards[21] = tmp_cards[10];
          cards[22] = tmp_cards[13];
          cards[23] = tmp_cards[16];
          cards[24] = tmp_cards[19];
          cards[25] = tmp_cards[22];
          cards[26] = tmp_cards[25];
          break;
        }
      break;
    case 2:
      switch(belongs) {
        case "top":
          cards[0] = tmp_cards[2];
          cards[1] = tmp_cards[5];
          cards[2] = tmp_cards[8];
          cards[3] = tmp_cards[11];
          cards[4] = tmp_cards[14];
          cards[5] = tmp_cards[17];
          cards[6] = tmp_cards[20];
          cards[7] = tmp_cards[23];
          cards[8] = tmp_cards[26];
          cards[9] = tmp_cards[1];
          cards[10] = tmp_cards[4];
          cards[11] = tmp_cards[7];
          cards[12] = tmp_cards[10];
          cards[13] = tmp_cards[13];
          cards[14] = tmp_cards[16];
          cards[15] = tmp_cards[19];
          cards[16] = tmp_cards[22];
          cards[17] = tmp_cards[25];
          cards[18] = tmp_cards[0];
          cards[19] = tmp_cards[3];
          cards[20] = tmp_cards[6];
          cards[21] = tmp_cards[9];
          cards[22] = tmp_cards[12];
          cards[23] = tmp_cards[15];
          cards[24] = tmp_cards[18];
          cards[25] = tmp_cards[21];
          cards[26] = tmp_cards[24];
          break;
        case "middle":
          cards[0] = tmp_cards[0];
          cards[1] = tmp_cards[3];
          cards[2] = tmp_cards[6];
          cards[3] = tmp_cards[9];
          cards[4] = tmp_cards[12];
          cards[5] = tmp_cards[15];
          cards[6] = tmp_cards[18];
          cards[7] = tmp_cards[21];
          cards[8] = tmp_cards[24];
          cards[9] = tmp_cards[2];
          cards[10] = tmp_cards[5];
          cards[11] = tmp_cards[8];
          cards[12] = tmp_cards[11];
          cards[13] = tmp_cards[14];
          cards[14] = tmp_cards[17];
          cards[15] = tmp_cards[20];
          cards[16] = tmp_cards[23];
          cards[17] = tmp_cards[26];
          cards[18] = tmp_cards[1];
          cards[19] = tmp_cards[4];
          cards[20] = tmp_cards[7];
          cards[21] = tmp_cards[10];
          cards[22] = tmp_cards[13];
          cards[23] = tmp_cards[16];
          cards[24] = tmp_cards[19];
          cards[25] = tmp_cards[22];
          cards[26] = tmp_cards[25];
          break;
        case "bottom":
          cards[0] = tmp_cards[0];
          cards[1] = tmp_cards[3];
          cards[2] = tmp_cards[6];
          cards[3] = tmp_cards[9];
          cards[4] = tmp_cards[12];
          cards[5] = tmp_cards[15];
          cards[6] = tmp_cards[18];
          cards[7] = tmp_cards[21];
          cards[8] = tmp_cards[24];
          cards[9] = tmp_cards[1];
          cards[10] = tmp_cards[4];
          cards[11] = tmp_cards[7];
          cards[12] = tmp_cards[10];
          cards[13] = tmp_cards[13];
          cards[14] = tmp_cards[16];
          cards[15] = tmp_cards[19];
          cards[16] = tmp_cards[22];
          cards[17] = tmp_cards[25];
          cards[18] = tmp_cards[2];
          cards[19] = tmp_cards[5];
          cards[20] = tmp_cards[8];
          cards[21] = tmp_cards[11];
          cards[22] = tmp_cards[14];
          cards[23] = tmp_cards[17];
          cards[24] = tmp_cards[20];
          cards[25] = tmp_cards[23];
          cards[26] = tmp_cards[26];
          break;
        }
      break;
    default:
      alert("Something went wrong. Please refresh the page.");
      break;
  }

  return cards;
}

$(document).ready(function() {
  // Step 0
  var fav_number = 1;
  var order = new Array();
  order[1] = "top";
  order[2] = "top";
  order[3] = "top";
  $('.fav_number_range').change(function() {
    fav_number = $(this).val();
    $('.fav_number').html(fav_number);
    switch (fav_number) {
      case "1":
        order[1] = "top";
        order[2] = "top";
        order[3] = "top";
        break;
      case "2":
        order[1] = "middle";
        order[2] = "top";
        order[3] = "top";
        break;
      case "3":
        order[1] = "bottom";
        order[2] = "top";
        order[3] = "top";
        break;
      case "4":
        order[1] = "top";
        order[2] = "middle";
        order[3] = "top";
        break;
      case "5":
        order[1] = "middle";
        order[2] = "middle";
        order[3] = "top";
        break;
      case "6":
        order[1] = "bottom";
        order[2] = "middle";
        order[3] = "top";
        break;
      case "7":
        order[1] = "top";
        order[2] = "bottom";
        order[3] = "top";
        break;
      case "8":
        order[1] = "middle";
        order[2] = "bottom";
        order[3] = "top";
        break;
      case "9":
        order[1] = "bottom";
        order[2] = "bottom";
        order[3] = "top";
        break;
      case "10":
        order[1] = "top";
        order[2] = "top";
        order[3] = "middle";
        break;
      case "11":
        order[1] = "middle";
        order[2] = "top";
        order[3] = "middle";
        break;
      case "12":
        order[1] = "bottom";
        order[2] = "top";
        order[3] = "middle";
        break;
      case "13":
        order[1] = "top";
        order[2] = "middle";
        order[3] = "middle";
        break;
      case "14":
        order[1] = "middle";
        order[2] = "middle";
        order[3] = "middle";
        break;
      case "15":
        order[1] = "bottom";
        order[2] = "middle";
        order[3] = "middle";
        break;
      case "16":
        order[1] = "top";
        order[2] = "bottom";
        order[3] = "middle";
        break;
      case "17":
        order[1] = "middle";
        order[2] = "bottom";
        order[3] = "middle";
        break;
      case "18":
        order[1] = "bottom";
        order[2] = "bottom";
        order[3] = "middle";
        break;
      case "19":
        order[1] = "top";
        order[2] = "top";
        order[3] = "bottom";
        break;
      case "20":
        order[1] = "middle";
        order[2] = "top";
        order[3] = "bottom";
        break;
      case "21":
        order[1] = "bottom";
        order[2] = "top";
        order[3] = "bottom";
        break;
      case "22":
        order[1] = "top";
        order[2] = "middle";
        order[3] = "bottom";
        break;
      case "23":
        order[1] = "middle";
        order[2] = "middle";
        order[3] = "bottom";
        break;
      case "24":
        order[1] = "bottom";
        order[2] = "middle";
        order[3] = "bottom";
        break;
      case "25":
        order[1] = "top";
        order[2] = "bottom";
        order[3] = "bottom";
        break;
      case "26":
        order[1] = "middle";
        order[2] = "bottom";
        order[3] = "bottom";
        break;
      case "27":
        order[1] = "bottom";
        order[2] = "bottom";
        order[3] = "bottom";
        break;
    }
  });
  $('.step-0 button').click(function() {
    $('.step-0').slideUp();
    $('.step-1').fadeIn();
    $('body').css('background-color','aquamarine');
  });
  
  // Step 1
  $('.step-1 .card').click(function() {
    $('.step-1').slideUp();
    $('.step-2').fadeIn();
    $('body').css('background-color','#333');
  });
  
  // Step 2
  var cards = new Array();
  $('.step-1 .card').each(function() {
    cards.push($(this).outerHTML());
  });
  Shuffle(cards);
  $('.step-2 .pile-1 button').after(
    cards[0] + 
    cards[3] + 
    cards[6] + 
    cards[9] + 
    cards[12] + 
    cards[15] + 
    cards[18] + 
    cards[21] + 
    cards[24]
  );
  $('.step-2 .pile-2 button').after(
    cards[1] + 
    cards[4] + 
    cards[7] + 
    cards[10] + 
    cards[13] + 
    cards[16] + 
    cards[19] + 
    cards[22] + 
    cards[25]
  );
  $('.step-2 .pile-3 button').after(
    cards[2] + 
    cards[5] + 
    cards[8] + 
    cards[11] + 
    cards[14] + 
    cards[17] + 
    cards[20] + 
    cards[23] + 
    cards[26]
  );
  $('.step-2 .pile button').click(function() {
    cards = orderCards($(this).data('pile'), cards, order[1]);

    $('.step-2').slideUp();
    $('.step-3').fadeIn();
    $('body').css('background-color','aquamarine');
    
    // Step 3
    $('.step-3 .pile-1 button').after(
      cards[0] + 
      cards[3] + 
      cards[6] + 
      cards[9] + 
      cards[12] + 
      cards[15] + 
      cards[18] + 
      cards[21] + 
      cards[24]
    );
    $('.step-3 .pile-2 button').after(
      cards[1] + 
      cards[4] + 
      cards[7] + 
      cards[10] + 
      cards[13] + 
      cards[16] + 
      cards[19] + 
      cards[22] + 
      cards[25]
    );
    $('.step-3 .pile-3 button').after(
      cards[2] + 
      cards[5] + 
      cards[8] + 
      cards[11] + 
      cards[14] + 
      cards[17] + 
      cards[20] + 
      cards[23] + 
      cards[26]
    );
    $('.step-3 .pile button').click(function() {
      cards = orderCards($(this).data('pile'), cards, order[2]);

      $('.step-3').slideUp();
      $('.step-4').fadeIn();
      $('body').css('background-color','#333');

      // Step 4
      $('.step-4 .pile-1 button').after(
        cards[0] + 
        cards[3] + 
        cards[6] + 
        cards[9] + 
        cards[12] + 
        cards[15] + 
        cards[18] + 
        cards[21] + 
        cards[24]
      );
      $('.step-4 .pile-2 button').after(
        cards[1] + 
        cards[4] + 
        cards[7] + 
        cards[10] + 
        cards[13] + 
        cards[16] + 
        cards[19] + 
        cards[22] + 
        cards[25]
      );
      $('.step-4 .pile-3 button').after(
        cards[2] + 
        cards[5] + 
        cards[8] + 
        cards[11] + 
        cards[14] + 
        cards[17] + 
        cards[20] + 
        cards[23] + 
        cards[26]
      );
      $('.step-4 .pile button').click(function() {
        cards = orderCards($(this).data('pile'), cards, order[3]);

        $('.step-4').slideUp();
        $('.step-5').fadeIn();
        $('body').css('background-color','aquamarine');
        
        //$('.your_card').html(cards[fav_number - 1]);
        // Reveal cards
        $('.your_number').html(fav_number);
        var count = 1;
        $.each(cards, function() {
          $('#final_cards').append("<div>"+count+"</div>"+this);
          count++;
        });
      });
    });
  });
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console