(function () {
'use strict';

  function $qs(qs) {
    return document.querySelector(qs);
  }

  document.body.addEventListener('keyup', function (ev) {
    console.log('ev.target.tagName:');
    console.log(ev.target.tagName);
    console.log('/\\bjs-zone\\b/.test(ev.target.className):');
    console.log(/\bjs-zone\b/.test(ev.target.className));
    if ('INPUT' === ev.target.tagName && /\bjs-zone\b/.test(ev.target.className)) {
      $qs('code.js-zone').innerHTML = ev.target.value || ':zone';
      // $qs('a.js-zone').setAttribute('data-href', ...)
      $qs('a.js-zone').href =
        $qs('a.js-zone').dataset.href.replace(/:zone/, ev.target.value || ':zone');
      return;
    }
    if ('INPUT' === ev.target.tagName && /\bjs-name\b/.test(ev.target.className)) {
      $qs('code.js-name').innerHTML = ev.target.value || ':name';
      $qs('a.js-name').href =
        $qs('a.js-name').dataset.href.replace(/:name/, ev.target.value || ':name');
      return;
    }
  });

}());