<h1>Twitch.tv Widget</h1>

<a href="#" class="twitch-widget" id="twitch-widget" target="_blank"></a>

.twitch-widget {
  background: black;
  border-radius: 5px;
  color: white;
  display: block;
  margin: 25px 0;
  padding: 10px;
  text-decoration: none;
}

.online,
.offline {
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.online {
  background: ForestGreen;
}

.offline {
  background: Crimson;
}

.viewers {
  color: white;
  display: block;
  margin: 0 0 0 15px;
  font-size: 0.8em;
}

(function() {
  var user_name, api_key, twitch_widget;

  user_name = "Biotoxz_";
  api_key = "k0mbicgg2kh23q8dajh4ajtkm1lt59";
  twitch_widget = $("#twitch-widget");

  twitch_widget.attr("href", "https://twitch.tv/" + user_name);

  $.getJSON(
    "https://api.twitch.tv/kraken/streams/" +
      user_name +
      "?client_id=" +
      api_key +
      "&callback=?",
    function(data) {
      if (data.stream) {
        twitch_widget.html(
          "<span class='online'></span> Online! Playing: " +
            data.stream.game +
            "<span class='viewers'>Viewers: " +
            data.stream.viewers +
            "</span>"
        );
      } else {
        twitch_widget.html("<span class='offline'></span> Offline");
      }
    }
  );
})();