Twitch.tv App

index.html

<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<div id="main-div" class="container">
  <div class="row">
    <div class="col-md-4 col-sm-4 col-xs-12">
      <img id="logo" src="http://res.cloudinary.com/devvzv96d/image/upload/c_scale,w_150/v1478861992/Twitch_Logo_White_u5y5an.png">
    </div> <!-- close logo div -->
    <div style="margin-top:1em;" class="text-center form-group col-md-4 col-sm-4 col-xs-12">
      <input type="text" id="search-input" style="color:black;" autocomplete="off" placeholder="Search...">
    </div> <!-- close search form div -->
    <div class="text-center col-md-4 col-sm-4 col-xs-12">
      <button id="all" class="btn btn-secondary">All</button>
      <button id="on" class="btn btn-secondary">On</button>
      <button id="off" class="btn btn-secondary">Off</button>
    </div> <!-- close buttons div -->
   </div> <!-- close row div -->
  
  <div id="result-container">
   
  </div> <!-- close results container div -->
</div> <!-- close main div -->

<div id="footer" class="text-center">
  Coded by <a href='https://www.freecodecamp.com/ellereeeee' target="_blank">Richard Ellery
  </div>

script.js

jQuery(function($){
  
  var streamersArr = ["ESL_SC2", "SaltyBet", "OgamingSC2", "cretetion", "FreeCodeCamp", "comster404"];
  
  function callAPI(section, streamer, callback) {
    $.getJSON('https://wind-bow.gomix.me/twitch-api/' + section + '/' + streamer + '?callback=?', function(data) {
      callback(data);
    }) // close getJSON
  } // close callAPI
  
  // check if user exists.  If not, tell user, if they do, add display_name and logo
  streamersArr.forEach(function(streamer) {
    callAPI('channels', streamer, function(channelData) {
      // if user does not exist, inform user
      if (channelData.status === 404) {
        $('#result-container').append('<div class="result error row"><div class="col-xs-4 col-sm-2 col-md-2"><div class="pic"><img class="img-responsive" src="http://res.cloudinary.com/devvzv96d/image/upload/v1479131984/white-error-256_vix4cw.png"></div></div><div class="col-xs-6 col-sm-3 col-md-2 user result-text">' + streamer + '</div><div class="col-xs-8 col-sm-6 col-md-4 result-text"><em>Account does not exist</em></div></div>');
        console.log('Unavailable: ' + streamer);
      } // close if statement
      else {
        callAPI('streams', streamer, function(streamData) {
          if (streamData.stream === null) {
          // if user is not streaming, get their info and show that they're offline
          $('#result-container').append('<a target="_blank" href="' + channelData.url + '"><div class="result offline row"><div class="col-xs-4 col-sm-2 col-md-2"><div class="pic"><img class="img-responsive" src="' + channelData.logo + '"></div></div><div class="col-xs-6 col-sm-3 col-md-2 user result-text">' + channelData.display_name + '</div><div class="col-xs-8 col-sm-4 col-md-3 result-text"><em>Offline</em></div></div></a>');
          console.log('Offline: ' + streamer);
         } // close if statement
        
        else {
          // get data for online users
          $('#result-container').append('<a target="_blank" href="' + channelData.url + '"><div class="result online row"><div class="col-xs-4 col-sm-2 col-md-2"><div class="pic"><img class="img-responsive" src="' + channelData.logo + '"></div></div><div class="col-xs-6 col-sm-3 col-md-2 result-text user">' + channelData.display_name + '</div><div class="col-xs-6 col-sm-4 col-md-3 result-text"><em>' + channelData.game + '</em></div><div class="status hidden-xs col-sm-9 col-md-9"><span style="font-size:.8em;"><em>' + channelData.status + '</em></span></div></div></a>');
            console.log('Online: ' + streamer);
          } // close else statement
        }) // close getJSON statement
      } // close else statement
    }) // close getJSON method
  }); // close forEach method

  // make the buttons and search form work
  $('#on').click(function() {
    $('.result').hide();
    $('.online').slideDown('slow');
  }) // close "On" function
    
  $('#off').click(function() {
    $('.result').hide();
    $('.offline').slideDown('slow');
  }) // close "Off" function
    
  $('#all').click(function() {
    $('.result').hide();
    $('.result').slideDown('slow');
  }) // close "All" function
    
  $('#search-input').keyup(function() {
    var input = $(this).val().toLowerCase();
    $('.user').each(function() {
      var display_name = $(this).html().toLowerCase();
      if (display_name.includes(input)) {
        $(this).parent().show();
      }
      else {
        $(this).parent().hide();
      }
    }) // close each function 
  }) // close keyup function 

}) // close jQuery(function($) 

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

body {
  height: 100%;
  background-color: #6441A4;
  font-size: 2em;
  color: white;
  font-family: 'Arimo', sans-serif;
  padding-top: .6em;
}

html {
  height: 100%;
}

a, a:hover, a:visited {
     color: white;
     text-decoration: none;
}

#main-div {
  background-color: black;
  width: 95%;
  display: block;
  margin: auto;
  border-radius: 5px;
  border-style: solid;
  border-color: white;
  box-shadow: 10px 10px 5px black;
}

#logo {
  display: block;
  margin: auto;
  margin-top: .8em;
}

#search-input {
  height: 35px;
  width: 90%;
  border-radius: 5px;
  padding-left: 10px;
}

.btn {
  margin-bottom: 1.8em;
}

.btn-secondary {
  background-color: white;
  color: black;
}

.result {
  display: block;
  margin: auto;
  margin-bottom: .5em;
  padding-top: .5em;
  padding-bottom: .5em;
  border-style: solid;
  border-radius: 5px;
  width: 100%;
  color: white;
}

.online {
  border-color: #39FF14;
  color: #39FF14;
  animation: border-pulse 2s infinite;
}

@keyframes border-pulse {
  0% {box-shadow: 0 0 .5em #39FF14;}
  50% {box-shadow: 0 0 1.5em #39FF14;}
  100% {box-shadow: 0 0 .5em #39FF14;}
}

.pic {
  height: 3em;
  width: 3em;
  border-style: solid;
  border-radius: 5px;
  border-width: medium;  
}

.result-text {
  font-size: .9em;
}

.user {
  margin-right: 1em;
}

.status {
  font-size: .75em;
  margin-bottom: .5em;
}

#footer {
  font-size: .8em;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-top: 1em;
  margin-bottom: .3em;
  color: white;
}

@media only screen and (min-width: 480px) {
  #main-div {
    width: 90%;
  }
  
  #search-input {
    width: 70%;
  }
  
    .result-text {
    font-size: 1em;
  }
  
}

@media only screen and (min-width: 768px) {
  body {
    padding-top: 1em;
  }
  
  #main-div {
    width: 69%;
  }
  
  .btn {
    margin-top: 1.9em;
  }
  
  #search-input {
    width: 120%;
    margin-top: .3em;
  }
  
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

twitch-tv-app.markdown

Twitch.tv App

User Story: I can see whether Free Code Camp is currently streaming on Twitch.tv.

User Story: I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.

User Story: if a Twitch user is currently streaming, I can see additional details about what they are streaming.

User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.

A Pen by Richard Ellery on CodePen.

License.