<!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">
    <div class="jumbotron">
      <h1>Generators</h1>
      <h2>I will only accept values higher than 10</h2>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div id="GeneratorsAsyncAwaitSim">
          <p class="placeholder lead"></p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <button class="btn btn-primary">Retry <span class="glyphicon glyphicon-refresh"></span></button>
        <span class="help-block">Click the retry button to generate new values</span>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>
const getPromise = () => new Promise((resolve, reject) => {
  let number = Math.floor(Math.random() * 21);
  if(number > 10) {
   resolve({ className: "text-success", value: `Resolved with value ${number}` }); 
  }else {
    reject({ className: "text-danger", value: `Rejected with value ${number}`  })
  }
});

const wrapper = (generator) => {
	var gen = generator();
	gen.next().value.then((v) => gen.next(v)).catch((e) => { gen.next(e); });
}

const generatorFunc = function* () {
  let element = document.querySelector("#GeneratorsAsyncAwaitSim");
	try {
		let result = yield getPromise();
		element.className = result.className;
		element.querySelector(".placeholder").innerHTML = result.value;
	} catch(e) {
		element.className = e.className;
		element.querySelector(".placeholder").innerHTML = `Error ${e.value}`;
	}
};

const makeRandom = () => wrapper(generatorFunc);

document.querySelector(".btn").addEventListener("click", () => makeRandom());

makeRandom();
/* Styles go here */

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node"
  }
}