rgsoto/index.html

## 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>

## 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");
       }

     });


   }

};


## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

## 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;
}

## 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" />

## twitch-api-rs.markdown

      
    Raw
  

              twitch-api-rs.markdown
            
          
    twitch api rs

A Pen by Renier Soto on CodePen.
License.
	<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>
	// 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");
	}

	});



	}

	};
	/--- 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;
	}
	<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" />