FreeCodeCamp - Twitch.tv
How do I make an freecodecamp - twitch.tv?
Free Code Camp challenge to use the Twitch.tv API. Card flipping animation. . What is a freecodecamp - twitch.tv? How do you make a freecodecamp - twitch.tv? This script and codes were developed by Veronika on 30 November 2022, Wednesday.
FreeCodeCamp - Twitch.tv - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FreeCodeCamp - Twitch.tv</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<script src="https://use.fontawesome.com/d0c3a87dba.js"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <h1>Twitch Streams</h1> <div id="channel-container" class="container"> </div>
</body> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
FreeCodeCamp - Twitch.tv - Script Codes CSS Codes
*, *:before, *:after { box-sizing: border-box;
}
body { background-color: #f0ead3;
}
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 80%; margin: auto;
}
.flipper-container { -webkit-perspective: 1000px; perspective: 1000px; display: block;
}
.flipper-container:hover .flipper{ -webkit-transform: rotateY(180deg); transform: rotateY(180deg)
}
.channel-item, .channel-item-front, .channel-item-back { width: 250px; height: 270px; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.flipper { -webkit-transition: 1s; transition: 1s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 15px;
}
.channel-item-front { overflow: hidden; background-color: white; border: 20px solid white; z-index: 2;
}
.channel-item-front img { display: block; border-radius: 50%; height: 200px; width: 200px; margin: auto; margin-top: 30px;
}
.channel-item-back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); padding: 20px; font-family: 'Source Code Pro', monospace; font-size: 14px;
}
.channel-item-front, channel-item-back { position: absolute; top: 0; left: 0;
}
.online { background-color: #8ad277;
}
.offline-text { color: #bd3f47;
}
.online-text { color: #8ad277;
}
.offline { background-color: #bd3f47;
}
h1, h2, h3 { text-align: center;
}
h1 { font-family: 'Bungee Shade', cursive; font-size: 42px;
}
h2, h3 { font-family: 'Bungee', cursive;
}
h2 { position: absolute; font-size: 16px; width: 100%; margin: 0; margin-left: -5px;
}
h3 { color: white;
}
a { color: rgb(0, 0, 0); text-decoration: none;
}
FreeCodeCamp - Twitch.tv - Script Codes JS Codes
const channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"];
const placeholderImageURL = "http://dummyimage.com/250x250/000/ffffff&text=Account%20Closed";
function makeChannelDivFront(channelName, imgSrc, status){ var $div, $h2, $img; $div = $(`<div class="channel-item-front"></div>`); $img = $(`<img src="${imgSrc}">`); $h2 = $(`<h2><i class="fa fa-circle ${status}-text" aria-hidden="true"></i> ${channelName}</h2>`); $div.append($h2); $div.append($img); return $div;
}
function makeChannelDiv(channelName, imgSrc, status, game, streaming){ var $flipperContainer, $channelElement, $front, $back; $flipperContainer = $(`<a href="https://www.twitch.tv/${channelName}" target="_blank" class="flipper-container"></a>`); $channelElement = $(`<div class="channel-item flipper"></div>`); $front = makeChannelDivFront(channelName, imgSrc, status); $back = $(`<div class="channel-item-back ${status}"><h3>${status}</h3> ${game} ${streaming}</div>`); $channelElement.append($front); $channelElement.append($back); $flipperContainer.append($channelElement); return $flipperContainer;
}
function getChannelInfo(channelName){ var url = `https://api.twitch.tv/kraken/channels/${channelName}`; return $.ajax({ type: 'GET', url: url, headers: { 'Client-ID': '6sg591ghgymush3v6zcm6xy2sinbkhl' } });
}
function getStreamInfo(channelName){ var url = `https://api.twitch.tv/kraken/streams/${channelName}`; return $.ajax({ type: 'GET', url: url, headers: { 'Client-ID': '6sg591ghgymush3v6zcm6xy2sinbkhl' } });
}
function callTwitchAPI(channelName){ $.when(getChannelInfo(channelName),getStreamInfo(channelName)) .then(function(channelResponse,streamResponse){ var channel, stream, status, game, streaming, link; channel = channelResponse[0]; stream = streamResponse[0]; status = stream.stream? 'online':'offline'; game = stream.stream? stream.stream.game:''; streaming = stream.stream? stream.stream.channel.status:''; link = channel.url; $('#channel-container').append(makeChannelDiv(channelName, channel.logo,status, game, streaming)); }) .fail(function(){ $('#channel-container').append(makeChannelDiv(channelName, placeholderImageURL,'offline', '', '')); });
}
channels.forEach(callTwitchAPI);
Developer | Veronika |
Username | ivhed |
Uploaded | November 30, 2022 |
Rating | 3 |
Size | 3,285 Kb |
Views | 28,336 |
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 |
FreeCodeCamp - Personal Portfolio | 3,262 Kb |
Space Game Button | 3,321 Kb |
CSS Baby | 1,923 Kb |
MorphSVG Fruit | 2,490 Kb |
FreeCodeCamp - Markdown Previewer | 3,759 Kb |
FreeCodeCamp - Local Weather | 3,926 Kb |
React Pagination | 5,354 Kb |
FreeCodeCamp - Wikipedia Viewer | 3,722 Kb |
CSS Filter Blur | 1,923 Kb |
CSS Course - Fixed layout | 2,721 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 |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Box Shadow Effects | Retrofuturistic | 2,143 Kb |
Lunar eclipse | Ademilter | 2,056 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Border-radius animation | Yukulele | 2,480 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Multi column experiment. | Spylefkaditis | 2,805 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!