Twitch Tv App

Developer
Esterling Accime
Size
5,452 Kb
Views
4,048
  1. Twitch Tv App Previews
  2. Twitch Tv App HTML Codes
  3. Twitch Tv App CSS Codes
  4. Twitch Tv App JS Codes

How do I make an twitch tv app?

What is a twitch tv app? How do you make a twitch tv app? This script and codes were developed by Esterling Accime on 23 January 2023, Monday.

Twitch Tv App Previews
IQ Test

Twitch Tv App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch Tv App</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Twitch App</title> <link rel="stylesheet" href="styling/style.css"> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="author" href="humans.txt"> </head> <body> <div class="mainContainer"> <header> <span class="ion-social-twitch-outline"></span> <h3 class="title">Twitch TV App</h3> </header> <!-- -------- Video container ----------> <section class="video"> <div class="video--container"> <iframe class="player-video" src="https://player.twitch.tv/?channel={esl_sc2}&muted=false" frameborder="0" scrolling="no" allowfullscreen="true" ></iframe> </div> </section> <!-- -------- Channel ---------->
<section class="channel"> <h3>Channel</h3>
</section> <!-- -------- Search Feature ----------> <div class="search">
<!-- <div class="userInput"> <input type="text" placeholder="Search user..."> <button id='searching' class="ion-ios-search"></button> </div> --> <div class="searchBtn"> <button class='all'>All</button> <button class='onButton'>Online</button> <button class='offButton'>Offline</button> </div> </div> <div class="containerLive"></div> <div class="offlineContainer"> </div>
<div class="bannerNonActive"> <p>Non Active Channel</p>
</div> <div class="deactivated"></div> </div> <!-- end of the Main Container --> <footer> <p>Designed by Esterling Accime</p> </footer> <script src="js.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Twitch Tv App - Script Codes CSS Codes

*{	padding:0;	margin:0;	box-sizing: border-box;
}
/*body{
}
*/
p{	padding:0.3rem;	font-size: 1rem;
}
img{	max-width: 100%;	height: auto;
}
button{	cursor: pointer;	outline: none;
}
span[class^='ion']{	font-size: 1.2rem;	color:purple;
}
a{	text-decoration: none;
}
h3{	color:#fff;
}
h4{	font-size: 2rem;
}
header{	background-color: #6441a4;	padding: 0.5rem;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
header span[class$='outline']{	font-size: 3rem;	color: #fff;
}
header h3{	padding-left: 2rem;	font-size: 2rem;
}
.video{	background: rgba(163,53,222,1);	background: -webkit-linear-gradient(45deg, rgba(163,53,222,1) 0%, rgba(204,160,224,1) 46%, rgba(208,172,224,1) 51%, rgba(169,42,224,1) 100%);	background: linear-gradient(45deg, rgba(163,53,222,1) 0%, rgba(204,160,224,1) 46%, rgba(208,172,224,1) 51%, rgba(169,42,224,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a335de', endColorstr='#a92ae0', GradientType=1 );	height: 100%;	padding: 0.5rem;
}
@media (min-width: 730px){	.video{	display:-webkit-box;	display:-ms-flexbox;	display:flex;	-webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;	-webkit-box-align:center; -ms-flex-align:center; align-items:center;	}
}
.video--container{	height: 20rem;	margin: 0.7rem;	margin-top: 0.5rem;
}
/*	border:3px solid red;*/
.video--container iframe{	width: 100%;	height: 100%;
}
@media (min-width: 730px){	.video--container{	margin:1rem;	width:40rem;	height:30rem;	}
}
.channel { width: 100%; padding: 0.5rem; background: rgba(153,173,135,1); background: -webkit-linear-gradient(45deg, rgba(153,173,135,1) 0%, rgba(153,173,135,1) 18%, rgba(58,154,139,1) 52%, rgba(31,59,8,1) 95%, rgba(31,59,8,1) 100%); background: linear-gradient(45deg, rgba(153,173,135,1) 0%, rgba(153,173,135,1) 18%, rgba(58,154,139,1) 52%, rgba(31,59,8,1) 95%, rgba(31,59,8,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ad87', endColorstr='#1f3b08', GradientType=1 );
}
.channel h3 {	text-align: center;
}
.containerLive{	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-ms-flex-wrap: wrap; flex-wrap: wrap;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.containerLive .statusContainer{	border:2px solid #3a9a8b;	margin:0.5rem;	width: 22rem;	position: relative;	height: 25rem;	border-radius: 4px;	-webkit-transition:all .3s ease-in;	transition: all .3s ease-in;
}
/*************** responsiveness with media query for status container ****************/
@media (min-width: 730px){	.containerLive .statusContainer{	width:17rem;	}
}
.containerLive .statusContainer img{	width: 100%;	padding: 0.3rem;
}
.containerLive .statusContainer h4{	font-size: 1.7rem;	text-align: center;
}
/*	h4 ~ p{	margin: 0.9rem;	}*/
.containerLive .statusContainer .banner{	padding:0.1rem;	background: blue;	position: absolute;	text-align: center;	bottom: 0;	width: 100%;	color: #fff;	background: rgba(98,125,77,1);	background: -webkit-linear-gradient(315deg, rgba(98,125,77,1) 61%, rgba(53,81,31,1) 81%, rgba(31,59,8,1) 91%, rgba(31,59,8,1) 100%);	background: linear-gradient(135deg, rgba(98,125,77,1) 61%, rgba(53,81,31,1) 81%, rgba(31,59,8,1) 91%, rgba(31,59,8,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08', GradientType=1 );
}
.containerLive .statusContainer .bannerOff{	padding:0.1rem;	background: red;	text-align: center;	position: absolute;	bottom: 0;	width: 100%;	color: #fff;	background: rgba(176,3,43,1);	background: -webkit-linear-gradient(45deg, rgba(176,3,43,1) 0%, rgba(171,29,62,1) 22%, rgba(161,76,97,1) 61%, rgba(204,171,179,1) 80%, rgba(214,169,180,1) 97%, rgba(214,169,180,1) 100%);	background: linear-gradient(45deg, rgba(176,3,43,1) 0%, rgba(171,29,62,1) 22%, rgba(161,76,97,1) 61%, rgba(204,171,179,1) 80%, rgba(214,169,180,1) 97%, rgba(214,169,180,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0032b', endColorstr='#d6a9b4', GradientType=1 );
}
.containerLive .off{	height: 27rem;	-webkit-transition:all .3s ease-in;	transition: all .3s ease-in;
}
@media(min-width: 730px){	.containerLive .off{	height:25rem;	}
}
.containerLive .off img{	height: 16.8rem;	padding: 0.5rem;
}
@media(min-width: 730px){	.containerLive .off img{	height:14.3rem;	}
}
.containerLive .on{	cursor: pointer;	-webkit-transition:all .3s ease-in;	transition: all .3s ease-in;
}
button:hover{	background:red;
}
.offline{	color:red;
}
.online{	color:blue;
}
.bannerNonActive{	width: 1005;	padding: 0.8rem;	background: red;	margin-top: 2rem;	text-align: center;	color: #fff;	background: rgba(76,76,76,1);	background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(125,115,125,1) 51%, rgba(19,19,19,1) 100%);	background: linear-gradient(to bottom, rgba(76,76,76,1) 0%, rgba(125,115,125,1) 51%, rgba(19,19,19,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );
}
.deactivated{	background: rgba(255,175,75,1);	background: -webkit-linear-gradient(45deg, rgba(255,175,75,1) 0%, rgba(194,209,207,1) 49%, rgba(255,146,10,1) 100%);	background: linear-gradient(45deg, rgba(255,175,75,1) 0%, rgba(194,209,207,1) 49%, rgba(255,146,10,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a', GradientType=1 );	height: 100%;	padding-top: 1rem;
}
@media (min-width: 730px){	.deactivated{	display:-webkit-box;	display:-ms-flexbox;	display:flex;	-ms-flex-pack:distribute; justify-content:space-around;	padding:6rem;	}
}
.deactivated .notActive{	display: -webkit-box;	display: -ms-flexbox;	display: flex;	border:1px solid orange;	-webkit-box-orient: vertical;	-webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;	-ms-flex-pack: distribute; justify-content: space-around;	-webkit-box-align: center; -ms-flex-align: center; align-items: center;	background-color: #fff;	margin-left:1rem;	margin-right:1rem;	/*	padding-top: 1rem;*/	height: 20rem;	margin-top: 1.5rem;	margin-bottom: 1.5rem;
}
@media (min-width: 730px){	.deactivated .notActive{	-webkit-box-orient:vertical;	-webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;	width:20rem;	}
}
.deactivated .notActive p[class$='circled']{	font-size: 5rem;	color:orange;
}
.deactivated .notActive p[class$='circled'] ~ p{	font-size: 1.4rem;
}
.app{	text-align: center;	margin:0.9rem;	font-size: 2.5rem;
}
.userInput{	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.userInput input{	width: 19rem;	height:2.2rem;	border:1px solid purple;	border-radius: 0.3rem;	padding: 0.7rem;	outline: none;
}
.userInput button{	border:none;	border-radius: 0.3rem;	background-color: #fff;	width: 4rem;	font-size: 2rem;	height: 0.0rem;	margin-left: -3.5rem;	outline: none;
}
.searchBtn{
/*	background-color: red;*/	padding:0.5rem;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;	margin-top: 1rem;
}
.searchBtn button{	width: 6rem;	height: 2rem;	margin-left: 0.5rem;	border-radius: 0.3rem;	background-color: #fff;
}
.searchBtn button:focus{	background:-webkit-linear-gradient(45deg, rgba(153,173,135,1) 0%, rgba(153,173,135,1) 18%, rgba(58,154,139,1) 52%, rgba(31,59,8,1) 95%, rgba(31,59,8,1) 100%);	background:linear-gradient(45deg, rgba(153,173,135,1) 0%, rgba(153,173,135,1) 18%, rgba(58,154,139,1) 52%, rgba(31,59,8,1) 95%, rgba(31,59,8,1) 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ad87', endColorstr='#1f3b08', GradientType=1 );	color:#fff;
}
footer{	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;	padding:1rem;	border:1px solid #e4e4e4;
}

Twitch Tv App - Script Codes JS Codes

var streamers = ["eSL_SC2", "ogamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "robotCaleb", "noobs2ninjas", "brunofin", "comster404"];
var channel, name;
var client_id = '?client_id=ffvyna3ggr3sc74e7suc9fncslrwpfz';
var init = function(){	data();	};
// The beginning of the streamers
var data = function(){	streamers.map(function(stream){	// Getting the data from the streaming channels	var streaming = function(){	$.getJSON('https://api.twitch.tv/kraken/streams/' + stream + client_id, function(streams){	streaming = streams.stream;	console.log(streaming);	channel = streams['_links'].channel;	// if User is online	if(streaming != null){	name = streaming.channel.name;	var game = streaming.game,	viewers = streaming.viewers,	followers = streaming['channel'].followers,	totalView = streaming['channel'].views,	urlLink = streaming['channel'].url,	preview = streaming['preview'].large,	video = 'https://player.twitch.tv/?channel={' + stream + '}&muted=false';	console.log(streaming);	// if User is online	$('.containerLive').append(	"<div class='statusContainer on'>" +	"<img src='" + preview + "'/>" +	"<h4 class='status'>" + name +	"</h4>" + // end of h4	"<p>" + "<span class='ion-ios-eye-outline'> : </span>" + viewers + " views" + "</p>" +	"<p>" + "<span class='ion-ios-game-controller-b-outline'> : </span>" + game + " game" + "</p>" +	"<p>" + "<span class='ion-ios-people-outline'> : </span>" + followers + " followers" + "</p>" +	"<p>" + "<span class='ion-ios-color-filter-outline'> : </span>" + totalView + " total views" + "</p>" +	// "<p>" + 'Status: ' + streaming['channel'].status + "</p>" +	// "<a href='" + urlLink + "' target='_blank'>" +	// "<p>" + " Read more at ..." + "</p>" +	"</a>" +	"<div class='banner'>" + "<p>" + 'Online' + "</p>" + "</div>" +	"</div>");	}	//	// Otherwise if User is not online	else {	$.getJSON(channel + client_id, function(data){	// console.log(data);	var offFollowers = data.followers,	offName = data['display_name'],	offStatus = data.status,	offUrl = data.url,	offLogo = data.logo;	$('.containerLive').append(	"<div class='statusContainer off'>" +	"<img src='" + offLogo + "'/>" +	"<h4 class='status'>" + offName + "</h4>" +	"<p>" + "<span class='ion-ios-people-outline'> : </span>" + offFollowers + " followers" + "</p>" +	"<p>" + 'Status: ' + offStatus + "</p>" +	"<a href='" + offUrl + "'/>" + "</a>" +	"<div class='bannerOff'> " + "<p>" + 'Offline' + "</p>" +"</div>" +	"</div>"	);	});	} // end of else statement	// when click, change live video to its current user.	$('.on').on('click', function(){	var iframeSrc = $('iframe').attr('src', video);	});	addStreaming();	})	// if api call gives error 404, do this	.fail(function(a, b, c){	if(c === 'Not Found'){	$('.deactivated').append("<div class='notActive'>" +	"<p class='ion-alert-circled'></p>" +	"<p>" + stream + "</p>" +	"<hr />" +	"<p>" + c + "</p>" +	"<p>" + "Channel does not exist" + "</p>" +	"</div>");	}	}); // end of getJSON	}; // streaming function	streaming();	var addStreaming = function(){	}; // end of the add streaming
}); // mapping function
$('button').on('click', function(){	var buttonSrc = $(this).attr('class');	// when click buttons, display either offline, or online, or all	var changeStyle = function(element, lcd, hide, box){	$(element).css('display', lcd);	$('.bannerNonActive').css('display', hide);	$('.deactivated').css('display', box);	};	// display all onlines users	if(buttonSrc === 'onButton'){	changeStyle('.off', 'none', 'none', 'none');	changeStyle('.on', 'block', 'none', 'none');	}	// display all offlines users	else if (buttonSrc === 'offButton'){	changeStyle('.on', 'none', 'none', 'none');	changeStyle('.off', 'block', 'none', 'none');	}	// displaying all users either online or offline or deactivated	else{	changeStyle('.on', 'block', 'block', 'block');	changeStyle('.off', 'block', 'block', 'flex');	}	var changeButtonColor = function(add){	$(this).css('color', add);	}
}); // end of clicking button
}; // End of mapping function
init();
Twitch Tv App - Script Codes
Twitch Tv App - Script Codes
Home Page Home
Developer Esterling Accime
Username accimeesterlin
Uploaded January 23, 2023
Rating 3
Size 5,452 Kb
Views 4,048
Do you need developer help for Twitch Tv App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Esterling Accime (accimeesterlin) Script Codes
Name
MyPortFolio
A Pen by Esterling Accime
According and hover jQuery tax
Weather Appp
Adding and Removing Element
WikiPedia Viewer
Learning React
CSS Hover Effects
Typing Machine
Calendar Event
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!