bit.ly URL Shortener

bit.ly API via jQuery ajax author(s): Takeshi Takatsudo

by Soya Natsuki

HTML

<html>

  <head>

  </head>

  <body>
    <div class="container">
      <h1>Bit.ly URL Shortener</h1>
      <div class="container-inner">
        <input id="longUrl" type="text" value="http://example.com">
        <input id="button" type="submit" value="Shrink!">
      </div>
      <div class="container-inner">
        <div id="res">Shorten URL</div>
      </div>
    </div>
  </body>

</html>

CSS

body {
  margin: 10px;
  padding: 0;
}

.container {
  justify-content: center;
}

.container-inner {
  border: 1px solid;
  margin-bottom: .5em;
  width: 40%;
  padding: 10px;
}

input#longUrl {
  width: 60%;
}

JavaScript

var bitly_url = 'http://api.bitly.com/v3/shorten';
var bitly_login = 'o_7p7gs9lupm';
var bitly_apiKey = 'R_97c14a87b6444666b2daa30f6b5409fd';

/* proxy */

var shortenUrl = function(longUrl) {
  return $.Deferred(function(defer) {
    var action = bitly_url;
    var data = {
      login: bitly_login,
      apiKey: bitly_apiKey,
      format: 'json',
      longUrl: longUrl
    };
    $.ajax(action, {
      dataType: 'jsonp',
      data: data
    }).then(function(res) {
      if (!res || !res.data || !res.data.url) {
        reject();
        return;
      }
      defer.resolve(res.data.url);
    }, reject);

    function reject() {
      defer.reject({
        msg: 'bit.ly got problem'
      });
    }
  }).promise();
};

/* DOM things */

$(function() {

  var $longUrl = $('#longUrl');
  var $button = $('#button');
  var $res = $('#res');

  $button.click(function() {
    var longUrl = $longUrl.val();
    if (longUrl === '') {
      return;
    }
    shortenUrl(longUrl).then(function(shortUrl) {
      $res.text("res_> " + shortUrl);
    }, function() {
      alert('bit.ly may be offline');
    });
  });

});