A Pen by Jonathan Lehman.

bEuwz.markdown

bEuwz

Forked from Chris Mar's Pen qfpCh.

A Pen by Jonathan Lehman on CodePen.

License.

index.html

<div class="board">
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">5</div>
  <div class="card">6</div>
  <div class="card">6</div>
  <div class="card">7</div>
  <div class="card">7</div>
  <div class="card">8</div>
  <div class="card">8</div>
  <div class="card">9</div>
  <div class="card">9</div>
</div>

script.js

$(".card").on("click", function() {
   if ($(".board").hasClass("locked")) { return }
  
   $(this).toggleClass("selected")
  
   var selected = $(".selected")
   if (selected.length == 2) {
     if (selected.first().html() == selected.last().html()) {
       selected.addClass("matched")
     } 
     
     $(".board").addClass("locked")
     setTimeout(function() {
       selected.removeClass("selected")
       $(".board").removeClass("locked")
     }, 1000)
   }
  
   if ($(".card").not(".matched").length == 0) {
     alert("winner!")
   }
})

style.css

* {
  box-sizing: border-box;
}

.board {
  width: 100%;
  margin: auto 0;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-content: center;
  align-items: center;
}

.card {
  margin: 1rem;
  padding: 1rem;
  font-size: 3rem;
  text-align: center;
  
  /* flex-grow: 1; */
  flex-basis: 150px;
  height: 150px;
  
  background-color: red;
  color: red;
}

.selected {
  color: white;
}

.matched {
  background-color: green;
  color: white;
}