Twitch TV App

Developer
Codoer
Size
3,530 Kb
Views
8,096
  1. Twitch TV App Previews
  2. Twitch TV App HTML Codes
  3. Twitch TV App CSS Codes
  4. Twitch TV App JS Codes

How do I make an twitch tv app?

What is a twitch tv app? How do you make a twitch tv app? This script and codes were developed by Codoer on 07 December 2022, Wednesday.

Twitch TV App Previews
IQ Test

Twitch TV App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch TV App</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <div class="row text-center aligeneral"> <div class="twitch-area"> <h1>Twitch TV</h1> <div id="form-container"> <div class="input-group"> <input class="form-control" type="search" id="twitchSearch" value="" placeholder="Search..."> <span class="input-group-addon" class="form-control-feedback"> <i class="fa fa-search"></i></span> </div> <button type="button" class="btn btn-info" id="all">All</button> <span><button type="button" class="btn btn-success" id="on">Online</button></span> <span><button type="button" class="btn btn-warning" id="off">Offline</button></span> </div> <div id="twitchContent"> <div id='twitchDiv'> </div> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Twitch TV App - Script Codes CSS Codes

input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button;
}
body { background-color: #2b5797; background-size: cover; height: 2000px;
}
h1 { font-size: 60px; font-weight: bold; color: white; margin: 50px 0;
}
#twitchDiv { width: 1150px; /*background-color:lightgreen;*/ margin-top: 40px; margin-left: auto; margin-right: auto; padding-top: 1px; padding-left: 20px; padding-right: 10px; color: black; padding-bottom: 5px; border-radius: 10px; text-align: left;
}
.logo { width: 10%; /*10%*/ border-radius: 80%;
}
.input-group{ width: 250px; margin: 0 auto;
}
#offlogo,
#onlogo,
#closedlogo { width: 10%;
}
input[type=search] { width: 20px; border-radius: 4px; font-size: 20px;
}
.btn { margin-top: 40px;
}
form { width: 17%; margin: auto;
}
.onarea,
.offarea,
.closedarea { background-color: lightgreen; padding: 20px; margin-bottom: 1px; border-radius: 10px;
}
.line { float: right; font-size: 18px;
}
.twitchTitle { font-size: 30px; font-weight: bold; color: darkcrayan; padding-left: 60px;
}
#pclosed { color: red;
}
#pstatus { padding-left: 170px; font-size: 18px; padding-top: -20px;
}
#onp { color: green;
}

Twitch TV App - Script Codes JS Codes

var data = [
]
function filter(search) {	return data.filter(streamer => {	var name = streamer.channel.name	return name.toLowerCase().includes(search.toLowerCase()); })
}
function updateView(stuff) {	var hNodesOff = ""; var hNodesOn = ""; var $twitchDiv = $("#twitchDiv"); for (var i = 0; i < stuff.length; i++) { var streamer = stuff[i]; if (streamer.stream) { var preview = streamer.stream.preview.medium; var status = streamer.stream.channel.status; var onName = streamer.stream.channel.display_name; if (status.length > 32) { status = status.slice(0, 33); status += "..." } hNodesOn = "<div class='onarea'><a href='https://www.twitch.tv/" + streamer[name] + "' target='_blank'><img src='" + preview + "' id='onlogo'><span class='twitchTitle'>" + onName + "</span></a><span class='line' id='onp'>online</span><p id='pstatus'>" + status + "</p></div>"; $twitchDiv.prepend(hNodesOn); } else { hNodesOff = "<div class='offarea'><a href='https://www.twitch.tv/" + streamer.channel.name + "' target='_blank'><img src='" + streamer.channel.logo + "' id='offlogo'><span class='twitchTitle'>" + streamer.channel.display_name + "</span><span class='line' id='poff'>offline</span></div>"; $twitchDiv.append(hNodesOff); } $(".offarea:last").after($(".closedarea")); }
}
function loadTwitch() { var search = $('input').val(); var tCha = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "medrybw", "noobs2ninjas", "food", "brunofin", "comster404"]; var tUrl = "https://api.twitch.tv/kraken/streams/"; var cId = "?client_id=7l3od9sx1rsri9b30l2p9ddxibl0bk0"; var $twitchDiv = $("#twitchDiv"); var hNodesClosed = ""; var closedLogo = "https://www.rulistings.com/Content/PlaceholderIcons/tv_placeholder.png" if (search) { tCha = tCha.filter(streamer => streamer.toLowerCase().includes(search.toLowerCase())); } $.map(tCha, function(val, ind) { $.getJSON(tUrl + val + cId, function(result) { if (result.stream === null) { // result.stream $.getJSON("https://api.twitch.tv/kraken/channels/" + val + cId, function(response) {	var streamer = { stream: null, channel: response } data.push(streamer); updateView([streamer]); }) } else {	var streamer = { stream: result.stream, channel: result.stream.channel} data.push(streamer); updateView([streamer]) } }).fail(function() { hNodesClosed = "<div class='closedarea'><a href='https://www.twitch.tv/" + val + "' target='_blank'><img src='" + closedLogo + "' id='closedlogo'><span class='twitchTitle'>" + val + "</span><span class='line' id='pclosed'>channel closed</span></div>"; $twitchDiv.append(hNodesClosed); }) })
}
loadTwitch();
$("#all").click(function() { $(".onarea").show(); $(".offarea").show(); $(".closedarea").show();
})
$("#on").click(function() { $(".offarea").hide(); $(".onarea").show(); $(".closedarea").hide();
})
$("#off").click(function() { $(".onarea").hide(); $(".offarea").show(); $(".closedarea").show();
})
$("#twitchSearch").on("input", function() { $("#twitchDiv").empty(); var search = $(this).val() updateView(filter(search));
});
Twitch TV App - Script Codes
Twitch TV App - Script Codes
Home Page Home
Developer Codoer
Username c0d0er
Uploaded December 07, 2022
Rating 3
Size 3,530 Kb
Views 8,096
Do you need developer help for Twitch TV App?

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!

Codoer (c0d0er) Script Codes
Name
React Recipe Box
Pomodoro Clock
Game of Life
Jd wiki
Visualize National Contiguity with a Force Directed Graph
Nikola Tesla Tribute Page
Random Quote Machine
Visualize Data with a Scatterplot Graph
React photo carousel
Show the Local Weather
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!