Twitch.tv
How do I make an twitch.tv?
Twitch.tv for FreeCodeCamp.. What is a twitch.tv? How do you make a twitch.tv? This script and codes were developed by Thomas Vaeth on 24 September 2022, Saturday.
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/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img src='http://i272.photobucket.com/albums/jj173/ONR_RoadRunner/414760df-9869-47a4-bcb8-28fbae18f5bb_zps47122456.png' class='twitch' /> <div class='container'> <div class='buttons-container'> <table> <tr> <td id='all' class='active'>All</td> <td id='online'>Online</td> <td id='offline'>Offline</td> </tr> </table> </div> <div class='search-container'> <form> <input type='text'></input> </form> </div> <div class='users-container'> <ul></ul> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Twitch.tv - Script Codes CSS Codes
body { background-color: white; font-family: Helvetica, sans-serif;
}
a { text-decoration: none; color: #6441a5;
}
.twitch { display: block; margin: 0 auto 0 auto; width: 400px;
}
.container { width: 400px; margin: 0 auto; text-align: center; border: 1px solid #6441a5;
}
table { width: 100%; border-collapse: collapse;
}
td { background-color: #6441a5; color: white; padding: 20px;
}
td:hover { cursor: pointer;
}
.active { background-color: #B9a3e3;
}
#online { border-width: 0 1px; border-style: solid;
}
form { padding: 15px; border-bottom: 1px solid gainsboro;
}
input { border: 1px solid gainsboro; border-radius: 15px; height: 25px; padding: 0 30px; width: 80%; background: url('http://www.clker.com/cliparts/9/T/2/h/X/7/search-icon-hi.png') no-repeat 10px; background-size: 15px; color: grey;
}
ul { padding: 0; list-style-type: none;
}
.user { display: block; padding: 15px; text-align: left;
}
.user-icon { display: inline-block; border-radius: 100%; height: 50px; width: 50px; float: left;
}
.user-name { display: inline-block; padding-left: 10px;
}
.user-info { display: block; color: grey; font-size: 12px; margin-top: -10px; padding-left: 60px;
}
.user-status { display: inline-block; float: right; padding-top: 15px;
}
.fa-exclamation { color: red;
}
.fa-twitch { color: green;
}
Twitch.tv - Script Codes JS Codes
var users = [ 'justin', 'syndicate', 'riotgames', 'captainsparklez', 'LIRIK', 'PhantomL0rd', 'esl_csgo', 'sodapoppin', 'summit1g', 'Nightblue3', 'goldglove', 'tsm_bjergsen', 'imaqtpie', 'tsm_theoddone', 'trick2g'
];
var status;
function appendUser(icon, name, status, link, info) { var user = document.createElement('li'); user.className = 'user'; var userIcon = document.createElement('img'); userIcon.className = 'user-icon'; userIcon.setAttribute('src', icon); user.appendChild(userIcon); $(userIcon).wrap('<a href="' + link + '"></a>'); var userName = document.createElement('p'); userName.className = 'user-name'; userName.innerHTML = '<a href="' + link + '">' + name + '</a>'; user.appendChild(userName); var userStatus = document.createElement('span'); userStatus.className = 'user-status'; userStatus.innerHTML = '<i class="' + status + '"></i>'; user.appendChild(userStatus); if (info !== undefined) { var userInfo = document.createElement('p'); userInfo.className = 'user-info'; if (info.length >= 50) { userInfo.innerHTML = '<a href="' + link + '" style="color: grey;">' + info.substring(0, 47) + '...</a>'; } else { userInfo.innerHTML = '<a href="' + link + '" style="color: grey;">' + info + '</a>'; } user.appendChild(userInfo); } $('ul').append(user);
}
$(document).ready(function () { users.forEach(function(user) { $.get('https://api.twitch.tv/kraken/channels/' + user, function(callback) { if (callback.error !== "Not Found") { if (callback.logo === null) { callback.logo = 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/300px-No_image_available.svg.png'; } var link = 'https://twitch.tv/' + user; $.get('https://api.twitch.tv/kraken/streams/' + user, function(nextCallback) { if (nextCallback.stream === null) { status = 'fa fa-exclamation'; appendUser(callback.logo, callback.display_name, status, link); } else { status = 'fa fa-twitch'; appendUser(callback.logo, callback.display_name, status, link, callback.status); } }, 'jsonp'); } }, 'jsonp'); }); $('td').on('click', function() { $('td').removeClass('active'); $(this).addClass('active'); var button = $(this).attr('id'); if (button === 'all') { $('li').show(); } else if (button === 'online') { $('.fa-exclamation').parent().parent().hide(); $('.fa-twitch').parent().parent().show(); } else { $('.fa-exclamation').parent().parent().show(); $('.fa-twitch').parent().parent().hide(); } }); $('input').keyup(function() { var searchBar = $(this).val(); $('li').each(function() { var entered = $(this).text().toLowerCase(); if (entered.indexOf(searchBar) >= 0) { $(this).show() } else { $(this).hide(); } }); });
});
Developer | Thomas Vaeth |
Username | thomasvaeth |
Uploaded | September 24, 2022 |
Rating | 3 |
Size | 3,413 Kb |
Views | 40,480 |
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!
Name | Size |
Button Draw on Hover Mixin | 58,405 Kb |
Wired Link Mixin | 2,718 Kb |
Instafetch.js Example | 3,245 Kb |
Grey with Gum Sole | 33,431 Kb |
Button Border Slide Mixin | 2,998 Kb |
Image Loop on Hover | 6,080 Kb |
Personal Portfolio Webpage | 3,671 Kb |
Camper Leaderboard | 3,464 Kb |
Full Viewport Z-Index Scroll | 3,020 Kb |
Random Quote Machine | 5,186 Kb |
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!
Name | Username | Size |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Ocean | Gordonnl | 2,817 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Mini Profile | Frytyler | 3,828 Kb |
Polygon Logo in CSS | Kai | 3,412 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Myprofile | SoufianeAbid | 2,451 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!