test.html

<title>2 hands 10 fingers</title>
<style>
html, body {
  width: 100%;
  height:100%;
  margin: 0;
  padding: 0;
  background: #024;
  color: #fff;
}
#wrap {
  width: 600px;
  margin: 0 auto;
}
.half {
  width: 50%;
  margin-top: 100px;
  float: left;
}
div {
  text-align: center;
  font-size: 60px;
  font-family: Helvetica, Arial, sans-serif;
}
#hands,
#fingers {
  font-weight: bold;
  font-size: 200px;
}
</style>
<script src="//js.leapmotion.com/0.2.0-beta1/leap.min.js"></script>
<div id="wrap">
  <div class="half">
    <div id="hands">2</div>
    <div id="description-hands">hands</div>
  </div>
  <div class="half">
    <div id="fingers">10</div>
    <div id="description-fingers">fingers</div>
  </div>
</div>
<script>
var handsDiv = document.getElementById("hands");
var fingersDiv = document.getElementById("fingers");

var handsDesc = document.getElementById("description-hands");
var fingersDesc = document.getElementById("description-fingers");

Leap.loop(function(obj) {
  var hands = obj.hands.length;
  var fingers = obj.pointables.length;

  handsDiv.innerHTML = hands;
  fingersDiv.innerHTML = fingers;

  var a = hands == 1 ? "hand" : "hands";
  var b = fingers == 1 ? "finger" : "fingers";

  handsDesc.innerHTML = a;
  fingersDesc.innerHTML = b;

  document.title = [hands, a, fingers, b].join(" ");
});
</script>