FCC Twitch.TV App

FCC Twitch.TV App.markdown

FCC Twitch.TV App

A web app that shows who from Free Code Camp is live streaming on Twitch.tv. I am using, Jade, Stylus, CoffeeScript, Semantic-UI, jQuery, Unsplash.it, and Twitch API.

A Pen by Adam Recvlohe on CodePen.

License.

index.html

.container
  h1 Free Code Camp on Twitch.TV
  .ui.top.attached.tabular.menu
    a(data-tab="first").item.active#all All Users
    a(data-tab="second").item#online Online
    a(data-tab="third").item#offline Offline
  .ui.bottom.attached.active.tab.segment(data-tab="first")#tab-one
    .ui.centered.link.cards#all-users     
  .ui.bottom.attached.tab.segment(data-tab="second")#tab-two
    .ui.centered.link.cards#online-users
  .ui.bottom.attached.tab.segment(data-tab="third")#tab-three
    .ui.centered.link.cards#offline-users

script.js

$ ->
  ## Array of Free Code Camp channels on Twitch.TV
  channels = [
    'FreeCodeCamp'
    'storbeck'
    'terakilobyte'
    'Habathcx'
    'RobotCaleb'
    'thomasballinger'
    'noobs2ninjas'
    'brunofin'
    'Beohoff'
    'MedryBW'
    'comster404'
   ]
    
  ## Call on the Twitch.TV API to retrieve channel information
  twitchChannels = ->
      
    ## Twitch.TV API channel call
    twitchChannelsURL = 'https://api.twitch.tv/kraken/channels/'   
    ## Iterate over each channel
    $.each channels, (key, value) ->
      ## For each channel make an API call
      $.ajax 
        dataType: 'jsonp'
        url: twitchChannelsURL + value
        crossDomain: true
        success: (data) ->
        ## Channel data
          name = data.display_name
          description = data.game
          logo = data.logo
          url = data.url
          views = data.views
          followers = data.followers
          status = data.status
          
          ## Set of default values if certain data is not available
          if logo == null 
            logo = 'https://unsplash.it/500?image=0'
          if description == null
            description = 'Programming'
          if status == 422
            description = 'No longer a user on Twitch.tv'
            name = value
            logo = 'https://unsplash.it/500?image=0&blur'
            followers = ''
            views = ''
            url = '#'
          
          ## For each channel create a card that includes the data retreived
          $('#all-users')
            .append '<div class="card" id='+name+'>
                        <a class="image" href='+url+' target="_blank">
                          <img src='+logo+' >
                        </a>
                        <div class="content">
                          <div class="header">'+name+'</div>
                          <div class="description">
                            '+description+'
                          </div>
                        </div>
                        <div class="extra content">
                          <i class="unhide icon"></i>
                          '+views+'
                          &nbsp;
                          <i class="user icon"></i>
                          '+followers+'
                        </div>
                      </div>'
            return
          return
       return
  
  ## Use the Twitch.TV streams API to check whether the channel is live
  twitchStreams = ->
    ## Twitch.TV API streams call
    twitchStreamsURL = 'https://api.twitch.tv/kraken/streams/'
    ## Iterate over each channel
    $.each channels, (key, value) ->
      ## For each channel make an API Call
      $.ajax 
        dataType: 'jsonp'
        url: twitchStreamsURL + value
        crossDomain: true
        success: (data) ->
        ## Stream data
          if data['stream'] == null
            $('#'+value).addClass 'red'
            $('#'+value).clone().appendTo $('#offline-users')
            return
          else if data.status == 422
            $('#'+value).addClass 'yellow'
            return
          else
            $('#'+value).addClass 'green'
            $('#'+value).clone().appendTo $('#online-users')
            $('#'+value+' .description')
              .replaceWith('<div class="description">' + data.stream.channel.status + '</div>')
          return
       return
  
  ## Tabs
  tabs = ->
    
    allTab = ->
      $('#all').click ->
        $('#all').addClass 'active'
        $('#offline').removeClass 'active'
        $('#online').removeClass 'active'
        $('#tab-one').addClass 'active'
        $('#tab-two').removeClass 'active'
        $('#tab-three').removeClass 'active'
        return
      return

    onlineTab = ->
      $('#online').click ->
        $('#online').addClass 'active'
        $('#all').removeClass 'active'
        $('#offline').removeClass 'active'
        $('#tab-one').removeClass 'active'
        $('#tab-two').addClass 'active'
        $('#tab-three').removeClass 'active'
        return
      return

    offlineTab = ->
      $('#offline').click ->
        $('#offline').addClass 'active'
        $('#all').removeClass 'active'
        $('#online').removeClass 'active'
        $('#tab-one').removeClass 'active'
        $('#tab-two').removeClass 'active'
        $('#tab-three').addClass 'active'
        return
      return
    
    allTab()
    onlineTab()
    offlineTab()
  
  twitchChannels()
  twitchStreams()
  tabs()
    
  return

scripts

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

style.css

body
  color #6441A5
  padding 4em
  a
    text-decoration none
  .container
    margin 0 auto
    width 80%
    h1
      text-align center
      font 300 3em 'Open Sans'
    #all,
    #online,
    #offline
      &:hover
        cursor pointer

styles

<link href="//oss.maxcdn.com/semantic-ui/2.0.8/components/card.min.css " rel="stylesheet" />