Twitch.tv FCC

In this example below you will see how to do a Twitch.tv FCC with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dem-s, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dem-s ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Twitch.tv FCC  </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  ??<header>
<h2>Twitch.tv<br>who's broadcasting now?</h2>
<ul id="filters">
  <li id="onlineFilter">online</li>
  <li id="offlineFilter">offline</li>
  <li id="allFilter">all</li>
</ul>
<form>
<input type="search" class="search" placeholder="search another channel..."><button id="searchBtn">search</button><button id="reset">reset</button></form>
</header>
  
  <div class="container">
</div>

<footer>
		<span>&copy; 2016 <a href="https://codepen.io/dem-s" target="_blank">dem-s</a> - All rights 
		reserved.</span>
	</footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/dem-s/twitchtv-fcc-pNrBaW */
header {
  width: 95%;
  max-width: 414px;
  margin: 0 auto;
  padding: 0 0 20px 0;
  box-sizing: border-box;
 
}

h2 {
  text-align: center;
  color: black;
  width: 95%;
  max-width: 414px;
  margin: 0 auto;
  padding: 5px;
  font-variant: small-caps;

}

a {
  text-decoration: none;
}

.logo {
  height: 60px;
  float: left;
  margin-right: 10px;
}

.error {
  color: red;
  font-weight: bold;
}


#filters {
  text-align: center;
  padding:0;
}

#filters li {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  margin: auto 20px;
  color: white;
  padding: 5px;
  width: 80px;
  text-align: center;
  box-shadow: 1px 1px 3px black;
  border-radius: 30px;
  font-weight: bold;
}

#onlineFilter {
  background: #2DCB70;
}

#offlineFilter {
  background: #F84545;
}

#allFilter {
  background: cadetblue;
}

form {
  text-align: center;
}
.search {
  width: 250px; 
  height: 30px;
  padding: 5px;
}

button {
  height: 30px;
  margin: auto 5px;
}

div {
  height: 60px;
  margin: 5px auto;
  padding: 5px 10px;
  border-bottom: 1px solid darkgrey;
}

a {
  font-size: 1.2rem;
}

.container {
  width: 95%;
  max-width: 414px;
  margin: 10px auto;
  height: 100%;
  border-bottom: none;
}

.container div {
  max-height: 60px;
  overflow-y: hidden;
}

.status {
  height: 30px;
  margin: 15px;
  float:right;
}

footer {
  height: 28px;
  line-height: 28px;
  padding:0;
  text-align: center;
  margin: 0 auto;
  
}

/*Downloaded from https://www.codeseek.co/dem-s/twitchtv-fcc-pNrBaW */


var users = ["OgamingSC2", "cretetion", "freecodecamp", "ESL_SC2", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "qeqw"];


$.each(users, function search(index, value) {
  
$.getJSON("https://crossorigin.me/https://wind-bow.hyperdev.space/twitch-api/streams/" + value, function(sdata) {
  if(sdata.error) {
    $(".container").append("<div class='error'><img class='status' src='https://freeiconshop.com/files/edd/error-flat.png'  title='not found'><p>" + sdata.message + "</p></div>");
  }
  
    else if(sdata.stream == null) {
      $.getJSON("https://crossorigin.me/https://wind-bow.hyperdev.space/twitch-api/channels/" + value, function(data) {
    $(".container").append("<div class='offline'><img class='status' src='https://freeiconshop.com/files/edd/cross-flat.png'  title='offline'><img class='logo' src='" + data.logo + "'><a href='https://www.twitch.tv/" + data.display_name + "' target='_blank'>" + data.display_name + "</a></div>");
    console.log(data);});
    } else {
    $(".container").append("<div class='online'><img class='status' src='https://freeiconshop.com/files/edd/checkmark-flat.png'  title='online'><a href='" + sdata.stream.channel.url + "'target='_blank'><img class='logo' src='" + sdata.stream.channel.logo + "'>" + sdata.stream.channel.display_name + "</a><br><small>" + sdata.stream.channel.status + "</small></div>");}
 }); 
});

$("#searchBtn").on("click", function(evt) {
  evt.preventDefault();
  var newSearch = ($(".search").val());
  $.getJSON("https://crossorigin.me/https://wind-bow.hyperdev.space/twitch-api/streams/" + newSearch, function(nsdata) {
  if(nsdata.error) {
    $(".container").before("<div class='error'><img class='status' src='https://freeiconshop.com/files/edd/error-flat.png'  title='not found'><p>" + nsdata.message + "</p></div>");
  }
  
    else if(nsdata.stream == null) {
      $.getJSON("https://crossorigin.me/https://wind-bow.hyperdev.space/twitch-api/channels/" + newSearch, function(nnsdata) {
    $(".container").before("<div class='offline'><img class='status' src='https://freeiconshop.com/files/edd/cross-flat.png'  title='offline'><img class='logo' src='" + nnsdata.logo + "'><a href='https://www.twitch.tv/" + nnsdata.display_name + "' target='_blank'>" + nnsdata.display_name + "</a></div>");
    console.log(nnsdata);});
    } else {
    $(".container").before("<div class='online'><img class='status' src='https://freeiconshop.com/files/edd/checkmark-flat.png' title='online'><a href='" + nsdata.stream.channel.url + "'target='_blank'><img class='logo' src='" + nsdata.stream.channel.logo + "'>" + nsdata.stream.channel.display_name + "</a><br><small>" + nsdata.stream.channel.status + "</small></div>");}
 }); 
  
  $(".search").val('');
});
 

$("#onlineFilter").on("click", function(){
  $(".online").show();
  $(".offline, .error").hide();
});

$("#offlineFilter").on("click", function(){
  $(".offline").show();
  $(".online, .error").hide();
});

$("#allFilter").on("click", function(){
  $(".container *").show();
});

$("#reset").on("click", function(e) {
  e.preventDefault();
  $(".container").prevAll("div").remove();
})

Comments