React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<div id="container">
  <div id='overlay'>
    HELLO Overlay
  </div>
  <button id='clickme' value='Hello click me'>HELLO Double Click Me</button>
</div>

CSS

#overlay{
  width: 100px;
  height: 100px;
  background-color:red;
  display:none;
}

#overlay.visible{
  display:block;
}


#clickme.moved{
  margin-top:100px;
}

JavaScript

console.log('HELLLOOO')

var button = document.querySelector('#clickme')
console.log('button', button)

button.onclick = function() {
	document.querySelector('#overlay').classList.add('visible')
  button.classList.add('moved')
  
  setTimeout(function(){
    document.querySelector('#overlay').classList.remove('visible')
  	button.classList.remove('moved')
  }, 2000)
}

document.querySelector('#overlay').ondblclick = function(e) {
  alert('ondblclick')
  console.log('double click', e)
}