css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              .container
	h1 Twitch TV
	nav
		ul
			li#all.selected All
			li#online Online
			li#offline Offline
	section
		form#userSearch
			input(type="text" placeholder="Search from your list")
		ul#displayChannels
			
            
          
!
            
              @import 'https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,400'
//--- reset
*
	box-sizing: border-box
	margin: 0
	padding: 0
	font-family: 'Yanone Kaffeesatz', sans-serif
	list-style: none
	text-decoration: none
	

//--- color variables
// orange
$main : rgba(122,111,155,0.09)
// break black
$fontColor : #1B1B1E
// break white
$liColor : #FBFFFE
// purple
$liHoverColor : #7A6F9B

body
	background-color: $liColor
.container
	max-width: 400px
	margin: auto
	text-align: center
	overflow: hidden
	box-shadow: 0px 0px 20px -5px $liHoverColor
	
h1
	position: relative
	padding: 10px
	font-weight: lighter
	font-size: 3rem
	color: $liColor
	background-color: $liHoverColor
	z-index: 3
	box-shadow: 0px 0px 20px -5px $liHoverColor
	
nav
	ul
		position: relative
		z-index: 2
		display: flex
		box-shadow: 0px 0px 20px -5px $liHoverColor
		li
			flex: 1
			padding: 15px
			background-color: $liColor
			color: $fontColor
			transition: all 200ms ease-in-out
			&:hover
				cursor: pointer
				background-color: $liHoverColor
				color: $liColor
		.selected
			position: relative
			flex: 1
			padding-right: 1px
			background-color: $liHoverColor
			color: $liColor
			&:after
				content: ''
				position: absolute
				left: 50%
				bottom: -20px
				margin-left: -10px
				width: 0px
				height: 0px
				border: 10px solid transparent
				border-top-color: #7A6F9B
section
	form
		position: relative
		z-index: 1
		background-color: $liColor
		padding: 20px 0px
		box-shadow: 0px 0px 20px -5px $liHoverColor
		
		input
			width: 40%
			text-align: center
			font-size: 1rem
			color: $liHoverColor
			padding: 2px
			outline: none
			border: 2px solid $liHoverColor
			border-radius: 20px
			transition: all 200ms ease-in-out
			&:focus, &:hover
				width: 80%
	ul
		.error-message
			background-color: #EA9D83
			padding: 10px
			font-style: italic
			color: $fontColor
		li
			.channel-link
				position: relative
				display: block
				background-color: $liColor
				text-align: left
				color: #666
				overflow: auto
				padding: 7px
				transition: all 200ms ease-in-out
				&:hover
					background-color: $liHoverColor
					color: $liColor
				.logo,
				.information,
					display: block
					float: left
				.logo
					width: 20%
					border-radius: 50%
						
				.information
					width: 75%
					padding: 10px
					.channel-name
						color: $liHoverColor
						float: left
						&:first-letter
							text-transform: capitalize
							
					.game
						font-size: 0.8rem
						float: left
						margin-left: 10px
						margin-top: 6px
						font-style: italic
							
					.description
						clear: both
						padding-top: 5px
						font-size: 0.9rem
				.online, .offline
					position: absolute
					right: 0
					top: 50%
					width: 16px
					height: 16px
					margin-top: -8px
					margin-right: 8px
					border-radius: 50%
				.online
					background-color: #AFE082
				.offline
					background-color: transparent
					
            
          
!
            
              $(document).ready(function() {
	
	twitchApp();
	
	//refresh the app every 15 min
	setInterval(function() {
		twitchApp();
	}, 1000 * 60 * 15);
	
	// twitchTv Apliction
	function twitchApp() {
		// declaring variables
		var apiURL = "https://api.twitch.tv/kraken/",
			 optionSearch = "streams/",
			 arrStreamers = [
				 "picorrelive",
				 "CGlas",
				 "Kameloh",
				 "vectorist",
				 "d1srupt0r",
				 "Food",
				 "Sir_Thomas_",
				 "AscotHero",
				 "iiihugs",
				 "ESL_SC2",
				 "riotgames",
				 "lvpes",
				 "C9Sneaky",
				 "tarik",
				 "ambermadi420",
				 "MarinaMohova",
				 "uberhaxornova",
				 "alexelcapo",
				 "OgamingSC2", 
				 "noobs2ninjas", 
				 "freecodecamp",
				 "storbeck", 
				 "habathcx", 
				 "RobotCaleb", 
				 "cretetion"
			 ],
			 clientID = {'Client-ID': 'gx8xtfz8f3fb7jhi18abmtpbdaz7a3w'},
			 channelName, channelLink, imageSrc, game, description, status, resHtml ="";
		
		// iteration for every channel
		searchAllData(arrStreamers);

		//----------- event listeners ----------
		//nav selection
		$("nav ul li").click( function() {
			if( !$(this).hasClass('selected') ){
				$("nav ul li").removeClass();
				$(this).addClass('selected');				
			}
			switch ($(this).html()) {
				case "All":
					$('.online').parent().parent().show();
					$('.offline').parent().parent().show();
					break;
				case "Online":
					$('.online').parent().parent().show();
					$('.offline').parent().parent().hide();
					break;
				case "Offline":
					$('.offline').parent().parent().show();
					$('.online').parent().parent().hide();
					break;
			}
		});
		
		//prevent refresh the page on submit
		$("form").submit(function(){
			return false;
		});
		
		// input search
		$("input").keyup(function(){
			var search = $(this).val();
			var newArray = [];
			var reg = new RegExp(search, "gi");
			$("ul#displayChannels li a div h3").each(function(index,element) {
				if (search != "") {
					if ($(this).html().match( reg )) {
						$(this).parent().parent().parent().show();
					} else {
						$(this).parent().parent().parent().hide();
					}
				} else {
					$(this).parent().parent().parent().show();				
				}
			});
		});
		
		//----------- functions ----------------
		// add content to html
		function addToHtml() {
			resHtml += "<li>";
			resHtml += '<a class="channel-link" href="' + channelLink + '" target="_blank" alt="Twitch channel of ' + channelName + '" title="Twitch channel of ' + channelName + '">';
			resHtml += '<img class="logo" src="' + imageSrc + '" alt="logo of ' + channelName + '" title="logo of ' + channelName + '"/>';
			resHtml += '<div class="information">';
			resHtml += '<h3 class="channel-name">' + channelName + '</h3>';
			resHtml += '<p class="game">' + game + '</p>';
			resHtml += '<p class="description">' + description + '</p>';
			resHtml += '</div>';
			resHtml += '<div class="' + status + '"></div>';
			resHtml += "</a></li>";
			$("#displayChannels").html(resHtml);
			
			// change the .channel-name color on hover the "a" element
			$(".channel-link").hover( function() {
				$(this).children().next().children("h3").css("color" , "#FBFFFE");
			}, function(){
				$(this).children().next().children("h3").css("color", "#7A6F9B");
			});
		}
		
		//search all data
		function searchAllData(arr) {
			for (var i = 0 ; i < arr.length ; i++) {
				getData(arr[i]);
			}
		}

		// retrive and assign data to varaibles depending on streamName
		function getData(streamName) {
			$.ajax({
				url: apiURL + optionSearch + streamName,
				type: "GET",
				headers: clientID,
				success: function(data) {
					// assigning variables
					status = data["stream"];
					if (status) { // is streaming
						channelName = data["stream"]["channel"]["display_name"];
						channelLink = data["stream"]["channel"]["url"];
						imageSrc = data["stream"]["channel"]["logo"];
						game = data["stream"]["channel"]["game"];
						description = data["stream"]["channel"]["status"];
						status = "online";
						addToHtml();
					} else { // is not streaming
						optionSearch = "channels/";
						$.ajax({
							url: apiURL + optionSearch + streamName,
							type: "GET",
							headers: clientID,
							success: function(response) {
								channelName = response["display_name"];
								channelLink = response["url"];
								imageSrc = response["logo"];
								game = "";
								description = "Offline";
								status = "offline";
								addToHtml();
							}, 
							error: function(er) {
								resHtml += '<li class="error-message"><p>' + er["responseJSON"]["message"] +'</p></li>';
							}
						});
					}
				}, 
				error: function(er) {
					resHtml += '<li class="error-message"><p>' + er["responseJSON"]["message"] +'</p></li>';
				}
			});
		}
	}
	
});
	

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console