JSFiddle - React, Tailwind, and code Playground

by sunnycpp

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

</head>
<body>  

<div id="target">
  <p>Click here set promise as Done!</p>
</div> 
  <br/>
<div id="reset" ><p>Reset</p></div>
  
</body>
</html>

CSS

DIV {      
      display:inline-block;
      vertical-align:middle;
      text-align:center; 
      margin-bottom: 10px;     
}

#target {
  width:200px;
  height:200px;
  background-color:yellow;
}

#reset {
  width:100px;
  height:100px;
  background-color:grey;
  color:white;
}

JavaScript

$(  
    function() {    
        var defered = new $.Deferred();
        var strHTMLBackup = $("#target p").html();        
         $("#reset").hide();
        function changeTextOfTarget(strSelector, strText) {
            var pTarget = $(strSelector);
            pTarget.fadeOut("Slow");
            pTarget.queue(function() {
                $(this).html(strText);
                $(this).dequeue();
            });
            pTarget.fadeIn("Slow");
        }

        function createNewPromise() {
            defered = new $.Deferred();             
            var ft = _.bind(changeTextOfTarget,this,"#target p","Promise Done! Click on reset to create new promise again");            
            defered.done(ft);
            defered.done(function() { $("#reset").show("slow"); });
        }

        $("#reset").on("click",function() {
            if(defered.state() !== "resolved")
                return;
            changeTextOfTarget("#target p",strHTMLBackup); 
            createNewPromise();
            $("#reset").hide("slow");
        });

        $("#target").on("click",function() {
            defered.resolve();
        });

        createNewPromise();
    }

    );