cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <pre><code class="js magic "><span class="l1">magic(function*() {</span>
<span class="l2">    const uri = 'http://date.jsontest.com/';</span>
<span class="l3">    const response = yield fetch(uri);</span>
<span class="l4">    const date = yield response.json();</span>
<span class="l5">    const time = date.time;</span>
<span class="l6">    console.log('time: ', time);</span>
<span class="l7">});</span>

<span class="l8">function magic(generator) {</span>
<span class="l9">    const iterator = generator();</span>
<span class="l10">    const iteration = iterator.next();</span>
<span class="l11">    console.log('iteration: ', iteration);</span>
<span class="l12">    const promise = iteration.value;</span>
<span class="l13">    promise.then(response => {</span>
<span class="l14">        console.log('response: ', response);</span>
<span class="l15">        const anotherIterator = iterator.next(response);</span>
<span class="l16">        const anotherPromise = anotherIterator.value;</span>
<span class="l17">        anotherPromise.then(date => iterator.next(date));</span>
<span class="l18">    });</span>
<button class="prev">Prev</button>
<button class="next">Next</button>
<div class="bubble"></div>

              .bubble {
  color: white;
  background-color: CornflowerBlue;
  position: absolute;
              (function($) {

  var steps = [{
      selector: '.l1',
      text: 'first of all we are calling our magic function with a generator function'
    }, {
      selector: '.l8',
      text: 'this function awaits for a generator function'
    }, {
      selector: '.l9',
      text: 'it\'s calling the generator function (which will return a Generator object)'
    }, {
      selector: '.l10',
      text: 'the iterator object starts executing the generator function'
    }, {
      selector: '.l2',
      text: 'and jumps back to the generator function'
    }, {
      selector: '.l3',
      text: 'here we are yielding a Promise, and this is going to be "returned" to the caller function'
    }, {
      selector: '.l10',
      text: 'the iteration object has got a reference for that Promise object we just "returned" (yielded) from the generator function'
    }, {
      selector: '.l12',
      text: 'more precisely it\'s "value" property holds the reference, let\'s save it in the "promise" object'
    }, {
      selector: '.l13',
      text: 'after "promise" is resolved it is going to call the following function'
    }, {
      selector: '.l15',
      text: 'this function "continues" the execution of the generator function where we just left it, and passes the "response" object to it'
    }, {
      selector: '.l3',
      text: '"response" object has now result of the request'
    }, {
      selector: '.l4',
      text: 'the fetch API provides us a nice way to parse the response to JSON (which is going to give us a Promise)'
    }, {
      selector: '.l4',
      text: 'and we are yielding (let\'s forget about the word "returning" from now on) this Promise to the caller function'
    }, {
      selector: '.l15',
      text: '"anotherIterator" has the reference to that Promise'
    }, {
      selector: '.l16',
      text: 'in it\'s "value" property'
    }, {
      selector: '.l17',
      text: 'and if this Promise is resolved'
    }, {
      selector: '.l17',
      text: 'it is going to give back the result of the json() call to the generator function'
    }, {
      selector: '.l4',
      text: 'now the date has the actual data of the response'
    }, {
      selector: '.l6',
      text: 'and we can simply just log it out!'
    currentIndex = 0;

  $('.next').on('click', prevNextHandler);
  $('.prev').on('click', prevNextHandler);

  function prevNextHandler() {
    var top, left, width;

    top = $(steps[currentIndex].selector).position().top;
    left = $(steps[currentIndex].selector).position().left;
    width = $(steps[currentIndex].selector).outerWidth();

        top: top,
        left: left + width + 10
      .text('← ' + steps[currentIndex].text);

    $(this).hasClass('prev') ? currentIndex === 0 ? null : currentIndex-- : currentIndex === steps.length - 1 ? null : currentIndex++;
Loading ..................