JSFiddle - React, Tailwind, and code Playground

by TrevorBurnham

HTML

<div id="container">
  <div id="buttons">
    <button id="readyButton">Ready</button>
    <button id="setButton" disabled>Set</button>
    <button id="goButton" disabled>Go!</button>
  </div>
</div>

CSS

#container {
  margin: 20px;  
}

#buttons {
  margin: 20px 46px;  
}

button {
  width: 100px;
  height: 30px;
  cursor: pointer;
}

JavaScript

var readying = new $.Deferred();
var setting  = new $.Deferred();
var going    = new $.Deferred();


$('#readyButton').click(readying.resolve).click(function() {
  $(this).attr('disabled', true).next().removeAttr('disabled');
});
$('#setButton').click(setting.resolve).click(function() {
  $(this).attr('disabled', true).next().removeAttr('disabled');
});
$('#goButton').click(going.resolve).click(function() {
  $(this).attr('disabled', true).next().removeAttr('disabled');
});

$.when(readying, setting, going).done(function() {
  $('#container').append('<img src="http://www.prguitarman.com/comics/poptart1red1.gif">');
});