Wii U PIN

by Rolando Islas

HTML

<div id="items">
  <div class="selection" data-n="0">♠</div>
  <div class="selection" data-n="1">♥</div>
  <div class="selection" data-n="2">♦</div>
  <div class="selection" data-n="3">♣</div>
</div>

<div id="selection-holder"></div>
<div id="out"></div>

CSS

.selection {
  font-size: 40px;
  line-height: 30px;
  width: 30px;
  margin: 0 0 0 5px;
  float: left;
  border: 2px black solid;
  border-radius: 5px;
  cursor: pointer;
}

#selection-holder {
  clear: both;
  width: 160px;
  height: 40px;
  border: 1px  black solid;
  margin: 10px 0 0 0;
}

JavaScript

function addItem() {
	var selectionHolder = $("#selection-holder");
  var out = $("#out");
	selectionHolder.append($(this).clone());
  out.append($(this).data("n"));
  if (selectionHolder.children().length == 4) {
    out.append("<br>");
    selectionHolder.html("");
  }
}
$(".selection").click(addItem);