Twitch.tv App

In this example below you will see how to do a Twitch.tv App with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Twitch.tv App</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css'>

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

  
</head>

<body>

  <head>
<script src="https://use.fontawesome.com/c379d17645.js"></script>
</head> 
<body>
 
  <h1 class="text-center" style="font-family:TIMES NEW ROMAN"><i class="fa fa-twitch" aria-hidden="true"></i> Twitch.tv App</h1>
<div class="container " >

	<ul class="tabs">
		<li class="tab-link current" id="all" data-tab="tab-1">All</li>
		<li class="tab-link" id="online1" data-tab="tab-2">Online</li>
		<li class="tab-link" id="offline1" data-tab="tab-3">Offline</li>
		
	</ul>

	<div id="tab-1" class="tab-content current">
		
	</div>
	<div id="tab-2"  class="tab-content">
		2
	</div>
	<div id="tab-3"  class="tab-content">
		3
	</div>
	

</div><!-- container -->
<br>
  <div id="search"></div>
<br>
   <footer class="center-block text-center"  id="footer"><h5 style="font-family:TIMES NEW ROMAN; font-size:15pt;font-weight: 500;color:black;">written and coded by <a href="https://www.freecodecamp.com/stanislavkotsar" target="blank" style="color:black">Stanislav Kotsar</a></h5></footer>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/StanislavKotsar/twitchtv-app-amyXXX */
body{
			margin-top: 50px;
			font-family: 'Trebuchet MS', serif;
			
    background-color:#FF9B70;
		}

		.container{
			width: 800px;
			margin: 0 auto;
      background-color:#FF9B70;
      
		}

.tabs{
   border-top-left-radius:8px;
 border-top-right-radius:8px;
}

		ul.tabs{
			margin: 0px;
			padding: 0px;
			list-style: none;
      background-color:#F6FF70;
      
		}
		ul.tabs li{
			background: none;
			color: #222;
			display: inline-block;
			padding: 10px 15px;
			cursor: pointer;
      
		}

		ul.tabs li.current{
			background: #ededed;
			color: #222;
       border-top-left-radius:8px;
       border-top-right-radius:8px;
		}

#all.current{
  	background-color:#70FFE3;
}
#online1.current{
  background-color:#FFDA70;
}
		.tab-content{
			display: none;
			background: #ededed;
			padding: 15px;
		}

		.tab-content.current{
			display: inherit;
		}

#online{
  color:green;
  font-family:verdana;
  

}
#result{
  background-color:#D0FF70;
 
}
#offline{
  color:black;
  background-color:#FFF270;
 padding-top:3px;
  padding-bottom:3px;
}
img{
  max-width:65px;
  border-radius: 10px;
}
#text{

   padding-left:80px;
}
#tab-1{
  background-color:#70FFE3;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
}
#tab-2{
  background-color:#FFDA70;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
}
#tab-3{
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
}
.well{
  max-width:700px;
}
#close{
  background-color:black;
  color:red;
   padding-top:3px;
  padding-bottom:0px;
}
.red{
color:white;
   padding-top:0px;
  padding-bottom:1px;
}
#footer {
  
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;

}


/*Downloaded from https://www.codeseek.co/StanislavKotsar/twitchtv-app-amyXXX */
$(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
    
	})


  var chanell =["freecodecamp","ESL_SC2", "OgamingSC2", "cretetion",  "kinggothalion", "habathcx", "RobotCaleb", "noobs2ninjas","esl_wot_cis","bbrebrberb","Bla_bla_chanell"];
    var res=[];

  var opa = chanell.map(function(val){
 return   "https://api.twitch.tv/kraken/streams/"+val+"?client_id=ak2cy3uik9zeoseg3lsdpfjjm54xm8i";
  });
 

  var n= 0;
  for(var i=0; i<chanell.length;i++){
    var offline=[];
    var online=[];
    var chnl = chanell[i];
   
       
 $.getJSON(opa[i] , function(data){
   
 
 
   if(data.stream==null){
     var names = data._links.self.split("/");
          var name = names[names.length-1]
          var url = "https://www.twitch.tv/"+name;
   offline.push("<div id=\"offline\" class=\"well row center-block\">"+"<h5 id=\"offline\">"+"<a href=\""+url+"\" id=\"offline\""+"target=\"blank\""+">"+name+"</a>"+"</h5>"+"<h6>"+"OFFline :("+"</h6>"+"</div>");
   $("#tab-1").append("<div id=\"offline\" class=\"well row center-block\">"+"<h5 id=\"offline\">"+"<a href=\""+url+"\" id=\"offline\""+"target=\"blank\""+">"+name+"</a>"+"</h5>"+"<h6>"+"OFFline :("+"</h6>"+"</div>");
     
   }else{
     online.push("<div id=\"result\" class=\"well row center-block\">"+"<div id=\"image\">"+"<img align=\"left\" src=\""+data.stream.channel.logo+"\">"+"</div>"+"<div id=\"text\">"+"<h4 id=\"online\">"+"<a href=\""+data.stream.channel.url+"\" id=\"online\""+"target=\"blank\""+">"+data.stream.channel.name+"</a>"+"</h4>"+data.stream.channel.status+"</div>"+"</div>");
     $("#tab-1").append("<div id=\"result\" class=\"well row center-block\">"+"<div id=\"image\">"+"<img align=\"left\" src=\""+data.stream.channel.logo+"\">"+"</div>"+"<div id=\"text\">"+"<h4 id=\"online\">"+"<a href=\""+data.stream.channel.url+"\" id=\"online\""+"target=\"blank\""+">"+data.stream.channel.name+"</a>"+"</h4>"+data.stream.channel.status+"</div>"+"</div>");

   }
   ;
   n=n+1;
   res.push(data);
  //  $("#res").html(JSON.stringify(res)+"<br>"+"<br>"+"<br>");
   $("#tab-3").html(offline);
    $("#tab-2").html(online);

 })  .fail(function(json) { 
    $("#tab-1").append("<div id=\"close\" class=\"well row center-block\">"+"<h5 class=\"red\">"+"WHOOPS)"+"<br>"+"<h5 id=\"close\">"+json.responseJSON.message+"</h5>"+"</div>"); 
 
 })

   };
})

Comments