JSFiddle - React, Tailwind, and code Playground

by Harris Brakmic

HTML

<span>Generator Results</span>
<div id="results" class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <div id="res"></div>
                        <div id="res2"></div>
                        <div id="res3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<span>Output</span>
<div class="well">
    <div class="container">
        <div class="row">
            <div class="col-md-5">
               <div id="output"></div>
            </div>
        </div>
    </div>
</div>

JavaScript

//helper function for DOM manipulation
var updateDOM = function(res,res2,res3){
    $('#res').html(JSON.stringify(res));
    $('#res2').html(JSON.stringify(res2));
    $('#res3').html(JSON.stringify(res3));
};

//Defines a generator to call a JSON webservice.
//info 1: for each "yield" a separate generator call is needed
//this is why generators are called "pausable functions"
//info 2: because we yield jQuery ajax calls the return values are
//promises and therefore we'll later use "then" to resolve values
//info 3: when dealing with generators one SHOULD use a proper library 
//like Bluebird: https://github.com/petkaantonov/bluebird
//or Q: https://github.com/kriskowal/q/
//This code is for demonstration purposes only!
var initJsonGenerator = function*() {
  var res = yield $.get("http://md5.jsontest.com/?text=callOne");
  var res2 = yield $.get("http://md5.jsontest.com/?text=callTwo");
  var res3 = yield $.get("http://md5.jsontest.com/?text=callThree");
  updateDOM(res,res2,res3);
};

//This function takes an initialized generator and calls its next() method.
//****************************************************************************
//Each time a next() method gets called a "yield" from within the generator 
//will be executed (yes, yes, it behaves like an Iterator but with generators
//one doesn't have to maintain internal state/position etc.). 
//****************************************************************************
//The returned values will contain the indicator "done"
//which tells us the current state of generator execution. As long as
//"done" is not set to "true" there's still some work to do (that is, some "yields" to
//get executed). And because the return values in this example contain promises
//we'll call their "then" methods to receive the returned MD5-hashes.
var useGenerator = function(gen) {
    //some "random" number to mark different calls
    var id = Math.floor(Math.random()*99999);
    $('#output').append('<p>Call ID: ' + id...