JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<title>title</title>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/prismic.io.js"></script>
 <script>
   $(function(){
       function getBookmark(api, bookmark, options, callback) {
        return new Promise(function (resolve, reject) {
          var id = api.bookmarks[bookmark];
          if (id) {
            resolve(id);
          } else {
            var err = new Error("Error retrieving bookmarked id");
            if (callback) callback(err);
            reject(err);
          }
        }).then(function (id) {
          return api.getById(id, options, callback);
        });
      }

     function fillResults(results) {
       console.log("Fill", results);
       var $ul = $('#documents').empty();
       for (var i =0; i < results.length; i++) {
         $ul.append("<li>" + results[i].slug + "</li>");
       }
     }
     $('#submit').on('click', function(){
       var endpoint = $('#endpoint').val();
       console.log("click!", endpoint)
       window.Prismic.api(endpoint, function(err, api) {
         $('#messages').html(err ? ("<div class='bg-danger'>" + err + "</div>") : "");
         debugger;
         getBookmark(api, "about", {}, function(err, response) {
         		debugger;
           $('#messages').html(err ? ("<div class='bg-danger'>" + err + "</div>") : "");
           fillResults(response.results);
         });
       });
     });
   });
  </script>

  <body>
    <h1>Fetching Prismic.io data from a browser</h1>
    <div>The Javascript kit can be used server-side, but also client-side.</div>
    <div id="messages"></div>
    API enpoint: <input id="endpoint" value="https://lesbonneschoses.prismic.io/api" size="50">
    <button id="submit" class="btn btn-default">Go!</button>
    <ul id="documents">
    </ul>
    </body>