fCC Twitch

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

fCC Twitch API application for freeCodeCamp

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>fCC Twitch</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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" href="css/style.css">

  
</head>

<body>

  <div class="container-fluid">
    <header>
        <div class="jumbotron header">
            <div class="row">
                <div class="col-xs-2">
                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9InN2ZzI5ODUiICAgdmVyc2lvbj0iMS4xIiAgIGlua3NjYXBlOnZlcnNpb249IjAuNDguMiByOTgxOSIgICB3aWR0aD0iMTAwMCIgICBoZWlnaHQ9IjExMzkuNDEyIiAgIHhtbDpzcGFjZT0icHJlc2VydmUiICAgc29kaXBvZGk6ZG9jbmFtZT0iVHdpdGNoIGxvZ28gYmxhY2suc3ZnIj48bWV0YWRhdGEgICAgIGlkPSJtZXRhZGF0YTI5OTEiPjxyZGY6UkRGPjxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcyAgICAgaWQ9ImRlZnMyOTg5IiAvPjxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTIzNCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMzgiICAgICBpZD0ibmFtZWR2aWV3Mjk4NyIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGZpdC1tYXJnaW4tbGVmdD0iMC41IiAgICAgZml0LW1hcmdpbi1ib3R0b209IjAuNSIgICAgIGZpdC1tYXJnaW4tdG9wPSIwLjUiICAgICBmaXQtbWFyZ2luLXJpZ2h0PSIwLjUiICAgICBpbmtzY2FwZTp6b29tPSIwLjMzNzEyNTY2IiAgICAgaW5rc2NhcGU6Y3g9IjM0NC43NjU0NCIgICAgIGlua3NjYXBlOmN5PSIyMDEuNzE1NjciICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNjc1IiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjExIiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIgICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImcyOTkzIiAvPjxnICAgICBpZD0iZzI5OTMiICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIiAgICAgaW5rc2NhcGU6bGFiZWw9IlR3aXRjaF9JbnRlZ3JhdGlvbkd1aWRlbGluZXMiICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjI1LDAsMCwtMS4yNSwtNzc5LjU2ODM3LDIwODkuODE2MikiPjxnICAgICAgIGlkPSJnMjk5NSIgICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoOS41MzI0NDI3LDAsMCw5LjUzMjQ0MjcsMTM0OC45NDkzLDExODguMjM0NCkiPjxwYXRoICAgICAgICAgZD0ibSAwLDAgLTEzLjY1MiwtMTMuNjUxIC0yMS40NDUsMCAtMTEuNjk5LC0xMS42OTcgMCwxMS42OTcgLTE3LjU0OCwwIDAsNTYuNTQ0IEwgMCw0Mi44OTMgMCwwIHogbSAtNzIuMTQ2LDUwLjY5MiAtMy44OTksLTE1LjU5OSAwLC03MC4xOSAxNy41NSwwIDAsLTkuNzUxIDkuNzQ2LDAgOS43NTIsOS43NTEgMTUuNTk2LDAgMzEuMTk2LDMxLjE5MiAwLDU0LjU5NyAtNzkuOTQxLDAgeiIgICAgICAgICBzdHlsZT0iZmlsbDojNjQ0MWE1O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICAgIGlkPSJwYXRoMjk5NyIgICAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjwvZz48cGF0aCAgICAgICBkPSJtIDk0MC4wMzYwMSwxMjI1LjM3NTYgNzQuMzQzNDksMCAwLDIyMy4wNjg3IC03NC4zNDM0OSwwIDAsLTIyMy4wNjg3IHogbSAyMDQuNDMyNzksMCA3NC4zNDM1LDAgMCwyMjMuMDY4NyAtNzQuMzQzNSwwIDAsLTIyMy4wNjg3IHoiICAgICAgIHN0eWxlPSJmaWxsOiM2NDQxYTU7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmUiICAgICAgIGlkPSJwYXRoMjk5OSIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48L2c+PC9zdmc+" alt="twitch" class="logo">
                </div>
                <div class="col-xs-8 text-primary text-center">
                    <h1>TWITCH STREAMERS</h1>
                </div>
                <div class="col-xs-2">
                    <ul class="list-group">
                        <li class="list-group-item-heading all">
                            <a href="#" class="btnNav">ALL</a>
                        </li>
                        <li class="list-group-item-heading online">
                            <a href="#" class="btnNav">ONLINE</a>
                        </li>
                        <li class="list-group-item-heading offline">
                            <a href="#" class="btnNav">OFFLINE</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <main>
        <div class="jumbotron streamer">
            <div class="row">
                <div class="col-xs-12">
                    <ul class="streamerList">
                    </ul>
                </div>
            </div>
        </div>
    </main>
</div>
  <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/r3b311i0n/fcc-twitch-RoBwXN */
/* github: https://github.com/r3b311i0n/fCC_Twitch_API */

/*noinspection CssUnknownTarget*/
@import url(https://fonts.googleapis.com/css?family=Audiowide);
@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
    background: #7d5bbe;
    padding-right: 10em;
    padding-left: 10em;
}

.btnNav {
    color: inherit;
    transition-property: color;
    transition-duration: 1s;
    text-decoration: none;
}

.btnNav:focus {
    text-decoration: none;
    color: inherit;
}

.btnNav:hover {
    text-decoration: none;
    color: black;
}

.container-fluid {
    font-family: "Audiowide", serif;
    background-color: #7d5bbe;
}

.header {
    background-color: white;
    color: #7d5bbe;
}

.header h1 {
    color: #7d5bbe;
    padding-top: 1rem;
}

.list-group {
    padding-top: 2em;
    list-style: none;
    text-align: left;
    float: right;
}

.logo {
    float: left;
    padding-top: 1em;
    width: 130px;
    height: 143px;
}

.streamer {
    background-color: white;
    font-family: 'Montserrat', sans-serif;
}

.streamerList {
    color: #0e9dd9;
    font-size: 1.3em;
}

.streamerResponse {
    padding-top: 1.3em;
}

.streamerUnavailable {
    padding-top: 1.3em;
    color: #d30000;
    cursor: default;
}

/*Downloaded from https://www.codeseek.co/r3b311i0n/fcc-twitch-RoBwXN */
var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"];
var api = "https://crossorigin.me/https://wind-bow.gomix.me/twitch-api/";

//noinspection JSUnusedLocalSymbols
function main(e) {
    $(".online").css("opacity", 0.4);
    $(".offline").css("opacity", 0.4);
    all();
}

//noinspection JSUnusedLocalSymbols
function all(e) {
    $(".streamerList").children().remove();

    $(".online").css("opacity", 0.4);
    $(".offline").css("opacity", 0.4);
    $(".all").css("opacity", 1);

    users.forEach(function (element, index, users) {
        $.getJSON(api + "users/" + element, function (data) {
            if (data.hasOwnProperty("error")) {
                $(".streamerList").append("<li class='streamerUnavailable'>" + element + " is unavailable!" + "</li>");
            } else {
                $(".streamerList").append("<li class='streamerResponse'>" + "<a target='_blank' href='" + "https://www.twitch.tv/" + element + "'>" + element + "</a></li>");
            }
        });
    });
}

//noinspection JSUnusedLocalSymbols
function online(e) {
    $(".streamerList").children().remove();

    $(".all").css("opacity", 0.4);
    $(".offline").css("opacity", 0.4);
    $(".online").css("opacity", 1);

    users.forEach(function (element, index, users) {
        $.getJSON(api + "streams/" + element, function (data) {
            if (data["stream"] !== null) {
                $(".streamerList").append("<li class='streamerResponse'>" + "<a target='_blank' href='" + "https://www.twitch.tv/" + element + "'>" + element + " - " + data["stream"]["game"] + "</a></li>");
            }
        });
    });
}

//noinspection JSUnusedLocalSymbols
function offline(e) {
    /*
     if user status is offline, fill stream list with offline users.
     */
    $(".streamerList").children().remove();

    $(".all").css("opacity", 0.4);
    $(".online").css("opacity", 0.4);
    $(".offline").css("opacity", 1);

    users.forEach(function (element, index, users) {
        $.getJSON(api + "streams/" + element, function (data) {
            if (data["stream"] == null) {
                $(".streamerList").append("<li class='streamerResponse'>" + "<a target='_blank' href='" + "https://www.twitch.tv/" + element + "'>" + element + "</a></li>");
            }
        });
    });
}

$(".all").on("click", all);
$(".online").on("click", online);
$(".offline").on("click", offline);

$(document).ready(main());

Comments