Twitch

Developer
Sarah Dunlap
Size
2,937 Kb
Views
6,072
  1. Twitch Previews
  2. Twitch HTML Codes
  3. Twitch CSS Codes
  4. Twitch JS Codes

How do I make an twitch?

If a Twitch user is streaming x turns into check mark. Also, the name of the game being streamed is shown.. What is a twitch? How do you make a twitch? This script and codes were developed by Sarah Dunlap on 18 January 2023, Wednesday.

Twitch Previews
IQ Test

Twitch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class= "container"> <div class = "twitch-style"> <img src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/Twitch_BlackLogo.png"> </div>
<div id = "data"> </div> <div id ="errors"></div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Twitch - Script Codes CSS Codes

body{background-color: #003366;}
.container {background-color: white; max-width: 350px; min-height: 300px; margin-top: 40px; border-radius: 9px; padding-top: 10px; -moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px#000;
box-shadow: 0 0 5px #000;}
.twitch-style img {max-width: 80%; margin-left: auto; margin-right: auto; display: block;}
.twitch-style {background-color: white;}
#data img {margin-right: auto; max-width: 100%; border-radius: 15px;}
#data {padding-top: 20px; font-size: 18px;}
.game {font-size: 15px; color: grey; margin-top: -5px;}
#data .row {margin-left: 1%; margin-bottom: 4%; margin-right: 1%; padding-bottom: 2%;}
.user-online {color: #660000; font-size: 25px; margin-top: 6px;}
.user-not-online {color: #003366; font-size: 25px; margin-top: 6px;}
.error {font-size: 18px; text-align:center; background-color: #660000; color: #ffffff; margin-bottom: 2px;}
.warning {text-align:center; margin-bottom: 20px; font-size: 15px; font-weight: 600;}

Twitch - Script Codes JS Codes

var jsonInfo = "";
var twitchUsers = ["freecodecamp", "Sinedd92", "habathcx","RobotCaleb","noobs2ninjas","obezianka","venicraft", "pizzapie1211", "brunofin", "clownhater"];
var profileLogo = "";
var displayName = "";
var channelLink = "";
var streamLink = "";
var url = "";
var game = "";
var notExisting = "";
var notExistingArray = [];
twitchUsers.forEach(function(user) { channelLink = "https://wind-bow.hyperdev.space/twitch-api/channels/" + user + "?callback=?"; streamLink = "https://wind-bow.hyperdev.space/twitch-api/streams/" + user + "?callback=?"; //Get Channel Logos $.getJSON("https://wind-bow.hyperdev.space/twitch-api/channels/" + user + "?callback=?", function(logo) { $.getJSON("https://wind-bow.hyperdev.space/twitch-api/streams/" + user + "?callback=?", function(data) { jsonInfo = JSON.stringify(data.stream); if (data.error && notExistingArray.indexOf(user) === -1) { notExistingArray.push(user); $("#errors").append("<div class='row'> <div class='col-md-12 error'>" + user + " is not a user" + "</div></div>"); }; //Get display name url = JSON.stringify(logo.url); url = url.slice(1,url.length-1); displayName = JSON.stringify(logo.display_name); displayName = "<div class='col-md-6'>" + "<a href='" + url + "'>" + displayName.slice(1,displayName.length-1) + "</a>"; //Get profile logo profileLogo = JSON.stringify(logo.logo); //Remove extra quote marks from logo url profileLogo = profileLogo.slice(1,profileLogo.length-1); //Create an image to display profileLogo = "<div class='row'><div class='col-md-3'><img src='" + profileLogo + "'></div>"; //Find out if online if (jsonInfo === "null") { jsonInfo = "<div class='col-md-3'>" + "<a href='" + url + "'>" + "<i class='fa fa-times-circle user-not-online'></i>" + "</a></div></div>"; game = ""; displayName += "</div>"; } else { jsonInfo = "<div class='col-md-3'>" + "<a href='" + url + "'>" + "<i class='fa fa-check-circle user-online'></i>" + "</a></div></div>"; game = JSON.stringify(data.stream.game); game = game.slice(1,game.length-1); displayName += "<div class='game'>" + game + "</div></div>"; }; $("#data").append(profileLogo + displayName + jsonInfo);
});
});
});
Twitch - Script Codes
Twitch - Script Codes
Home Page Home
Developer Sarah Dunlap
Username SarahDunlap
Uploaded January 18, 2023
Rating 3
Size 2,937 Kb
Views 6,072
Do you need developer help for Twitch?

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!

Sarah Dunlap (SarahDunlap) Script Codes
Name
Colors
Wikipedia Search
My CodePen Projects
Rotate Circle
Cat Clicker
Pomodoro Clock
Random Quotes
Reddit API
Handy Tool For Work
React Weather App
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!