Twitch App

index.html

<div id="content">
  <div id="header">
    <ul>
      <li>
       <a href="https://www.twitch.tv/freecodecamp"><div id="fccStatus"></div></a>
     </li>
      <li>
        <img src="https://c8.staticflickr.com/6/5456/31047970071_6d7d6ef75b_b.jpg" class="twitch-img">      </li>
      <li><button class="online ">Online</button>
<button class="offline ">Offline</button>
<button class="all">All</button></li>
    </ul>
  </div>
  
<div id="online"></div>
<div id="offline"></div>
<div id="error"></div>
  
</div>

script.js

$(document).ready(function() {
var streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404", "dansgaming"];
  
  for(var i=0; i < streamers.length; i++) {
    
    var streamsURL = 'https://api.twitch.tv/kraken/streams/' + streamers[i] + '/?client_id=ldw9j1vrulwfjraqhso28926mkz4qos&callback=?';
    var channelsURL = 'https://api.twitch.tv/kraken/channels/' + streamers[i] + '/?client_id=ldw9j1vrulwfjraqhso28926mkz4qos&callback=?';
    var fccURL = "https://api.twitch.tv/kraken/streams/freecodecamp?client_id=ldw9j1vrulwfjraqhso28926mkz4qos&callback=?";
    
    $.getJSON(fccURL, function(data3){
    var link; 
    if(data3.stream===null) {
      $("#fccStatus").html("Free Code Camp is Offline")
    } else {
      link = 'https://www.twitch.tv/freecodecamp';
      
      $("#fccStatus").html("Free Code Camp is Online")
    }
  });
    
    
    $.getJSON(streamsURL).done(function(data1) {
      var name;
      var logo;
      var status;
      var link;
      
       if(data1.stream != null) {
        name = data1.stream.channel.display_name;
        logo = data1.stream.channel.logo;
        status = data1.stream.channel.status;
        link = data1.stream.channel.url;  
        
        $("#online").append("<a href=" + link + "><ul><li class='logo'>" + "<img src=" + logo + ">" + "</li>" + "<li class='name'>" + name + "</li>" + "<li class='status'>" + status + "</li></ul></a>");
        
      } else if (data1.stream === null) {

         $.getJSON(data1._links.channel + '/?client_id=ldw9j1vrulwfjraqhso28926mkz4qos&callback=?',function(data2){
         
         var errorLogo;
         var errorMessage;
      
           if (data2.error) {
           errorLogo= "https://c1.staticflickr.com/1/629/31121855544_7c2d25a3fd_t.jpg";
           errorMessage = data2.message;
             
           $("#error").append("<ul><li class='logo'>" + "<img src=" + errorLogo + ">" + "</li>" + "<li class='name'>" + errorMessage + "</li></ul>");
             
           } else {
        
            var logo = data2.logo;
            var name = data2.display_name;
            var link = data2.url;
     
           $("#offline").append("<ul><li class='logo'>" + "<a href=" + link + "><img src=" + logo + ">" + "</a></li>" + "<li class='name'>" + name + "</li>" + "<li class='status'>Offline</li></ul>");
             }
          });
         }
       });
     }
  
  $('.online').on('click', () =>{
    $('#offline').hide();
    $('#error').hide();
    $('#online').show();
  });
  
    $('.offline').on('click', () =>{
    $('#online').hide();
    $('#error').hide();
    $('#offline').show();
  });
  
    $('.all').on('click', () =>{
    $('#offline').show();
    $('#error').show();
    $('#online').show();
  });
  
  
  
  });
    
    
    
    
    
  
  
  
 
    
   
  
  
  

scripts

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

style.scss

$twitch-color: #6441A4;

body {
  background-color: $twitch-color;
}


img {
  width: 60px;
}


#content {
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 70px auto;
  @media (max-width: 769px) {
    width: 100%;
  }
  
  #header {
    ul {
    display: flex;
    justify-content: space-around;
    background-color: #FFF;
    margin-bottom: 0;
    padding: 2em;
    border-radius: 10px 10px 0 0;
    border-bottom: 5px solid #000;
    flex-direction: column;
       @media (min-width: 769px) {
          flex-direction: row;
        }
      @media (max-width:769px) {
      li:nth-child(1) {
        order: 3; 
        -webkit-order: 3;
      }
      li:nth-child(2) {
        order: 2; 
        -webkit-order: 2;
            }
      li:nth-child(3) {
        order: 4; 
        -webkit-order: 4;
            }
      }
      li {
        display: flex;
        list-style-type: none;
        align-items: center;
        @media (max-width: 769px) {
          justify-content: center;
          align-items: center;
        }
      
        
         a {
            text-decoration: none;
            #fccStatus {
              font-family: arial;
              @media (max-width: 769px) {
                padding: 2em;
              }
             }
            }

          .twitch-img {
            @media (min-width: 769px) {
              width: 250px;
            }
            width: 50%;
            order: -1;
            
            }
        
        
          button {
            background-color: $twitch-color;
            border: 0;
            color: #FFF;
            padding: 15px;
            border-radius: 15px;
            text-align: right;
            margin: 10px;
            font-size: 15px;

          }
        button:hover {
          background-color: #3A02A0;
        }

        button:active {
          transform: translateY(4px);
        }
      }
    }
  }
  
  #online {
    a {
      text-decoration: none;
      color: #000;
    }
  }
  
  #offline,
  #online,
  #error {
   
    ul {
      padding-left: 0;
      display: flex;
      border-bottom: 5px solid #000;
      margin: 0;
      
      background-color: #FFF;
      
       li {
        list-style-type: none;
        align-self: center;
         
      }
      .name {
        font-family: arial;
        text-transform: uppercase;
        padding-left: 10px;
        font-size: 20px;
        @media (max-width: 769px) {
          font-size: 12px;
        }
      }
      .status {
        margin-left: auto;
        font-family: arial;
        padding-right: 10px;
        width: 40%;
         @media (max-width: 769px) {
          font-size: 12px;
        }
      }
      .logo {
        padding: 1em;
        }
      }
    
  }
}

twitch-app.markdown

Twitch App

The user can see if a Twitch user is currently either streaming or offline, using Twitch’s JSON API. Also has a separate section to see if Free Code Camp is currently streaming or not.

A Pen by Jessica on CodePen.

License.