Twitch API app

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Twitch API app</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>

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

  
</head>

<body>

  <body>
    <header>
      <div class="container">
        <h1 class="display-1">Twitch.tv app</h1>
        <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav justify-content-center">
              <li id="allBTN" class="nav-item active">
                <a class="nav-link" href="#">streamers</a>
              </li>
              <li id="onlineBTN" class="nav-item">
                <a class="nav-link" href="#">Online</a>
              </li>
              <li id="offlineBTN" class="nav-item">
                <a class="nav-link" href="#">Offline</a>
              </li>
            </ul>
          </div>
        </nav>
       </div>
    </header>
    <section>
      <div class="container">
          <div id="online"></div>
          <div id="offline"></div>
          <div id="closed"></div>
      </div>
    </section>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/john14465/twitch-api-app-eVrVLL */
body {
  background: #4A357B;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1 {
  padding: 50px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}

img {
  max-width: 100%;
  border-radius: 10px;
}

header {
  text-align: center;
  border-bottom: 3px solid #fff;
}

.card a {
  color: #fff;
  font-weight: bold;
}

.card hr {
  background-color: #fff;
}

.card p {
  font-size: 1.5rem;
  font-weight: bold;
}

#online {
  display: block;
  transition: 1s;
}

#offline {
  display: block;
  transition: 1s;
}

#closed {
  display: block;
  transition: 1s;
}

/*Downloaded from https://www.codeseek.co/john14465/twitch-api-app-eVrVLL */
$(document).ready(function(){
    let streamersArr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

    for (let i = 0; i < streamersArr.length; i++){
        let streamURL = 'https://wind-bow.gomix.me/twitch-api/streams/' + streamersArr[i] + '?callback=?';
        let channelURL = "https://wind-bow.gomix.me/twitch-api/channels/" + streamersArr[i] + '?callback=?';
        $.getJSON(streamURL, function(streamers){
            if (streamers.stream !== null){
                $('#online').append('<div class="card card-body bg-success text-white my-4">' + 
                    '<div class="row">' + 
                        '<div class="col-md-4">' + 
                            '<img src="' + streamers.stream.channel.logo + '">' + 
                        '</div>' +
                        '<div class="col-md-8 py-3">' + 
                            '<a href="' + streamers.stream.channel.url + '" target="_blank">' + 
                                '<h2 class="display-4">'+ streamers.stream.channel.display_name +'</h2>' + 
                            '</a>' +
                            '<hr>' + 
                            '<p>Followers: ' + streamers.stream.channel.followers + '</p>' +
                            '<p>Streaming: ' + streamers.stream.channel.game + '</p>' + 
                        '</div>' + 
                    '</div>' + 
                '</div>');
            } else {
                $.getJSON(channelURL, function(streamers2){
                    if (streamers2.status === null) {
                        $('#closed').append('<div class="card card-body bg-secondary my-4">' + 
                            '<div class="row">' + 
                                '<div class="col-md-4">' + 
                                    '<img src="img/nolongeractive.png">' + 
                                '</div>' +
                                '<div class="col-md-8 py-3">' + 
                                    '<h2 class="display-4">'+ streamers2.display_name +'</h2>' +
                                    '<hr>' + 
                                        '<p>This account is no longer Active.</p>' +
                                '</div>' + 
                            '</div>' + 
                        '</div>');
                    } else {
                        $('#offline').append('<div class="card card-body bg-danger text-white my-4">' + 
                            '<div class="row">' + 
                                '<div class="col-md-4">' + 
                                    '<img src="' + streamers2.logo + '">' + 
                                '</div>' +
                                '<div class="col-md-8 py-3">' + 
                                    '<a href="' + streamers2.url + '" target="_blank">' + 
                                        '<h2 class="display-4">'+ streamers2.display_name +'</h2>' + 
                                    '</a>' + 
                                    '<hr>' +
                                    '<p>This Streamer is currently offline.</p>' + 
                                    '<p>Followers: ' + streamers2.followers + '</p>' +
                                    '<p>status: ' + streamers2.status + '</p>' + 
                                '</div>' + 
                            '</div>' + 
                        '</div>');
                    }
                });
            }
        });
    }

    $('#allBTN').on('click', function(){
        $('#onlineBTN').removeClass('active');
        $('#offlineBTN').removeClass('active');
        $('#allBTN').addClass('active');
        $('#online').css('display', 'block');
        $('#offline').css('display', 'block');
        $('#closed').css('display', 'block');
    });

    $('#onlineBTN').on('click', function(){
        $('#onlineBTN').addClass('active');
        $('#offlineBTN').removeClass('active');
        $('#allBTN').removeClass('active');
        $('#online').css('display', 'block');
        $('#offline').css('display', 'none');
        $('#closed').css('display', 'none');
    });

    $('#offlineBTN').on('click', function(){
        $('#onlineBTN').removeClass('active');
        $('#offlineBTN').addClass('active');
        $('#allBTN').removeClass('active');
        $('#online').css('display', 'none');
        $('#offline').css('display', 'block');
        $('#closed').css('display', 'none');
    });
});

Comments