JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<p>Enter a short URL and click "Expand URL" to get the full URL.</p>
    <div id="requestFields" style="">
      <label for="shortUrl">Short URL </label>
      <input id="shortUrl" type="text" value="http://goo.gl/fbsS" />
      <button onclick="makeRequest();">
        Expand URL
      </button>
    </div>
    <div style="margin-top:0.5em;"><span id="info">Results</span></div>
        <script>
      // Enter the API key from the Google Developer Console - to handle any unauthenticated
      // requests in the code.
      // The provided key works for this sample only when run from
      // https://google-api-javascript-client.googlecode.com/hg/samples/simpleRequest.html
      // To use in your own application, replace this API key with your own.
      var apiKey = 'AIzaSyAdjHPT5Pb7Nu56WJ_nlrMGOAgUAtKjiPM';
      function handleClientLoad() {
          gapi.load('client', initClient);
      }
      function initClient() {
        gapi.client.init({
          apiKey: apiKey,
          discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/urlshortener/v1/rest']
        }).then(showInputs)
      }
      function showInputs() {
        document.getElementById('requestFields').style.display = '';
      }
      function makeRequest() {
        function writeResponse(resp) {
          var responseText;
          if (resp.code && resp.data[0].debugInfo == 'QuotaState: BLOCKED') {
            responseText = 'Invalid API key provided. Please replace the "apiKey" value with your own.';
          } else {
            responseText = 'Short URL ' + shortUrl + ' expands to ' + resp.longUrl;
          }
          var infoDiv = document.getElementById('info');
          infoDiv.innerHTML = '';
          infoDiv.appendChild(document.createTextNode(responseText));
        }
        var shortUrl = document.getElementById('shortUrl').value;
        var request = gapi.client.urlshortener.url.get({
          'shortUrl': shortUrl
        });
       ...