Async design

by gaboom

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<span class="buy" id="buy-sync">
Purchase for $1<br/>
(synchronous design)
</span>
<span class="buy" id="buy-real">
Purchase for $1<br/>
(reality can hurt)
</span>
<span class="buy" id="buy-async">
Purchase for $1<br/>
(asynchronous design)
</span>
<div id="done">
  <span>Thank you for your purchase!</span><br/><br/>
  <span>We collected </span><span id="money">0</span><span> dollar from your credit card.</span><div/><br/><br/>
  <button id="ok">OK</button>
</div>

CSS

body {
  margin-top: 100px;
  text-align: center;
}

span.buy {
  border: 1px solid blue;
  padding: 5px;
  margin-top: 25px;
  margin: 5px;
  color: blue;
  cursor: pointer;
  display: inline-block;
}

#done {
  display: none;
  position: absolute;
  width: 450px;
  height: 160px;
  top: 25px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background: blue;
  border-radius: 25px;
  padding: 25px;
  color: white;
  font-weight: bold;
}

#money {
  font-size: 2rem;
}

.progress {
  cursor: wait !important;
  color: grey !important;
  border: grey !important;
}

JavaScript

$(function(){
  var buys = 0;
  var done = null;
	$('#ok').click(function(){
  	$('#done').hide();
  });
  $('#buy-sync').click(function(){
  	$('#money').text(1);
  	$('#done').show();
  });
  $('#buy-real').click(function(){
    buys++;
  	$('#money').text(buys);
    clearTimeout(done);
    done = setTimeout(function(){
      buys = 0;
    	$('#done').show();
      done = null;
    }, 5000);
  });
  $('#buy-async').click(function(){
  	$('#money').text(1);
    $('#buy-async').addClass('progress');
    if (done) return;
    done = setTimeout(function(){
    	$('#done').show();
       $('#buy-async').removeClass('progress');
      done = null;
    }, 5000);
  });
});