<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
      <h1>Generators</h1>
      <h2>Example 1: A simple generator</h2>
      <hr />
      <div class="row">
        <div class="col-md-12">
          <h4>Should expect value "Yo!" to print</h4>
          <div class="yo"></div>
        </div>
      </div>
      <hr />
      <div class="row">
        <div class="col-md-12">
          <h4>What the generator really returns in first iteration</h4>
          <div class="first-iteration"></div>
        </div>
      </div>
      <hr />
      <div class="row">
        <div class="col-md-12">
          <h4>What the generator returns in second iteration</h4>
          <div class="second-iteration"></div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>

</html>
function* myGenerator() {
  yield "Yo!";
}

var iterator = myGenerator();
var result = iterator.next();
document.querySelector(".yo").innerHTML = result.value;

document.querySelector(".first-iteration").innerHTML = JSON.stringify(result);

var nextIteration = iterator.next();
// I did a string concatenation because JSON.stringify omits the undefined value
document.querySelector(".second-iteration").innerHTML = `{ value: ${nextIteration.value}, done: ${nextIteration.done}  }`;
/* Styles go here */