title: Creating a memory game based off of JavaScript
body: <p>Getting a little stuck on creating a memory game based on javascript. </p>
  
  <p>Am i doing this correctly? </p>
  
  <p>I would like to do a reset whenever choiceOne and choiceTwo do not match. </p>
  
  <p>Any help would be greatly appreciated. Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $item = $('li'),
      numClick = 0,
      choiceOne,
      choiceTwo;
  
  $item.click(function(e) {
      var el = $(this).find('span');
  
   $(this).find('span').removeClass('none');
      numClick++;
      
      if (numClick === 1) {
       choiceOne = el.data('id');
      } else if (numClick === 2) {
       choiceTwo = el.data('id');
      }
      
      if (choiceOne === choiceTwo) {
       alert('thats a match!')
      }
      
      if (numClick  &gt; 2) {
       numClick = 0;
      }
  
  });
      </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li {
      margin: 10px;
      float: left;
      list-style: none;
      border: 1px solid;
      width: 100px;
      height: 100px;
  }
  
  span {
      display: block;
      width: 100%;
      height: 100%;
  }
  
  .one {
      background-color: red;
  }
  
  .two {
      background-color: blue ;
  }
  
  .three {
      background-color: green;
  }
  
  .four {
      background-color: yellow;
  }
  
  .five {
      background-color: orange;
  }
  
  .none {
      display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;&lt;/div&gt;
     &lt;div class="colors"&gt;
      &lt;li&gt;
          &lt;span data-id="red" class="one none"&gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span data-id="blue" class="two none"&gt;&lt;/span&gt;
       &lt;/li&gt;
      &lt;li&gt;
          &lt;span data-id="green" class="three none"&gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span data-id="yellow" class="four none"&gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span data-id="orange" class="five none"&gt;&lt;/span&gt;
       &lt;/li&gt;
     &lt;/div&gt;
  
     &lt;div class="text"&gt;
      &lt;li&gt;
          &lt;span data-id="red" class="red none"&gt;red&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span data-id="blue" class="blue none"&gt;blue&lt;/span&gt;
       &lt;/li&gt;
      &lt;li&gt;
          &lt;span data-id="green" class="green none"&gt;green&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span data-id="yellow" class="yellow none"&gt;yellow&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span data-id="orange" class="orange none"&gt;orange&lt;/span&gt;
       &lt;/li&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>