title: toggle class to show cards
body: <p>I am writing a memory game in JavaScript.
  I am at the step where I should add <code>toggleClass</code>, so when the cards are clicked they will be shown.  I was told that I should solve this issue with <code>event.target</code>. When I click the cards are being shown, but in tiny icons and not in the boxes where they belong. Can someone help me understand what I'm doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*
   * Create a list that holds all of your cards
   */
  
  
  /*
   * Display the cards on the page
   *   - shuffle the list of cards using the provided "shuffle" method below
   *   - loop through each card and create its HTML
   *   - add each card's HTML to the page
   */
  
  // Shuffle function from http://stackoverflow.com/a/2450976
  
  var myCard = ["fa fa-diamond", "fa fa-paper-plane-o", "fa fa-anchor", "fa fa-bolt", "fa fa-cube", "fa fa-leaf", "fa fa-bicycle", "fa fa-bomb"];
  
  
  
  myCard.forEach(function(item) {
    var li = document.createElement("li");
    var text = document.createTextNode(item);
    li.appendChild(text);
    document.getElementById("myUL").appendChild(li);
  });
  
    function shuffle(myCard) {
      var currentIndex = array.length, temporaryValue, randomIndex;
  
      while (currentIndex !== 0) {
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;
          temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
      }
  
      return myCard;
  }
  function handler(event) {
    var target = $( event.target );
    if ( target.is( "li" ) ) {
      target.children().toggle();
    }
  }
  /*$(document).ready(function() {
      $("li").click(function(event) {
        $target = $(event.target);
        $target.toggleClass("card");
      });
    });
  
  
  
  /*
  /*
   * set up the event listener for a card. If a card is clicked:
   *  - display the card's symbol (put this functionality in another function that you call from this one)
   *  - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one)
   *  - if the list already has another card, check to see if the two cards match
   *    + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one)
   *    + if the cards do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one)
   *    + increment the move counter and display it on the page (put this functionality in another function that you call from this one)
   *    + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one)
   */</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
      box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
      box-sizing: inherit;
  }
  
  html,
  body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
  }
  
  body {
      background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
      font-family: 'Coda', cursive;
  }
  
  .container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  
  h1 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
  }
  
  /*
   * Styles for the deck of cards
   */
  
  .deck {
      width: 660px;
      min-height: 680px;
      background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
      padding: 32px;
      border-radius: 10px;
      box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin: 0 0 3em;
  }
  
  .deck .card {
      height: 125px;
      width: 125px;
      background: #2e3d49;
      font-size: 0;
      color: #ffffff;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
  }
  
  .deck .card.open {
      transform: rotateY(0);
      background: #02b3e4;
      cursor: default;
  }
  
  .deck .card.show {
      font-size: 33px;
  }
  
  .deck .card.match {
      cursor: default;
      background: #02ccba;
      font-size: 33px;
  }
  
  /*
   * Styles for the Score Panel
   */
  
  .score-panel {
      text-align: left;
      width: 345px;
      margin-bottom: 10px;
  }
  
  .score-panel .stars {
      margin: 0;
      padding: 0;
      display: inline-block;
      margin: 0 5px 0 0;
  }
  
  .score-panel .stars li {
      list-style: none;
      display: inline-block;
  }
  
  .score-panel .restart {
      float: right;
      cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="deck"&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-diamond"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-paper-plane-o"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card match"&gt;
                  &lt;i class="fa fa-anchor"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-bolt"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-cube"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card match"&gt;
                  &lt;i class="fa fa-anchor"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-leaf"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-bicycle"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-diamond"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-bomb"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-leaf"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-bomb"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card open show"&gt;
                  &lt;i class="fa fa-bolt"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-bicycle"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-paper-plane-o"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;li class="card"&gt;
                  &lt;i class="fa fa-cube"&gt;&lt;/i&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;ul id="myUL"&gt;
      &lt;/ul&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>