Twitch API(FreeCodeCamp)

In this example below you will see how to do a Twitch API(FreeCodeCamp) with some HTML / CSS and Javascript

Practice using Twitchtv JSON API

Thumbnail
This awesome code was written by 1Moosey1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1Moosey1 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Twitch API(FreeCodeCamp)</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container text-center">

  <div class="row">
    <div class="col-lg-10 col-lg-offset-1">
      <nav class="navbar-inverse navbar-default">
        <ul class="nav nav-justified">
          <li>
            <a id="featured"> Featured </a>
          </li>
          <li>
            <a id="dota">Dota 2</a>
          </li>
          <li>
            <a id="coders">Coders</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-10 col-lg-offset-1">
      <div class="form-group has-feedback">
        <input type="text" class="form-control" id="search" oninput="search();">
        <i class="form-control-feedback glyphicon glyphicon-search"></i>
      </div>
    </div>
  </div>

  <div id="streamcontainer">
    <div class="row">
      <div class="col-lg-6 col-lg-offset-3 color" id="click-target">
        <img class="img-circle" src="" alt="">
        <h2 id="name"></h2>
        <hr>
        <h5 id="game"></h5>
        <h5 id="viewers"></h5>
      </div>
    </div>
  </div>
  
  <div id="insert-target"></div>

</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1Moosey1/twitch-apifreecodecamp-epdEZv */
body {
  background-color: #c0c0c0;
}

img {
  
  #float: left;
  width: 20%;
}

.color {
  
  border-style: solid;
  border-width: 1px;
  border-color:  #2e6da4; 
  border-radius: 10px;
  background-color: #337ab7;
}

.color:hover {
  background-color: #2e6da4;
}

#streamcontainer {
  display: none;
}

/*Downloaded from https://www.codeseek.co/1Moosey1/twitch-apifreecodecamp-epdEZv */
var currentStreams = [], searchStreams = [],
  coders = ["/freecodecamp", "/storbeck", "/terakilobyte", "/habathcx",
    "/RobotCaleb", "/thomasballinger", "/noobs2ninjas", "/beohoff",
    "/comet404", "/brunofin"],
    userPhoto = "https://s-media-cache-ak0.pinimg.com/564x/fd/0c/55/fd0c559856ca991e9e28937dc802f0b0.jpg";

var baseURL = "https://api.twitch.tv/kraken/streams",
    userURL= "https://api.twitch.tv/kraken/streams",
  featuredExt = "/featured?limit=10",
  dotaExt = "?game=Dota 2&limit=10";

$(document).ready(function() {
  
  $("#featured").click(requestFeaturedStreams);
  $("#dota").click(requestDotaStreams);
  $("#coders").click(requestCodeStreams);
  
  requestFeaturedStreams();
});

function requestFeaturedStreams() {
  requestJSON(baseURL + featuredExt, loadFeaturedStreams);
}

function requestDotaStreams() {
  requestJSON(baseURL + dotaExt, loadDotaStreams);
}

function requestCodeStreams() {
  
  currentStreams.length = 0;
  coders.forEach(function(coder) {
    requestJSON(userURL + coder, loadCodeStreams, handleStreamError);
  });
}

function requestJSON(URL, SUCCESS_CALLBACK, ERROR_CALLBACK) {
  
  $("#search").val("");
  ERROR_CALLBACK = ERROR_CALLBACK || SUCCESS_CALLBACK;

  var data = $.ajax({
    type: 'GET',
    url: URL,
    headers: {
      'Client-ID': '8fxw6t0toytznkl7h1guwcjfllk7zf4'
    },
    success: SUCCESS_CALLBACK,
    error: ERROR_CALLBACK
  });
}

function loadFeaturedStreams(data) {

  currentStreams.length = 0; 
  var featuredList = data.featured;
  featuredList.forEach(function(featuredItem) {
    currentStreams.push(featuredItem.stream);
  });
  
  displayStreamData(currentStreams);
}

function loadDotaStreams(data) {

  currentStreams.length = 0;
  
  //Place all streams in currentStreams array - Used for searching
  currentStreams = data.streams; 
  displayStreamData(currentStreams);
}

function loadCodeStreams(data) {

  //Check if the user is streaming
  if (data.stream == null) {

    //Update the stream values to reflect offline users
    data.stream = {

      game: "Offline",
      viewers: 0,
      channel: {

        logo: null,
        name: data._links.self.substr(37)
      }
    }
  }

  currentStreams.push(data.stream);
  displayStreamData(currentStreams);  
}

function handleStreamError(data) {
  
  console.log(arguments);
  console.log(data);
  var errorString = JSON.parse(data.responseText);
  console.log(errorString);
  //Update the stream values to reflect 404 users
  data.stream = {

      game: errorString.message,
      viewers: 404,
      channel: {

        logo: null,
        name: errorString.error
      }
    }
  
  currentStreams.push(data.stream);
  displayStreamData(currentStreams); 
}

function search() {

  searchStreams.length = 0;
  var searchTerm = $("#search").val();
  console.log(searchTerm);
  
  if (searchTerm == "")
    displayStreamData(currentStreams);
  else {

    currentStreams.forEach(function(stream) {
      
      if (stream.channel.name.match(searchTerm))
        searchStreams.push(stream);
    });
    
    displayStreamData(searchStreams);
  }
}

//Function deletes all old stream html and inserts a new div for every streamer
function displayStreamData(streams) {

  $("#insert-target").empty();
    streams.forEach(function(stream) {
    var $container = $("#streamcontainer").clone();
    $container.css("display", "block");

    if(stream.channel.logo == null)
      stream.channel.logo = userPhoto;
    $container.find("img").attr("src", stream.channel.logo);
      
    $container.find("#name").html(stream.channel.name);
    $container.find("#game").text(stream.game);
    $container.find("#viewers").text("Viewers: " + stream.viewers);
    $container.find("#click-target").click(clickHandler);
    $("#insert-target").append($container);
  });
}

function clickHandler() {
  window.open("https://www.twitch.tv/" + $(this).find("#name").text(), "_blank");
}

Comments