Skip to content

Instantly share code, notes, and snippets.

@rgsoto

rgsoto/index.html

Created September 2, 2018 17:56
Show Gist options
  • Save rgsoto/985c9fdd87d67be988487af621e34cc1 to your computer and use it in GitHub Desktop.
Save rgsoto/985c9fdd87d67be988487af621e34cc1 to your computer and use it in GitHub Desktop.
Download ZIP
twitch api rs
Raw
index.html
<head>
<title> Twitch stream app </title>
</head>
<body>
<div class="container">
<div class="header">
<img class = "header_img" src="https://vignette4.wikia.nocookie.net/logopedia/images/2/26/Twitch_logo.svg/revision/latest?cb=20140727180649"></img>
<h1 id="title"> Streamers </h1>
</div>
<div id="ESL_SC2">
<div class="user" > <a href="https://www.twitch.tv/esl_sc2" target="_blank">ESL_SC2 </a> <br> <span id="ESL_SC2_stream"></span> </div>
</div>
<div id="OgamingSC2">
<div class="user" > <a href="https://www.twitch.tv/ogamingSC2" target="_blank"> OgamingSC2 </a> <br> <span id="OgamingSC2_stream"> </span> </div>
</div>
<div id="freecodecamp">
<div class="user" > <a href="https://www.twitch.tv/freecodecamp" target="_blank"> FCC </a> <br> <span id="freecodecamp_stream"></span> </div>
</div>
</div>
</body>
Raw
script.js
// Next steps:
// How to display the game output in the html and css. right now it's not rendered properly. [DONE]
// PROBLEM: What to do with the toggle button? if someone's playing a game, do I dsplay the toggle as green AND the game? Or just the game? Probably fine to not do green and just display the game.
// If data.stream.game == true, remove gray toggle button
window.onload = function searchQuery() {
let baseUrl = 'https://wind-bow.gomix.me/twitch-api/channels/';
let fullUrlEsl = baseUrl + 'ESL_SC2';
let fullUrlOgaming = baseUrl + 'OgamingSC2';
let fullUrlFcc = baseUrl + 'freecodecamp';
let channels = ["ESL_SC2", "freecodecamp", "OgamingSC2"]
for (let i = 0; i < channels.length; i++) {
$.ajax ({
type: 'GET',
dataType: "jsonp",
url: baseUrl + channels[i],
success: function(dataI){
//console.log(dataI);
$.ajax({
type: 'GET',
dataType: "jsonp",
url: 'https://wind-bow.gomix.me/twitch-api/streams/'+ dataI.name,}).done(function(data2){
console.log(data2);
if (data2.stream == null) {
$("#" + channels[i] + "_stream").html('is offline');
} else {
$("#" + channels[i] + "_stream").html(data2.stream.game);
// $(channels in here).click(function(event){
// add an ajax call with the twitch URL and then just do channels[i].
// If this doesnt work within the if statement then just break it out
//})
}
});
},
error: function (error) {
alert("Error: User not found");
}
});
}
};
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
style.css
/*--- font import ---*/
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed');
/*--- CSS Rules ---*/
h2 {
font-family: 'barlow condensed', serif;
color: #00B4CC;
position: relative;
top: 0;
width: 500px;
margin: 0 auto;
padding: 10px;
}
body {
width: 500px;
height: 1400px;
margin: 0 auto;
}
.container {
position: relative;
}
.user {
border: 4px dotted;
border-color: gray;
text-align: left;
width: 45%;
margin: 15px;
padding: 5px;
position: relative;
}
.switch input {
position: absolute;
opacity: 0;
}
/**
* 1. Adjust this to size
*/
.switch {
display: inline-block;
font-size: 15px; /* 1 */
height: 1em;
width: 2em;
background: #b7b6b1;
border-radius: 1em;
}
.switch div {
height: 1em;
width: 1em;
border-radius: 1em;
background: #FFF;
box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
transition: all 300ms;
}
.switch input:checked + div {
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
span {
color: green;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.google.com/specimen/Barlow+Condensed" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment