Twitch TV
How do I make an twitch tv?
What is a twitch tv? How do you make a twitch tv? This script and codes were developed by Kartikeya Gupta on 22 November 2022, Tuesday.
Twitch TV - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch TV</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://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head> <meta charset="UFT-8"> <title>Twitch TV API</title>
</head>
<body>
<div class='container-fluid'> <div class='row'> <div class='col-md-offset-5'> <a href="https://www.twitch.tv/" target='_blank'><img class='img-responsive' src="https://www-cdn.jtvnw.net/images/twitch_logo3.jpg" alt="Twitch TV"></a> </div> </div> <div class='row'> <div class='col-md-12'> <div> <button class='btn btn-lg' id='all'>All</button> <button class='btn btn-lg' id='offline'>Offline</button> <button class='btn btn-lg' id='online'>Online</button> </div> </div> </div> <span id='incoming_data'></span>
</div>
<footer> Design and Coded bt <a href="https://www.facebook.com/kartikeya100">Kartikeya Gupta</a>
</footer>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.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 - Script Codes CSS Codes
h1{ text-align: center;
}
.btn{ background-color: #64459B; text-transform: uppercase; color: #f0f0f0; font-weight: bold; width: 33%
}
.btn:hover{ background-color: #3F418F; color: #f0f0f0; color: rgba(255, 255, 255, 1); box-shadow: 0 5px 15px rgba(145, 92, 182, .4);
}
.online, .offline{ background-color: #787BC4; margin: 20px 20px; font-size: 20px; font-weight: bolder; height: 200px;
}
.online a{ text-decoration: none; color: #37F937; text-transform: uppercase;
}
.online a:hover{ text-decoration: none; color: #37F937; text-shadow: 0 0 10px #37F937;
}
.offline a{ text-decoration: none; color: #F80C0C; text-transform: uppercase;
}
.offline a:hover{ text-decoration: none; color: #F80C0C; text-shadow: 0 0 10px #F80C0C;
}
.remove{ visibility: hidden;
}
footer{ text-align:center; background-color:black;
}
Twitch TV - Script Codes JS Codes
$(document).ready(function() {
var url ='https://api.twitch.tv/kraken/streams/';
var channels = ["OgamingSC2","FreeCodeCamp","Monstercat","Towelliee","syndicate"," Easy Allies","SilentSentry","TheAttack","Food","RobotCaleb","noobs2ninjas"];
var game;
var channel;
var logo;
var channel_url;
var status;
var empty;
var htmlStr;
for(var i=0;i<channels.length;i++){
getStatus(channels[i]);
}
function getStatus(channel){
$.ajax({ url: url + channel, dataType: 'json', type: 'GET', headers: {'CLIENT-ID' : 'oap2e0q61k9amuwbzy9pu4so3cbp9nr'}, success: function(data) { console.log(data); if (data.stream === null) { channel = channel; game = "Offline"; logo = "https://static.tumblr.com/d14b28584a0be3d1145cb30c81c67c39/uao8msk/q2Cn65okg/tumblr_static_3wc29so9ywcgcowss8c8ogc8w.gif" channel_url="https://www.google.com" status="None"; ifoffline(channel,game,logo); } else if (data.stream === undefined) { channel = channel; game = "Closed"; logo = "https://static.tumblr.com/d14b28584a0be3d1145cb30c81c67c39/uao8msk/q2Cn65okg/tumblr_static_3wc29so9ywcgcowss8c8ogc8w.gif" channel_url="https://www.google.com" status="None"; ifoffline(channel,game,logo); } else game = data.stream.game; channel=data.stream.channel.name; logo = data.stream.channel.profile_banner; channel_url = data.stream.channel.url; status=data.stream.channel.status; ifonline(channel,game,logo);
}});}
function ifonline(channel,game,logo){ htmlStr = '<div class="col-md-5 online"><div class="col-md-8"><a href='+channel_url+'><h3>'+channel+'</h3></a><h4>Channel: '+game+'</br>Streaming: '+status+'</h4></div><div class="col-md-4"><img class="img-responsive" src='+logo+'></div></div>'; $('#incoming_data').append(htmlStr);
}
function ifoffline(channel,game,logo){ htmlStr = '<div class="col-md-5 offline"><div class="col-md-5"><a href='+channel_url+'><h3>'+channel+'</h3></a><h4>Channel: '+game+'</br>Streaming: '+status+'</h4></div><div class="col-md-4"><img class="img-responsive" src='+logo+'></div></div>'; $('#incoming_data').append(htmlStr);
}
$('#offline').click(function(){ $('.offline').fadeIn(); $('.online').fadeOut();
});
$('#online').click(function(){ $('.offline').fadeOut(); $('.online').fadeIn();
});
$('#all').click(function(){ $('.offline').fadeIn(); $('.online').fadeIn();
});
});
Developer | Kartikeya Gupta |
Username | kartikeya100 |
Uploaded | November 22, 2022 |
Rating | 3 |
Size | 3,103 Kb |
Views | 14,168 |
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!
Name | Size |
Portfolio 2 | 4,341 Kb |
Tribute Page | 3,799 Kb |
Wikipedia Viewer | 3,055 Kb |
My Portfolio | 5,127 Kb |
Tic Tac Toe | 3,593 Kb |
Javascript Calculator | 2,701 Kb |
Random Quote Generator Machine | 3,011 Kb |
Parallax effect | 2,849 Kb |
Pomodoro clock | 2,825 Kb |
Weather Application | 2,720 Kb |
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!
Name | Username | Size |
Flat iOS 7 Safari Icon | Rss | 3,332 Kb |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
Base-Style | Daniel_gooss | 2,614 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!