Cacher is the code snippet organizer for pro developers

body{
  margin:0;
  padding:0;
  background:#E74C3C;
  overflow:hidden;
  background-repeat:no-repeat  !important;
  background-position: center center  !important;
  background-attachment: fixed  !important;
  background-size:cover !important;
}
.box{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  padding:5px;
  display:block;
  box-sizing:border-box;
  width:195px;
  height:195px;
  border-radius:100%;
  overflow:hidden;
  text-align:center;
  line-height:160px;
  font-size:25px;
  font-family:monospace,cursive;
  background:#E74C3C;
  color:#ECF0F1;
  text-shadow:0 2px 2px #eee,0 4px 1px #000;
  cursor:pointer;
  border: 10px solid #C0392B;
}
.info{
  position:absolute;
  top:0;
  left:0;
  margin:auto;
  padding:5px;
  display:block;
  box-sizing:border-box;
  width:100%;
  text-align:center;
  font-size:15px;
  color:#ECF0F1;
}

var box = document.querySelector('.box')
    bdy = document.body,
    tiny = 'http://tinyurl.com/',
    arr = ["dragleft dragright swipeleft swiperight","dragup dragdown swipeup swipedown","tap","doubletap","hold"];

// array
arr.forEach(function(item, i){
  return touchme(item);
});


// touchme(swipeleft)
function touchme(obj){
  var options = {
    dragLockToAxis: true,
    dragBlockHorizontal: true,
    preventDefault: true
  };
  var hammertime = new Hammer(box, options);
  hammertime.on(
    obj, function(ev){ 
      evt(ev.type);
    });
  return obj;
}

// switch events
function evt(e){
  switch(e) {
    case 'dragleft':
      box.innerHTML ='Dragleft';
      bdy.style.background= 'url('+tiny+'qj96sqg) #1ABC9C';
      break;
    case 'dragright':
      box.innerHTML ='Dragright';
      bdy.style.background= 'url('+tiny+'ntv8o4b) #2ECC71';
      break;
    case 'swipeleft':
      box.innerHTML ='Swipeleft';
      bdy.style.background= 'url('+tiny+'o49hz5l) #D35400';
      break;
    case 'swiperight':
      box.innerHTML ='Swiperight';
      bdy.style.background= 'url('+tiny+'ogaw4jp) #9B59B6';
      break;
    case 'dragup':
      box.innerHTML ='Dragup';
      bdy.style.background= 'url('+tiny+'ncaxtrt) #3498DB';
      break;
    case 'dragdown':
      box.innerHTML ='Dragdown';
      bdy.style.background= 'url('+tiny+'pqekryh) #F1C40F';
      break;
    case 'swipeup':
      box.innerHTML ='Swipeup';
      bdy.style.background= 'url('+tiny+'o35rllt) #E67E22';
      break;
    case 'swipedown':
      box.innerHTML ='Swipedown';
      bdy.style.background= 'url('+tiny+'phcpjn9) #E74C3C';
      break;
    case 'tap':
      box.innerHTML ='Tap';
      bdy.style.background= 'url('+tiny+'puqy538) #ECF0F1';
      break;
    case 'hold':
      box.innerHTML ='Hold';
      bdy.style.background= 'url('+tiny+'nov8bna) #7F8C8D';
      break;
  }// switch
  return e;
}

<div class="box">
  Touchme
</div>


<div class="info">Testing Hammer.js</div>