Twitch Exercise

Developer
Nathaniel Horwitz-Willis
Size
3,006 Kb
Views
8,096
  1. Twitch Exercise Previews
  2. Twitch Exercise HTML Codes
  3. Twitch Exercise CSS Codes
  4. Twitch Exercise JS Codes

How do I make an twitch exercise?

What is a twitch exercise? How do you make a twitch exercise? This script and codes were developed by Nathaniel Horwitz-Willis on 06 December 2022, Tuesday.

Twitch Exercise Previews
IQ Test

Twitch Exercise - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twitch Exercise</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--link to fa-->
<link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<!--Heading at top of page-->
<!--center everything-->
<h1>Who's watching on Twitch</h1>
<div id="twitchUserInfo"><button class="btn btn-block"> <!--column for icon--> <div class="row"> <div class="col-xs-1"> </div> <!--col div--> <!--div for list of users-->
<div class = "userInfo"> <div class="col-xs-4" id="userName">Name </div> <!--col div--> <!--column for on/offline--> <!--status div--> <div class="col-xs-6" id="status">Watching </div></button> <!-- col div--> </div> <!--row div--> <!--twitchUserInfo id end-->
</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Twitch Exercise - Script Codes CSS Codes

body { background-color: #ad2222;
}
h1 { text-align: center; color: #eddede; padding-top: 40px; padding-bottom: 40px;
}
.userInfo { text-align: left;
}
.logo { width: 60px; heighth: 30px; float: left; position: relative;
}

Twitch Exercise - Script Codes JS Codes

var twitchUsers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404", "MedryBW"];
//page loads first and then js starts
$(document).ready(function() { //loop through length of array twitchUsers.forEach(function(twitchUsers) { //create var to clone twitchUserInfo element var userRow = $("#twitchUserInfo").clone(); //use attr() method to return userRow to initial value userRow.attr("id", twitchUsers); //change id "userName" to current user's name userRow.find("#userName").text(twitchUsers + ": "); //create var of API url for streams and users var apiUrl = "https://wind-bow.gomix.me/twitch-api/streams/" + twitchUsers + "?callback=?"; var apiUrlUsers = "https://wind-bow.gomix.me/twitch-api/users/" + twitchUsers + "?callback=?"; //api streams call $.getJSON(apiUrlUsers, function(data) { //add hyperlink to user var userLink = "https://www.twitch.tv/"; userRow.find("#userName").wrap("<a href='" + userLink + twitchUsers + "' target =_blank'></a>"); if (data.hasOwnProperty("logo")) { var userIcon = "<img src = '" + data.logo + "' " + "class='logo' alt='icon'>"; userRow.find("#userName").append(userIcon); } }); $.getJSON(apiUrl, function(data) { if (data.stream !== null) { var gameInfo = data.stream.game + ": " + data.stream.channel.status; //add to cloned row userRow.find("#status").html(gameInfo); $("body").append(userRow); } else if (data.stream === null) { $.getJSON(apiUrlUsers, function(data) { //if have error property if (data.hasOwnProperty("error")) { //==no user account userRow.find("#status").text("Sorry, this user does not have an account"); userRow.find("#userName").append("<img src='http://media.istockphoto.com/vectors/warning-sign-vector-vector-id492360514?s=235x235' alt = 'warning triangle' class = 'logo'>"); } else { userRow.find("#status").html("Offline"); } }); //add all information to body element $("body").append(userRow); } }); //console.log(data); // }); //end of console.log }); //end of if hasOwnProperty
}); //end of JSON function(data)
//}); //end of document.ready
//for.each$("#twitchUserInfo").clone();
//logo
//display_name
//_link to url for each user
//stream: null is offline
//game + ": "+" " + status
Twitch Exercise - Script Codes
Twitch Exercise - Script Codes
Home Page Home
Developer Nathaniel Horwitz-Willis
Username natewillisii
Uploaded December 06, 2022
Rating 3
Size 3,006 Kb
Views 8,096
Do you need developer help for Twitch Exercise?

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!

Nathaniel Horwitz-Willis (natewillisii) Script Codes
Name
Show the local weather exercise
Wikipedia Viewer Exercise
Random Quote Machine Exercise
Create amazing video scripts 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!