Twitch Channels
How do I make an twitch channels?
What is a twitch channels? How do you make a twitch channels? This script and codes were developed by Ben on 08 August 2022, Monday.
Twitch Channels - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch Channels</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body class="container-fluid center-block">
<header class="center-block"> <h1>Twitch Channels</h1> <h2>Environmentally Black</h2> </header>
<div id="control">
<div class="btn-group btn-group-lg" data-toggle="buttons"> <label class="btn btn-success active" id="online"> <input type="radio" name="options" autocomplete="off" checked> Online </label> <label class="btn btn-success" id="offline"> <input type="radio" name="options" autocomplete="off"> Offline </label> <label class="btn btn-success" id="search"> <input type="radio" name="options" autocomplete="off"> Search </label> </div> <div id="searchBox" >
<div class="input-group input-group-lg"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn" id="searchSubmit"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> </div>
<main>
</main>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Twitch Channels - Script Codes CSS Codes
body { max-width:1100px; margin: 1em; background-color: black;
}
header { padding: 1em 0px;
}
h1{color:white;}
H2{color:LawnGreen;}
#control {display:block;}
.btn-group { margin: 1em 0;
}
.btn-success { background-color:LawnGreen; color:black;
}
.btn-success:hover, .btn-success:active, .btn-success.active , .btn-success:focus, .btn-success.focus { background-color:#006400!important; color:white
}
input:hover, button:hover, button.hover { background-color:#006400!important; color:white !important;
}
#control {display:block;
min-height:70px;}
#searchBox { margin-left: 2em; display:none; width:30%; float: left;
}
#searchBox input, #searchBox button { background-color:LawnGreen;
}
image {width:100%!important;}
main { color:white; margin: 2em 0 !important; display:block;
}
.row { margin:1.5em 0;
}
a{color:white;}
.btn-group { display:inline;
}
.requestError {color:red;}
.vertical-align { display: flex; align-items: center;
}
.displayName{font-size:1.3em}
.bio {font-size:1.1em}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: white;
}
::-moz-placeholder { /* Firefox 19+ */ color: white;
}
:-ms-input-placeholder { /* IE 10+ */ color: white;
}
:-moz-placeholder { /* Firefox 18- */ color: white;
}
.streamFalse {display:none;}
Twitch Channels - Script Codes JS Codes
debugger
var baseUrl = "https://wind-bow.glitch.me/twitch-api/" // OLD: "https://wind-bow.gomix.me/twitch-api/"
var bUrlStream = baseUrl + `streams/`
var bUrlUsers = baseUrl + `users/`
var channelNames = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"]
var channelsData = channelNames.map(name => { return { name, urlUsers: `${bUrlUsers}${name}`, urlStream: `${bUrlStream}${name}`
}});
var jsonCount=0
function timingChannelUi(){ jsonCount ++ if (jsonCount==2*channelsData.length){ channelsUi() }
}
for (let i in channelsData){ $.getJSON(channelsData[i].urlUsers, function(response){ console.log(`-- JSON Response -- ${channelsData[i].urlUsers} --`) console.log(response) if (response.hasOwnProperty('error')){ channelsData[i].success=false; channelsData[i].error=response.error; channelsData[i].message=response.message; } else { channelsData[i].success=true; channelsData[i].displayName=response.display_name channelsData[i].logoUrl=response.logo if (response.bio==null){ channelsData[i].hasBio=false } else{ channelsData[i].hasBio=true channelsData[i].bio=response.bio } } timingChannelUi() }) $.getJSON(channelsData[i].urlStream, function(response){ console.log(`-- JSON Response -- ${channelsData[i].urlStream} --`) console.log(response) if (response.stream == null){ channelsData[i].hasStream = false } else { channelsData[i].hasStream = true channelsData[i].streamInfo = `Game: ${response.stream.channel.game}\t Status: ${response.stream.channel.game}` console.log(channelsData[i].streamInfo) } console.log(channelsData[i].hasStream) timingChannelUi() })
}
function channelsUi (){ console.log('--- CHANNELS UI ---') var basicUrl= "https://www.twitch.tv/" for (var i in channelsData){ console.log(`--- I=${i}`) var htmlh = "" var classh = "" var info = "" if(channelsData[i].success){ var url = basicUrl+channelsData[i].name classh = channelsData[i].hasStream ? "streamTrue" : "streamFalse"; var bio = channelsData[i].hasBio ? channelsData[i].bio : "Sorry, the channel has no bio to share :-)" if (channelsData[i].hasStream){ info= `BIO: \t${bio}\n
STREAM: \t${channelsData[i].streamInfo}` } else {info=bio} htmlh= `<div class="row ${classh}" id="${channelsData[i].name}"><a href="${url}"> <div class="col-md-2 displayName">${channelsData[i].displayName}</div> <div class="col-md-2"><img class="img-responsive" src=${channelsData[i].logoUrl}></div> <div class="col-md-8 bio">${info}</div> </a> </div>` } else { classh= "streamFalse requestError" var imageUrl="http://clipart-library.com/image_gallery/419294.png" info = `There was an error while requesting this channel. Error\n
[ERROR DETAILS -- Error:${channelsData[i].error} -- Message:${channelsData[i].message}]` htmlh= `<div class="row ${classh}"> <div class="col-md-2 displayName">${channelsData[i].name}</div> <div class="col-md-2"><img class="img-responsive" src=${imageUrl}></div> <div class="col-md-8 bio">${info}</div> </div>` } console.log(htmlh) $('main').append(htmlh) }
}
$('#offline').click(function(){ $('.streamFalse').css('display', 'block') $('.streamTrue').css('display', 'none') $('#searchBox').css('display', 'none')
})
$('#online').click(function(){ $('.streamFalse').css('display', 'none') $('.streamTrue').css('display', 'block') $('#searchBox').css('display', 'none')
})
$('#search').click(function(){ $('#searchBox').css('display', 'inline') $('.streamFalse').css('display', 'none') $('.streamTrue').css('display', 'none')
})
$('#searchSubmit').click(function(){ var toSearch = $('.form-control').val() for (var i = 0 ; i<channelNames.length ; i++){ if (channelNames[i].match(toSearch)){ $(`#${channelNames[i]}`).css('display', 'block') } else { $(`#${channelNames[i]}`).css('display', 'none') } }
})
Developer | Ben |
Username | bencarp |
Uploaded | August 08, 2022 |
Rating | 3 |
Size | 3,723 Kb |
Views | 42,504 |
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 |
MakeAPerson | 1,763 Kb |
NoRepeatsPlease | 1,668 Kb |
Test | 1,486 Kb |
SumAllPrimes | 1,518 Kb |
Calc Bootstrap | 1,565 Kb |
Weather App | 2,721 Kb |
TESTS | 1,379 Kb |
Fear Not Letter | 1,492 Kb |
Promodoro | 1,712 Kb |
PairWise | 1,532 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 |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
CSS Grid Test | Ajaykarwal | 2,377 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Minimal Menu | Achudars | 3,430 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 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!