Generator Exercise: typewriter

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="lib/script.js"></script>
  </head>

  <body>
    <h1>Typewriter</h1>
    <h2>Typewriter content</h2>
    <textarea id="typewriter-text"></textarea>
    <br /><br />
    <button id="typewriter-start">Start typewriter</button>
    <p></p>
  </body>
</html>

{
  "plnkr": {
    "runtime": "system"
  }
}

/* Add your styles here */

body {
  font-family: Hiragino Sans;
}

// Generator & DOM Exercise 1:
// Typewriter

function* typewriter(text) {
  for (let i = 0; i < text.length; i++) {
    yield text.charAt(i);
  }
}

let func = typewriter('This is placeholder text. Why not add in your own text?');
let p = document.querySelector('p');
let start = document.getElementById('typewriter-start');
let text = document.getElementById('typewriter-text');

start.addEventListener('click', () => {
  func = typewriter(text.value);
  p.textContent = "";
  setInterval(function() {
    let val = func.next().value;
    if (val !== undefined) p.textContent += val;
  }, 90);
});