CodePen Embed - Twitch.tv App

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 text-center title">
       <a href="https://www.twitch.tv/" target="_blank"><img src="https://res.cloudinary.com/dplpq72kg/image/upload/v1465261830/Twitch_Logo_White_xqyqsg.png" alt="twitch" class="logo">
       <img src="https://res.cloudinary.com/dplpq72kg/image/upload/v1465261885/twitch_icon_tzbhft.png" class="icon" alt="twitch-icon"></a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-xs-12 col-sm-8 col-sm-offset-2 col-md-offset-3 text-center form-group">
        <form role="form" id="live-search" action="">
          <fieldest>
            <input type="text" placeholder="Search..." class="form-control text-input" name="search" id="filter" value="" autocomplete="off"></input>
          </fieldest>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4 col-sm-offset-4 col-xs-12 sort">
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default all">All</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default live">Live</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default off">Offline</button>
      </div>
    </div>
      </div>
    </div>
    <div class="row">
        <div class="gallery col-xs-12 text-center">  
        </div>
    </div>
      <div class='row text-center add'>
        <a role='button' class='newChannel' data-toggle="modal" data-target='#addChannel'>
          <h3>Add channel</h3>
          <span class="glyphicon glyphicon-plus"></span>
        </a>
      </div>
  <!-- add new channel modal -->
  <!-- Modal -->
  <div class="modal fade" id="addChannel" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4>Add a new twitch channel</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class='input-group'>
            <input type='text' class='form-control' placeholder="Channel name" aria-describedby='add-channel' id='channelVal'>
          </div>
          <div class='text-right'>          
            <button type="button" class="btn btn-default add-btn" data-dismiss="modal">Add</button>
          </div>
        </div>
      </div>
    </div>
  </div> 
</div>
</div>
  <div class="navbar navbar-static-bottom"><a href="https://emmacraddock.github.io/" target="_blank"><footer class="text-center footer"><a href="https://emmacraddock.github.io/" target="_blank"><p>&copy; Emma Craddock 2016.</p></a></div>
</footer>
</body>

body{
  background-color: #1d1d1d
}
.plus{
  width: 3em;
  float: left;
}
.title{
  margin: 2em auto;
}
.title .logo{
  height:7em;
  display: inline-block;
  
}

.title .icon{
  height: 10%;
  width: 10%;
}

.gallery{
  margin-top: 1.5em;
  font-family: 'Orbitron', sans-serif;
}

.info{
  display: none;
  left: 0;
  position: absolute;
  width: 100%;
  margin-top: 3em;
  opacity: 1;
}
.views{
  margin-top: .5em;
}

h4{
  left: 0;
  position:absolute;
  width: 100%;
  opacity: 1;
  color: #fff;
}
.online img:hover{
  opacity: .25;
  
}
.online img{
  /*#65fe08*/;
  padding: 0 auto;
  border-radius: 10%;
  margin: 0 auto;
}

.pulsate{
  -webkit-animation: pulse linear 2s infinite;
  -moz-animation:    pulse linear 2s infinite;
  -o-animation:      pulse linear 2s infinite;
  animation: pulse linear 2s infinite;
  
}

@-webkit-keyframes pulse {
  0%{box-shadow: 0px 0px 6px 6px #6441A5;}
  50%{box-shadow: 0px 0px 4px 3px #6441A5;}
  100%{box-shadow: 0px 0px 6px 6px #6441A5;}
}
@-moz-keyframes pulse {
  0%{box-shadow: 0px 0px 6px 6px #6441A5;}
  50%{box-shadow: 0px 0px 4px 3px #6441A5;}
  100%{box-shadow: 0px 0px 6px 6px #6441A5;}
}
@-o-keyframes pulse {
  0%{box-shadow: 0px 0px 6px 6px #6441A5;}
  50%{box-shadow: 0px 0px 4px 3px #6441A5;}
  100%{box-shadow: 0px 0px 6px 6px #6441A5;}
}

@keyframes pulse {
  0%{box-shadow: 0px 0px 6px 6px #6441A5;}
  50%{box-shadow: 0px 0px 4px 3px #6441A5;}
  100%{box-shadow: 0px 0px 6px 6px #6441A5;}
}

.offline img{
  box-shadow:0 0 4px 4px #a7a7a7;
  padding: 0 auto;
  border-radius: 10%;
  margin: 0 auto;
  opacity: .5;
}

.online, .offline {
  margin-top: 1em;
}

.online h3{
  text-align: center;
  color: #ddd;
}

.offline{
  color: #575757
}

.add h3{
  font-family: 'Orbitron', sans-serif;
  color: #6441A5;
  opacity: .5;
}


.glyphicon-plus{
  font-size: 4em;
  display: inline-block;
  color: #6441A5;
  opacity: .5;
}

.input-group{
  display: inline;
}

#plusButton{
  font-size: 2em;
  color: #1a1a1a;
}

.add-btn{
  margin-top: 5px;
  background-color: #6441a5;
  color: #ddd;
  
}

.modal-header h4{
  color: #000;
  margin-left: 1em;
}
footer{
  margin-top: 2em;
}

footer a:link, footer a:visited {
  color: #575757;
}

a:link,a:visited, a:hover, a:active {
  text-decoration: none !important;
  color: #ddd;
}

/***** MEDIA QUERIES ******/
@media(max-width:660px){
  .icon{
    display: none;
  }
  }

$('document').ready(function(){
  var arr = ['freecodecamp','montanablack88','syntag','fengb','ESL_SC2','xsaudksa', 'karnackz', 'formal', 'chrismd10']
  
$(arr).each(function(i){
  $.ajax({
    url:"https://api.twitch.tv/kraken/streams/" + arr[i] +"?client_id=b6bustu47nbmaftgi0v8tldtt4jqcye&callback=?",
    type: 'GET',
    dataType:'json',
    headers: {
      'Client-ID': "b6bustu47nbmaftgi0v8tldtt4jqcye"
    },
    success: function(data){
  if(data.stream !== null){
   $('.gallery').prepend('<div class="online col-xs-12 col-sm-6 col-md-4 text-center" id='+ arr[i] +'><a href=' + data.stream.channel.url + ' target="_blank"><h4 class="info">Game: ' + data.stream.channel.game + '<br><span class="views glyphicon glyphicon-eye-open"></span> '+data.stream.viewers+'</h4><img class="img-responsive pulsate" src=' + data.stream.preview.medium +'</a><h3>'+data.stream.channel.display_name+'</h3></div>')
  }else{
    $('.gallery').append("<div class='col-xs-12 col-sm-6 col-md-4 offline text-center' id=" + arr[i] + "><a href=https://www.twitch.tv/" + arr[i] + "  target='_blank'><img class='img-responsive' src='https://res.cloudinary.com/dplpq72kg/image/upload/v1465261783/static_mhwlfg.png'></a><h3>"+ arr[i] +"</h3></div>")      
  } 
   //hover 
  $('.online a').hover(function(){
    $(this).find($('img')).css("opacity", ".25")
    $(this).children($('.info')).toggle(true) 
  }, function(){
    $(this).find($('img')).css("opacity", "1")
    $('.info').toggle(false)
  })
    $('.live').click(function(){
      $('.offline').hide()
      $('.online').show()
    })
    $('.all').click(function(){
      $('.online').show()
      $('.offline').show()
    })
    $('.off').click(function(){
      $('.online').hide()
      $('.offline').show()
    })    
   }
  })   
  //search
   $("#filter").keyup(function(){
    var filter = $('#filter').val().toLowerCase()
    if(arr[i].search(new RegExp(filter, "i")) < 0){
      $('#' + arr[i]).hide()
    } else{
      $('#' + arr[i]).show()
    }
   })
})
  // new channel 
 $('#addChannel').on('hidden.bs.modal', function(){
     var newChannel = $('#channelVal').val().toLowerCase()
     if(newChannel !== ''){
      $.ajax({
        type: 'GET',
        url: 'https://api.twitch.tv/kraken/channels/' + newChannel,
        headers:{
        'Client-ID': 'b6bustu47nbmaftgi0v8tldtt4jqcye'
  },
        success: function(data) {
          $.ajax({
            type: 'GET',
            url: "https://api.twitch.tv/kraken/streams/" + newChannel,
            headers:{
            'Client-ID': 'b6bustu47nbmaftgi0v8tldtt4jqcye'
  },
        success: function(result){
            if(result.stream !== null){
  $('.gallery').prepend('<div class="online col-xs-12 col-sm-6 col-md-4 text-center" id='+ newChannel +'><a href=' + result.stream.channel.url + ' target="_blank"><h4 class="info">Game: ' + result.stream.channel.game + '<br><span class="views glyphicon glyphicon-eye-open"></span> '+result.stream.viewers+'</h4><img class="img-responsive pulsate" src=' + result.stream.preview.medium +'</a><h3>'+result.stream.channel.display_name+'</h3></div>')
  }else{
    $('.gallery').append("<div class='col-xs-12 col-sm-6 col-md-4 offline text-center' id=" + newChannel + "><a href=https://www.twitch.tv/" + newChannel + " target='_blank'><img class='img-responsive' src='https://res.cloudinary.com/dplpq72kg/image/upload/v1465261783/static_mhwlfg.png'></a><h3>"+ newChannel +"</h3></div>")      
            }
          },//success(result)
      error: function() {
    alert('This channel does not exist!')
  }
         })//AJAX
        }//success(data)
      })//ajax
    }//if statement
  })//add channel function
    
 $('.newChannel').click(function(){
    $('#channelVal').val('')
  })
 
  $('#addChannel').on('shown.bs.modal', function(){
    $('#channelVal').focus()
  })
})

Run Pen

This Pen is owned by Emma Craddock on CodePen.

See more by @flem on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External CSS

External JavaScript