FCC Twitchtv JSON API

Developer
Victoria
Size
3,446 Kb
Views
18,216
  1. FCC Twitchtv JSON API Previews
  2. FCC Twitchtv JSON API HTML Codes
  3. FCC Twitchtv JSON API CSS Codes
  4. FCC Twitchtv JSON API JS Codes

How do I make an fcc twitchtv json api?

What is a fcc twitchtv json api? How do you make a fcc twitchtv json api? This script and codes were developed by Victoria on 02 December 2022, Friday.

FCC Twitchtv JSON API Previews
IQ Test

FCC Twitchtv JSON API - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC Twitchtv JSON API</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="twitch-app">	<div class="header-row"> <p>Twitch.TV channels <i class="fa fa-refresh refresh-button"></i></p> <div class="menu">	<div class="selector active" id="all"><div class="circle"></div><p>All</p></div>	<div class="selector" id="online"><div class="circle"></div><p>Online</p></div>	<div class="selector" id="offline"><div class="circle"></div><p>Offline</p></div>	</div>	</div>	<div class="channel-rows">	</div>	<div class="disclaimer hidden">	<p>No <span class="selector-status"></span> channels available</p>	<img id="derp" src="https://s3-eu-west-1.amazonaws.com/eshu/sample/hooves.png">	</div>	<div class="footer-row">	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FCC Twitchtv JSON API - Script Codes CSS Codes

 @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.twitch-app {	max-width: 800px;	margin: 0px auto;
}
.header-row {	position: relative;	background-color: mediumslateblue;	color: white;	line-height: 60px;	padding: 5px;	margin: 5px, 0px;	font-size: 36px;
}
.footer-row {	background-color: mediumslateblue;	line-height: 10px;
}
.channel-rows {	line-height: 70px;
}
.logo {	width: 50px;	height: 50px;	border-radius: 50%;	border: 3px solid white;
}
.offline {	background-color: pink;	display: flex;	margin: 0px 0px 2px;
}
.online {	background-color: lightgreen;	display: flex;	margin: 0px 0px 2px;
}
.menu {	position: absolute;	right: 0px;	bottom: 5px;	font-size: 12px;	font-weight: bold;	color: white
}
.active,
.selector:hover {	width: 65px !important;	transition: width 0.4s linear;	cursor: pointer;
}
#online.selector .circle {	background-color: lightgreen;
}
#offline.selector .circle {	background-color: pink;
}
.selector {	line-height: 20px;	height: 20px;	background-color: darkslategrey;	padding: 0px 5px;	margin: 2px 2px;	width: 20px;	overflow: hidden;	float: right;	clear: right;
}
.selector .circle {	height: 10px;	width: 10px;	border-radius: 50%;	background-color: white;	border: 1px solid white;	float: left;	margin: 5px 5px 5px 0px;
}
.selector p {	float: right;	margin: 0px;
}
.disclaimer {	font-size: 36px;	text-align: center;
}
#derp {	height: 200px;	border: solid lightblue;	border-radius: 5%;
}
.refresh-button {	transition: transform 0.1s ease-out;
}
.refresh-button.refreshing {	animation: spin 1s infinite linear;
}
.refresh-button:hover {	cursor: pointer;	transform: scale(1.3);
}

FCC Twitchtv JSON API - Script Codes JS Codes

var channels = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff", "xxreinagamerxx"];
const fetchChannels = (cb) => {	let counter = 0;	channels.forEach((channel) => {	const urlMaker = (type, name) => {	return 'https://api.twitch.tv/kraken/' + type + '/' + name + '?callback=?';	};	$.getJSON(urlMaker('streams', channel), (data) => {	var game, status;	if (data.stream === null) {	game = 'Offline';	status = 'offline';	} else if (data.stream === undefined) {	game = 'Account closed';	status: 'offline';	} else {	game = data.stream.game;	status = 'online';	};	$.getJSON(urlMaker('channels', channel), (data) => {	const logo = data.logo !== null ? data.logo : 'https://s3-eu-west-1.amazonaws.com/eshu/sample/hooves.png';	const name = data.display_name !==null ? data.display_name : channel;	const description = status === 'online' ? ': ' + data.status : '';	const html = '<div class="' +	status + '"><div class="col-xs-2 col-sm-1"><img src="' +	logo + '" class="logo"></div><div class="col-xs-10 col-sm-3"><a href="' +	data.url + '" target="_blank">' +	name + '</a></div><div class="col-xs-10 col-sm-8">'+	game + '<span class="hidden-xs">' +	description + '</span></div></div>';	status === "online" ? $(".channel-rows").prepend(html) : $(".channel-rows").append(html);	counter++;	if (counter === channels.length) cb();	});	});	});
};
const disclaimer = (status) => {	var visibleRows = $(".channel-rows").children().not('.hidden');	if (visibleRows.length === 0) { $(".disclaimer").removeClass("hidden"); $(".selector-status").text(status);	} else { $(".disclaimer").addClass("hidden");	};
};
const selection = function() {	$(".selector").removeClass("active");	$(this).addClass("active");	var status = $(this).attr("id");	if (status === 'all') {	$(".online, .offline").removeClass("hidden");	} else if (status === "online") {	$(".offline").addClass("hidden");	$(".online").removeClass("hidden");	disclaimer(status);	} else {	$(".online").addClass("hidden");	$(".offline").removeClass("hidden");	disclaimer(status);	};
};
$(fetchChannels);
$(".selector").click(selection);
$(".refresh-button").click(function() {	$(".refresh-button").addClass("refreshing");	var status = $(".selector").filter(".active");	$(".channel-rows").empty();	fetchChannels(() => {	$(status).click();	$(".refresh-button").removeClass("refreshing");	});
});
FCC Twitchtv JSON API - Script Codes
FCC Twitchtv JSON API - Script Codes
Home Page Home
Developer Victoria
Username Enieste
Uploaded December 02, 2022
Rating 3
Size 3,446 Kb
Views 18,216
Do you need developer help for FCC Twitchtv JSON 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!

Victoria (Enieste) Script Codes
Name
FCC Recipe Box
FCC JS Calculator
React TODO
FCC Tic Tac Toe
React konva
FCC Random quote machine
D3 paths
FCC Game of Life
FCC Wiki viewer
FCC Reacted Markdown
Create amazing art & images 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!