Twitch API

Developer
Claudia Contreras
Size
3,412 Kb
Views
34,408
  1. Twitch API Previews
  2. Twitch API HTML Codes
  3. Twitch API CSS Codes
  4. Twitch API JS Codes

How do I make an twitch api?

What is a twitch api? How do you make a twitch api? This script and codes were developed by Claudia Contreras on 14 October 2022, Friday.

Twitch API Previews
IQ Test

Twitch API - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch API</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="container"> <div class="row"> <h1>TWITCH API</h1> </div> <div class="row"> <h2>Channels</h2> <div class="col-xs-12 cBtns"> <button class="btn" id="allBtn" >All</button> <button class="btn" id="onBtn" >Online</button> <button class="btn" id="offBtn" >Offline</button> </div> <div id="channelDisp"> </div> </div> </div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Twitch API - Script Codes CSS Codes

body{ background: #45484d; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #45484d 0%, #000000 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); color:white;
}
a{ color:white;
}
a:hover{ color:white;
}
.row h1{ text-align:center; color:white; font-weight:bold;
}
.row h2{ color:white; text-align:center;
}
.cBtns{ text-align:center;
}
button{ color:black; font-weight:bold;
}
.streamer{ margin-top:20px; padding:20px; border-top-right-radius:10px;
}
.streamerInfo{ background-color:gray; padding:5px; border-top:2px dashed white; border-bottom-right-radius:10px; border-bottom-left-radius:10px;
}
.streamerSearch{ margin-top:20px; padding:20px; border-top-right-radius:10px;
}
.streamerInfoSearch{ background-color:gray; padding:5px; border-top:2px dashed white; border-bottom-right-radius:10px; border-bottom-left-radius:10px;
}
.sImage{ width:80px; height:auto; border-radius:50px;
}
.sName{ margin-left:20px;
}
.sStatus { margin-left:20px;
}
.red{ background-color:rgba(243, 0, 0, 0.54);
}
.green{ background-color:rgba(23, 177, 23, 0.57);
}
.gray{ background-color:rgba(186,185,185, 0.54);
}

Twitch API - Script Codes JS Codes

$(document).ready(function(){ var users = ["freecodecamp", "storbeck", "OgamingSC2", "habathcx","RobotCaleb","brunofin","noobs2ninjas","cretetion"] var cname = ""; var logo; var name; var game; var descr; var cstatus; var bcolor; //check the api call for all users in our users array for(var i = 0 ; i < users.length; i++){ var isStreaming; //check to see if channels are currently streaming $.getJSON('https://wind-bow.hyperdev.space/twitch-api/streams/'+ users[i] +'?callback=?', function(data){ if(data.stream){ isStreaming = true; }else{ isStreaming = false; } }); $.getJSON('https://wind-bow.hyperdev.space/twitch-api/channels/'+ users[i] +'?callback=?', function(data){ if(data.error){ //if user no longer exists, display message $('#channelDisp').append('<div class="col-xs-12 streamer gray">' + '<img src="' + "http://placehold.it/60x60" + '" alt="" class="sImage pull-left" />'+ '<h3 class="pull-left sName">' + data.message +"</h3>" + "</div>" + "<div class='col-xs-12 streamerInfo gray'>" + "<p class='pull-left '>" + "<strong>Channel Info:" + "</strong>" + " Account Closed" + "</p>" + "</div>" + "</div>"); }else if (isStreaming === true){ //if user exists and is currently streaming get channel info logo = data.logo; name = data.display_name; cname = data.name; game = data.game; descr = data.status; bcolor = "green" cstatus = "Currently Streaming: " //display information on page $('#channelDisp').append('<div class="col-xs-12 streamer '+ bcolor +'">' + '<img src="' + logo + '" alt="" class="sImage pull-left" />'+ '<h3 class="pull-left sName">' + "<a href='https://www.twitch.tv/" + cname + "' target= '_blank'>" + name + "</a>" +"</h3>" + "<a href='https://www.twitch.tv/" + cname + "' class='pull-right sStatus'>" + cstatus + " " + game + "</a>" +"</div>" + "<div class='col-xs-12 streamerInfo " + bcolor + "'>" + "<p class='pull-left'>" + "<strong>Channel Info: </strong>" + descr + "</p>" + "</div>"); }else{ //if user exists but is not currenlty streaming get channel info var logo = data.logo; name = data.display_name; cname = data.name; game = ""; descr = data.status; bcolor = "red"; cstatus = "Offline"; if(!data.status){ descr = 'This user has not provided any channel information'; } //display information on page $('#channelDisp').append('<div class="col-xs-12 streamer '+ bcolor +'">' + '<img src="' + logo + '" alt="" class="sImage pull-left" />'+ '<h3 class="pull-left sName">' + "<a href='https://www.twitch.tv/" + cname + "' target= '_blank'>" + name + "</a>" +"</h3>" + "<a href='https://www.twitch.tv/" + cname + "' class='pull-right sStatus'>" + cstatus + " " + game + "</a>" +"</div>" + "<div class='col-xs-12 streamerInfo " + bcolor + "'>" + "<p class='pull-left'>" + "<strong>Channel Info: </strong>" + descr + "</p>" + "</div>"); } }); }
//filter channel on button click based on class that is applied to div $("#onBtn").on("click", function(){ $(".red").hide(); $(".green").show(); $(".gray").hide(); }); $("#allBtn").on("click", function(){ $(".green").show(); $(".red").show(); $(".gray").show(); }); $("#offBtn").on("click", function(){ $(".green").hide(); $(".red").show(); $(".gray").show(); });
});
Twitch API - Script Codes
Twitch API - Script Codes
Home Page Home
Developer Claudia Contreras
Username coderpilot
Uploaded October 14, 2022
Rating 3
Size 3,412 Kb
Views 34,408
Do you need developer help for Twitch API?

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!

Claudia Contreras (coderpilot) Script Codes
Name
Weather App
Walt Disney Tribute Page
Random Quote Generator
Wikipedia API
TEst
Coder Pilot Portfolio
Create amazing blog posts 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!