Twitch.tv

Developer
Tushar Singh
Size
4,305 Kb
Views
48,576
  1. Twitch.tv Previews
  2. Twitch.tv HTML Codes
  3. Twitch.tv CSS Codes
  4. Twitch.tv JS Codes

How do I make an twitch.tv?

What is a twitch.tv? How do you make a twitch.tv? This script and codes were developed by Tushar Singh on 08 July 2022, Friday.

Twitch.tv Previews
IQ Test

Twitch.tv - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch.tv</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto+Mono' rel='stylesheet' type='text/css'>
<div class="container"> <header> <ul class="nav nav-pills nav-justified"> <li id="all"><a href="#">All</a></li> <li id="online"><a href="#">Online</a></li> <li id="offline"><a href="#">Offline</a></li> </ul> </header> <div id="slogan" class="text-center"> <h4><i class="fa fa-quote-left"></i> Streaming live video broadcasts for Everyone <i class="fa fa-quote-right"></i></h4></div> <div id="search-section"> <input type="text" placeholder="&#128269" id="search"> </div> <div id="main-section"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Twitch.tv - Script Codes CSS Codes

body { background-image:url('http://hypertonic.com/wp-content/uploads/2013/11/bigstock-Abstract-d-white-geometric-ba-62092823.jpg'); background-size:cover; background-attatchment: fixed; font-family: 'Roboto Mono', sans-serif;
}
.container { width: 40%; background-color:rgba(0, 128, 128, 1); color: white; border-radius: 5px; box-shadow: 10px 10px 5px #888888; margin-bottom:50px; margin-top:75px;
}
h4, .title{ font-family: 'Roboto Slab', sans-serif;
}
h4 { margin-top:20px;
}
header> ul li { font-size:2em; border-right: 1px solid white; }
header> ul li:last-child{ border:none;
}
header { border-bottom: 1px solid white;
}
#search { width: 100%; border-radius:10px; margin-top:10px; margin-bottom:10px; color:teal; padding-left:10px;
}
#search:focus { background-color: lightgrey; text-decoration: none; outline: none;
}
a{ color: white;
}
#main-section a:hover { color: white; }
#main-section img { float: left; padding-bottom:10px; margin-right: 20px; margin-bottom: 10px; width:100px; border-radius:100%;
}
.fa-check, .fa-times { float: right; margin-top:5px;
}
#main-section ul li { list-style: none; margin-top:20px; overflow:hidden; border-bottom: 1px solid white; padding-top:10px; padding-bottom:10px;
}
.blink-on { color:#0f0;
}
.blink-off { color:#f00;
}
.fa-hand-o-right { padding-right:10px;
}
@media (max-width:769px){ .container { width: 80%; } header ul>li { border: none; }
}
@media (max-width: 500px){ .container{ width:90%; font-size:.8em; } img { width:50px; }
}

Twitch.tv - Script Codes JS Codes

//1. Loop through the array
//2. getJSON
//3. streams end point to check if channel is streaming or not //3.1 if not assign offline and add an icon //3.2 else get the stream status
//4. Use channels endpoint for name and logo //4.1 if logo is null,add a default img
//5. Append the data to the document
//6. Use keyup for input field
// 7. Use click handler for the nav
// Just wanted to focus on the functionality and make the design neat and easily accessible(no fancy stuff)
// It would be really dumb to call ajax every time a different button is clicked so I called it once and worked my way up accordingly.
$(document).ready(function () {
// twitchers list(array)
var twitchers = ["freecodecamp", "MEDRYBW", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"]; var name; var statusSign; var logo; var status; var statusOF; // input field used keyup function // loop through list items //if it has an index of -1(not found)-hide //else show $('#search').keyup(function(){ var input = $(this).val().toLowerCase(); $('#main-section li').each(function(){ if($(this).html().toLowerCase().indexOf(input) == -1) { $(this).hide(); } else { $(this).show(); } }); });//end keyup // loop through the twithers twitchers.forEach(function(user) { // channel endpoint url
var channelUrl ="https://api.twitch.tv/kraken/channels/"+user+ '?callback=?'; // streams endpoint url
var streamUrl = "https://api.twitch.tv/kraken/streams/"+ user+'?callback=?'; // get json $.getJSON(channelUrl, function(channel) { $.getJSON(streamUrl ,function(stream) { // if twitcher is not streaming if(stream.stream == null) { // add particular img
statusSign = '<i class="fa fa-times fa-2x"></i>'; // not streaming -just displaying it status = "Currently Not Streaming"; // simply means twitcher is offline statusOF ='<span class="offline">Offline</span><span class="blink blink-off"> !!!</span>'; // if twitcher is streaming same steps with a different icon } else { statusSign = '<i class="fa fa-check fa-2x"></i>'; status=channel.status;
statusOF ='<span class="online">Online</span><span class="blink blink-on"> !!!</span>'; } // storing display name into a variable for ease of use name = channel.display_name; // if twitcher has no logo, use a default img if (channel.logo == null) { channel.logo = 'http://www.comprico.com/wp-content/uploads/2015/06/user-placeholder-e1438542352384.png' } // created html variable to gather the information
// later append it to the div with id main-section
var html = '<div class="sub-section">';
html+= '<ul><li>';
html += '<img src="'+channel.logo+'">';
html+= '<span class="title"><i class="fa fa-hand-o-right"></i> Title: ';
html+= '<a href="https://www.twitch.tv/'+user+'"target="_blank">'+name+'</a></span><br>';
html+= statusSign;
html+= '<span class="statusOF">'+statusOF+'</span><br>';
html+= '<span class="status">'+status+'</span></li></ul></div>'
// append it to the document $(html).appendTo("#main-section"); // I first used this method and I thought why not change the css and then eventually stubled upon the better option to do the task
/* $('#all').click(function() { $('.sub-section').css('display', 'block'); }); $('#offline').click(function(){ $('.sub-section:contains("Online")').css('display', 'none'); $('.sub-section:contains("Offline")').css('display', 'block'); }); $('#online').click(function(){ $('.sub-section:contains("Offline")').css('display', 'none'); $('.sub-section:contains("Online")').css('display', 'block'); });*/ // buttons $("#all").click(function() { $("span.online,span.offline").parents("li").show(); }); $("#offline").click(function() { $("span.online").parents("li").hide(); $("span.offline").parents("li").show(); }); $("#online").click(function() { $("span.offline").parents("li").hide(); $("span.online").parents("li").show(); }); // fade effect on exclamation marks var blink = function(){ $('.blink').fadeOut(500); $('.blink').fadeIn(500); } blink(); });// end streams json });// end channels json });// end each
}); // end ready
Twitch.tv - Script Codes
Twitch.tv - Script Codes
Home Page Home
Developer Tushar Singh
Username tushar_13
Uploaded July 08, 2022
Rating 3
Size 4,305 Kb
Views 48,576
Do you need developer help for Twitch.tv?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tushar Singh (tushar_13) Script Codes
Name
Experiments
Random Stuff
Portfolio
Random Quote Generator
Pomodoro Clock
Wikipedia Viewer
Hamburger for smaller screens
Manav
JavaScript Calculator
Tic Tac Toe
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!