JSFiddle - React, Tailwind, and code Playground

by notjoelshapiro

HTML

<div id="menu">
  <div class="icon">CNN</div>
  <div class="icon">Wikipedia</div>
  <div class="icon" id="drama">Encyclopedia dramatica</div>
  <div class="icon">Flickr</div>
</div>
<input id="searchbar1" type="text" />
<div id="searchbar"></div>

CSS

#menu{
  background:red;
  border: 1px solid black;
  width: 10px;
  height: 10px;
  margin: 10px;
  position: absolute;
  z-index: 50;
  top: 10px;
}
.clicked{
   height: 50px !important;
    width: 200px !important;
}
.icon{
  display: none;
  border: 1px solid black;
  background: white;
}
.clicked div{
  display: block !important;
}
#searchbar1{
  background: white;
  border: 1px solid black;
  position: absolute;
  top: 10px;
  left: 25px;
}
#searchbar{
  position: absolute;
  top: 50px;
}

JavaScript

var timer = undefined;
$('#menu').click(function(){
  $(this).toggleClass('clicked');
  timer = new Date();
});
$('#drama').click(function(e){
  e.stopPropagation();
  $('#menu').toggleClass('clicked');
});
$('#searchbar1').bind('keyup', function(e){
  if(timer == undefined){
    timer = new Date();
  }
  if(e.keyCode == 13){
    currTime = timer.getTime();
    var tempDate = new Date().getTime() - currTime;
    alert(tempDate);
    tempDate = undefined;
  }
});