This app helps you to see whether a user is online, offline or exist in the database of twitch tv. This project is in fulfillment of my on going freecodecamp projects.
A Pen by Ojini Chizoba Jude on CodePen.
Created
February 13, 2018 17:21
-
-
Save Deityhub/f295c6c98b5ed63f8f263d4d010d1b2a to your computer and use it in GitHub Desktop.
Twitch Tv Status Checker
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta description="author" content="Ojini Chizoba"> | |
| <title>Twitchtv Status App</title> | |
| <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan|Boogaloo|Encode+Sans:600|Handlee|Monoton" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="ct-limit"> | |
| <div class="main-logo"> | |
| <i class="fa fa-twitch" aria-hidden="true"></i><span> Twitch Tv Status Checker</span> | |
| <h4><a href="https://twitch.tv/freecodecamp" target="_blank">Freecodecamp <span id="fcc">...</span></a></h4> | |
| </div> | |
| </div> | |
| </div> | |
| <!--search section--> | |
| <section class="container row"> | |
| <div class="input-group search-box col-md-4"> | |
| <input id="search" type="text" class="form-control formamend" placeholder="Search username or id..."> | |
| </div> | |
| </section> | |
| <!--The result section--> | |
| <sectio class="container"> | |
| <div class="row re"> | |
| <div id="results"></div> | |
| </div> | |
| </sectio> | |
| <!--footer section--> | |
| <section class="footer-container hidden"> | |
| <div footer-items> | |
| <footer class="me"> | |
| © copyright 2017 | <a href="https://github.com/deityhub" target="_blank">Ojini Chizoba</a> | |
| <p class="social"> | |
| <a href="http://facebook.com/deityhub" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a> | |
| <a href="http://twitter.com/deityhub" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a> | |
| <a href="http://freecodecamp.com/deityhub" target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a> | |
| </p> | |
| </footer> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //do something once the page is ready | |
| $(document).ready(function(){ | |
| var user = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "theothermiles", "mrnoobdy", "nicolas2580", "fredrik74", "standog061", "deityhub", "hboissel", "etanzorz66", "coustos", "cupcakespectre", "rochagrande169", "rollandooo", "dragnorr42", "xaviinc"]; | |
| $('#search').focus(); | |
| $('#search').html(''); | |
| //looping through my array to check status of the user | |
| for(var i = 0; i < user.length; i++){ | |
| $.ajax({ | |
| //checks if the user is in the database | |
| //will be used for error handling | |
| url: 'https://api.twitch.tv/kraken/channels/'+ user[i] +'?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm?callback=?', | |
| success: function(data){ | |
| var img; | |
| var game; | |
| if(data.logo == null){ | |
| img = 'http://www.hostcgs.com.br/hostimagem/images/912twitch_logo.jpg' | |
| }else{ | |
| img = data.logo; | |
| } | |
| if(data.game == null){ | |
| game = 'N/A'; | |
| }else{ | |
| game = data.game; | |
| } | |
| //checks if the user is online or offline | |
| $.get('https://api.twitch.tv/kraken/streams/'+ data.name +'?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm?callback=?', function(d){ | |
| if(d.stream != null){ | |
| $('#results').append('<div class="col-md-2" id="resultbox">'+ '<img src="'+ img +'" >' +'<a href = "'+ data.url +'" target="_blank">'+ data.name +'</a>' + '<p>status: <i>online</i></p>' + '<p>views: '+ data.views +' </p>' + '<p>followers: '+ data.followers +'</p>' + '<p>game:'+ game +'</p>' + '</div>'); | |
| }else{ | |
| $('#results').append('<div class="col-md-2" id="resultbox">'+ '<img src="'+ img +'" >' +'<a href = "'+ data.url +'" target="_blank">'+ data.name +'</a>' + '<p>status: <i>offline</i></p>' + '<p>views: '+ data.views +' </p>' + '<p>followers: '+ data.followers +'</p>' + '<p>game:'+ game +'</p>' + '</div>'); | |
| } | |
| $('.footer-container').removeClass('hidden'); | |
| }) | |
| }, | |
| error: function(err){ | |
| console.log('user not found') | |
| } | |
| }); | |
| }; | |
| //This works when you click a button | |
| /*$('#searchbtn').on('click', function(e){ | |
| var input = $('#search').val(); | |
| e.preventDefault(); | |
| });*/ | |
| //This works when the user presses enter key | |
| $('#search').keydown(function(key){ | |
| $('#search').focus(); | |
| $('#search').html(''); | |
| if(key.keyCode === 13){ | |
| key.preventDefault(); | |
| var input = $('#search').val(); | |
| $.ajax({ | |
| //checks if the user is in the database | |
| //will be used for error handling | |
| url: 'https://api.twitch.tv/kraken/channels/'+ input +'?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm?callback=?', | |
| success: function(data){ | |
| var img; | |
| var game; | |
| if(data.logo == null){ | |
| img = 'http://www.hostcgs.com.br/hostimagem/images/912twitch_logo.jpg' | |
| }else{ | |
| img = data.logo; | |
| } | |
| if(data.game == null){ | |
| game = 'N/A'; | |
| }else{ | |
| game = data.game; | |
| } | |
| //checks if the user is online or offline | |
| $.get('https://api.twitch.tv/kraken/streams/'+ data.name +'?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm?callback=?', function(d){ | |
| if(d.stream != null){ | |
| $('#results').html('<div class="col-md-2" id="resultbox">'+ '<img src="'+ img +'" >' +'<a href = "'+ data.url +'" target="_blank">'+ data.name +'</a>' + '<p>status: <i>online</i></p>' + '<p>views: '+ data.views +' </p>' + '<p>followers: '+ data.followers +'</p>' + '<p>game:'+ game +'</p>' + '</div>'); | |
| }else{ | |
| $('#results').html('<div class="col-md-2" id="resultbox">'+ '<img src="'+ img +'" >' +'<a href = "'+ data.url +'" target="_blank">'+ data.name +'</a>' + '<p>status: <i>offline</i></p>' + '<p>views: '+ data.views +' </p>' + '<p>followers: '+ data.followers +'</p>' + '<p>game:'+ game +'</p>' + '</div>'); | |
| } | |
| $('.footer-container').removeClass('hidden'); | |
| }) | |
| }, | |
| error: function(err){ | |
| $('#results').html('<h3>'+ input +'<i> not found!!!</i></h3>' + '<p>Possible ways to fix this are:</p>' + '<ul><li>Search only usernames or user-id</li><li>Check for whitespaces and close them</li><li>Recheck input for typoerrors</li><li>Kindly reload the page</li></ul>'); | |
| } | |
| }); | |
| } | |
| }); | |
| $.get('https://api.twitch.tv/kraken/streams/freecodecamp?client_id=5j0r5b7qb7kro03fvka3o8kbq262wwm?callback=?', function(fcode){ | |
| if(fcode.stream == null){ | |
| $('#fcc').html(' is offline'); | |
| }else{ | |
| $('#fcc').html(' is online'); | |
| } | |
| }); | |
| }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| margin: 0; | |
| padding: 0; | |
| background-color: #ecf0e7; | |
| font-family: 'Baloo Bhaijaan', cursive; | |
| } | |
| html, body { | |
| height: 100%; | |
| overflow: auto; | |
| } | |
| div.container-fluid { | |
| padding: 0px; | |
| } | |
| span{ | |
| font-weight: bold; | |
| font-family: 'Monoton', cursive; | |
| } | |
| h4{ | |
| font-family: 'Monoton', cursive; | |
| } | |
| .main-box { | |
| background-color: #fbfbfb; | |
| padding-bottom: 10px; | |
| position: relative; | |
| } | |
| .ct-limit { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| .main-logo { | |
| font-size: 2.2em; | |
| font-family: 'Lobster', cursive; | |
| padding: 5px 27px 5px 5px; | |
| margin-top: 15px; | |
| color: #543194; | |
| text-align: center; | |
| text-shadow: 1px 2px 0px #fff; | |
| } | |
| .main-logo i { | |
| font-size: 0.9em; | |
| } | |
| .search-box { | |
| max-width: 100%; | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| #resultbox{ | |
| background-color: darkseagreen; | |
| border-radius: 12px; | |
| padding: 8px; | |
| margin-right: 42.4px; | |
| margin-bottom: 15px; | |
| height: 150px; | |
| width: 250px; | |
| position: relative; | |
| font-family: 'Encode Sans', sans-serif; | |
| } | |
| img{ | |
| height: 50px; | |
| width: 50px; | |
| float: right; | |
| } | |
| .formamend{ | |
| width: 100% !important; | |
| margin-top: -40px; | |
| } | |
| .center-block { | |
| display: block; | |
| margin-right: auto; | |
| margin-left: auto; | |
| } | |
| .container{ | |
| align-content: center; | |
| display: block; | |
| margin: 100px; | |
| } | |
| #results{ | |
| flex: 1; | |
| } | |
| .container{ | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .re{ | |
| justify-content: center; | |
| align-items: center; | |
| flex-flow: row; | |
| } | |
| .footer-container{ | |
| display: flex; | |
| justify-content: center; | |
| text-align: center; | |
| font-family: 'Handlee', cursive; | |
| font-size: 18px; | |
| } | |
| .footer-items{ | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .social{ | |
| order: center; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment