Twitcher

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