Twitch

Developer
Sarah Dunlap
Size
2,937 Kb
Views
6,069
  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,069
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
Handy Tool For Work
Pomodoro Clock
React Weather App
Random Quotes
Work in Progress
Rotate Circle
Card Game
Rock Paper Scissors
Tribute
Cat Clicker
Create amazing marketing copy 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!