Twitcher

In this example below you will see how to do a Twitcher with some HTML / CSS and Javascript

FreeCodeCamp project made with HTML, CSS, JS, JQuery and Ajax. Power by Twitch developer API.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Twitcher</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://yourwebsite.com/style.css'>
<link rel='stylesheet prefetch' href='https://codepen.io/username/pen/aBcDef'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--ONLY WORKS IN FULL PAGE MODE-->
<!-- metadata-->
<meta name="description" content="Twitchviewer">
<meta name="author" content="Jenny Hofbauer">

<!-- navbar-->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-left">
      <a class="navbar-brand">
        <button class="iconbutton" onclick='loadOn()'>
          <i class="fa fa-circle"></i>
          </button>
      </a>
      <a class="navbar-brand">
        <button class="iconbutton" onclick='loadOff()'>
          <i class="fa fa-circle-o"></i>
        </button>
      </a>
      <a class="navbar-brand">
        <button class="iconbutton" onclick='loadAll()'>
          <i class="fa fa-dot-circle-o"></i>
        </button>
      </a>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <a class="navbar-brand">
        <button class="iconbutton" onclick='removeChannel()'>
          <i class="fa fa-minus-square"></i>
        </button>
      </a>
      <a class="navbar-brand">
        <button class="iconbutton" onclick='addChannel()'>
          <i class="fa fa-plus-square"></i>
        </button>
      </a>
    </ul>
  </div>
</nav>

<!-- loading animation container-->
<div class="load"></div>

<!-- content container-->
<div class="container-fluid content"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/mojs-player/0.43.15/mojs-player.min.js'></script>
<script src='https://cdn.jsdelivr.net/mojs/0.265.6/mo.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/0xFFD700/twitcher-gLrNEZ */
body {
  background-color: black;
}

a,
a:hover {
  text-decoration: none;
}


/*media query (hovertext size)*/

@media all and (max-width: 2000px) {
  h2 {
    font-size: 1.6em;
  }
}

@media all and (max-width: 1600px) {
  h2 {
    font-size: 1.2em;
  }
}

@media all and (max-width: 1300px) {
  h2 {
    font-size: 1em;
  }
}

@media all and (max-width: 960px) {
  h2 {
    font-size: 2em;
  }
}

@media all and (max-width: 768px) {
  h2 {
    font-size: 3em;
  }
}

@media all and (max-width: 500px) {
  h2 {
    font-size: 2em;
  }
}

@media all and (max-width: 300px) {
  h2 {
    font-size: 1.5em;
  }
}


/*navbar*/

.navbar,
.iconbutton {
  background-color: black;
  color: white;
  border: none;
}


/*channel hover effects*/

.hovereffect {
  position: relative;
  margin-top: 10%;
}

.img-responsive {
  border-radius: 25px;
}

.overlay {
  display: none;
  color: white;
}

h2 {
  text-align: center;
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
}

.hovereffect:hover .overlay {
  display: block;
}

.hovereffect:hover .img-responsive {
  opacity: 0.2;
}


/*loading animation*/

.load {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; 
  background: rgba( 0, 0, 0, 0.98) url('https://upload.wikimedia.org/wikipedia/commons/3/37/YouTube_loading_symbol_2_(stable).gif') 50% 50% no-repeat;
}

body.loading {
  overflow: hidden;
}

body.loading .load {
  display: block;
}

/*Downloaded from https://www.codeseek.co/0xFFD700/twitcher-gLrNEZ */
var Accs = ["ESL_SC2", "OgamingSC2", "comster404", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "FreeCodeCamp", "hisisabadacct"];
//"loltyler1", "freaken_rican", "day9tv", "nathanias", "incontroltv", "sovietwomble", "escapistmagazine" to many request for Codepen works just fine in debugmode 
var offAccs = [];

$(document).ready(function() {
  loadOn();
});

/*API REQUESTS
AccArray: Channels to be queried (from the arrays Accs and offAccs)
AllOnOff: Specifies how the queried elements are appended (all, off, on)
baseUrl: Specifies which api request is used (channels or stream)*/
function load(AccArray, AllOnOff, baseUrl) {
  $(".content").empty();
  for (var j = 0; j < AccArray.length; j++) {
    channel = AccArray[j];

    var ajaxChannel = $.ajax({
      url: baseUrl + channel,
      type: 'GET',
      headers: {
        'Client-ID': 's5qwxoeau5a7khkn7pd9g4nvrfvymqh'
      },
      contentType: "application/json; charset=utf-8",
      async: false,
      dataType: "json"
    });

    if (AllOnOff === "on") {
      $.when(ajaxChannel).done(function(data) {
        if (data.stream === null) {
          offAccs.push(channel);
        } else {
          appendOn(data);
        }
      });
    }

    if (AllOnOff === "all") {
      $.when(ajaxChannel).fail(function(err) {
        appendErr(err);
      });
    }

    if (AllOnOff === "all" || AllOnOff === "off") {
      $.when(ajaxChannel).done(function(data) {
        appendAllOff(data);
      });
    }

  }
}

//button and onload event functions
function loadOn() {
  offAccs = [];
  load(Accs, "on", "https://api.twitch.tv/kraken/streams/");
}

function loadOff() {
  load(offAccs, "off", "https://api.twitch.tv/kraken/channels/");
}

function loadAll() {
  load(Accs, "all", "https://api.twitch.tv/kraken/channels/");
}

//append/binding functions
function appendOn(data) {

  var appOn = '<div class="col-md-3 col-sm-6 col-lg-2">' +
    ' <a href="' + data.stream.channel.url + '">' +
    '<div class="hovereffect">' +
    '<img class="img-responsive" src="' + data.stream.channel.logo + '" alt="Sorry, it seems like the image got lost." width="100%">' +
    '<div class="overlay">' +
    '<h2>' + data.stream.channel.display_name + '<br>' + data.stream.game + '<br>' + data.stream.created_at + '</h2>' +
    '</div></div></a></div>';

  $(".content").append(appOn);
}

function appendAllOff(data) {

  var appAll = '<div class="col-md-3 col-sm-6 col-lg-2">' +
    ' <a href="' + data.url + '">' +
    '<div class="hovereffect">' +
    '<img class="img-responsive" src="' + data.logo + '" alt="Sorry, it seems like the image got lost." width="100%">' +
    '<div class="overlay">' +
    '<h2>' + data.name + '</h2>' +
    '</div></div></a></div>';

  $(".content").append(appAll);
}

function appendErr(err) {

  var appErr = '<div class="col-md-3 col-sm-6 col-lg-2">' +
    '<div class="hovereffect">' +
    '<img class="img-responsive" src="http://www.isv7.com/upload/Stati/polezno_znat/404.jpg" alt="error" width="100%">' +
    '<div class="overlay">' +
    '<h2>Sorry ' + channel + ' seems to be none existing or deleted</h2>' +
    '</div></div></div>';

  $(".content").append(appErr);
}

//add Channel
function addChannel() {
  var UserAdd = prompt("Enter the Channel you want to add");
  if (typeof UserAdd === 'string') {
    Accs.push(UserAdd);
    loadAll();
  }
}

//remove Channel
function removeChannel() {
  var UserRemove = prompt("Enter the Channel you want to remove");
  if (typeof UserRemove === 'string') {
    for (var e = 0; e < Accs.length; e++) {
      if (UserRemove == Accs[e]) {
        Accs.splice(e, 1);
        loadAll();
        break;
      }
    }
  }
}

//laoding function
$body = $("body");
$(document).on({
  ajaxStart: function() {
    $body.addClass("loading");
  },
  ajaxStop: function() {
    $body.removeClass("loading");
  }
});

Comments