Get Top Games

Developer
Adrijana
Size
4,064 Kb
Views
10,120
  1. Get Top Games Previews
  2. Get Top Games HTML Codes
  3. Get Top Games CSS Codes
  4. Get Top Games JS Codes

How do I make an get top games?

What is a get top games? How do you make a get top games? This script and codes were developed by Adrijana on 28 November 2022, Monday.

Get Top Games Previews
IQ Test

Get Top Games - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Get Top Games</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='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="block1"> <div id="page-header-section" class="text-center"> <h1>Top Games on <img class="logo" src="http://vignette2.wikia.nocookie.net/logopedia/images/d/d4/Twitch_Logo.png/revision/latest/scale-to-width-down/320?cb=20140122232632"></h1> <section id="get-games" class="row"> <div role="search" class="input-group input-group-lg col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4"> <span class="input-group-addon glyphicon glyphicon-search" id="sizing-addon1"></span> <input id="search-game" type="text" class="form-control" placeholder="Search for a game" aria-label="Search for a game" aria-describedby="sizing-addon1" autocomplete="off"> </div> </section> </div> <!-- page header section --> <button type="button" class="clshlpbtn btn btn-primary btn-block">List of Top Games</button>
</div> <!-- BLOCK 1 -->
<div class="block2"> <div class="container"> <div id="input"> <!-- add games --> </div> <div class="row"> <!-- go to top of the page --> <div class="text-center"> <div class="col-xs-12 col-sm-10"> <a id="games-top" href="#page-header-section"> <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span> <br> Back to top </a> </div> </div> </div> </div> <!-- container -->
</div> <!-- BLOCK 2 --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.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>

Get Top Games - Script Codes CSS Codes

body { background: #6441A4; font-family: 'Lato', sans-serif; color: #000;
}
h1{ font-weight: 900; padding: 10px;
}
a{ font-size: 25px; padding: 2px; color: #000; font-weight: 700; margin-left: -50px;
}
a:hover{ color: #e5e5e5; text-decoration: none;
}
.logo{ width:130px; height: auto; padding-bottom: 10px;
}
.block1{ margin-left: auto; margin-right: auto; background-color: #f1f1f1; box-shadow: 0 3px 6px rgba(0,0,0,0.16); max-width: 50%; color: #262626; padding: 10px; /*margin-left: auto; margin-right: auto; width: 50%; height: 100%; border: 1px solid #d3d3d3; padding: 10px;*/
}
.block2{ margin-left: auto; margin-right: auto; background-color: rgba(299, 299, 299, .5); border:none; box-shadow: inset 0px 3px 5px 1px #7a7a7a; outline:none; /*box-shadow: 0 3px 6px rgba(0,0,0,0.16);*/ max-width: 50%; color: #262626; padding: 20px 50px;
}
.input-group{ margin: 0 1.75%; width: 96.5%;
}
.input-group a{ font-size: 15px; margin: 0; padding: 0;
}
.btn{ background: #cccccc; background-image: linear-gradient(to bottom, #e5e5e5, #ccc); border-radius: 0px; text-shadow: 1px 1px 1px #ffffff; font-family: Arial; font-size: 18px; font-weight: bold; color: #333333; padding: 10px 90px 10px 90px; border: solid 1px; border-top-color: #e0e0e0; border-bottom-color: #e5e5e5; border-left-color: transparent; border-right-color: transparent; text-decoration: none;
}
.btn:hover { background: #999999; background-image: linear-gradient(to bottom, #ccc, #e5e5e5); text-decoration: none; border-color: transparent;
}
.top-games{ padding: 10px;
}
#input{ padding: 10px;
}
.row{ padding-bottom: 10px;
}
#games-top{ font-weight: lighter; font-size: 20px; color: #e0e0e0; padding: 0; margin:0;
}
.glyphicon{ padding: 0; margin:0; border-top-color: #e0e0e0;
}

Get Top Games - Script Codes JS Codes

var clientID = "60m9tc7kdl1n223n7ddlpzzipc5h6u8";
function getGames() { // cleaning results from previous streams list but leaving template $(".stream:not(.template):not(#off-stream)").remove(); $.ajax({ crossDomain: true, dataType: "json", url: "https://api.twitch.tv/kraken/games/top?limit=10&offset=10", success: function (data) { $("#input").empty(); if (data.streams.length == 0) { $(".game-off").html(game); $("#off-stream").removeClass("hidden"); } else { $("#off-stream").addClass("hidden"); for(var i=0; i<data.top.length; i++){ $("#input").append("<div class='row games'>" + "<div class='col-md-4'>" + "<img src='" + data.top[i].game.box.medium + "'>" + "</div>" + "<div class='col-md-6'><a href='' id='" + data.top[i].game.name + "' class='streams'><h3>" + data.top[i].game.name + "<br>" + data.top[i].viewers + " &nbsp;people watching now</a></h3></div></div>"); }	} } });
}
function getStreams (game) { // cleaning results from previous streams list but leaving template $(".stream:not(.template):not(#off-stream)").remove(); $.ajax({ crossDomain: true, dataType: "json", url: "https://api.twitch.tv/kraken/streams?client_id=" + clientID + "&game=" + encodeURI(game) + "&callback=?", success: function (result) { // when nobody plays the game right now $("#input").empty(); if (result.streams.length == 0) { $(".game-off").html(game); $("#off-stream").removeClass("hidden"); } else { $("#off-stream").addClass("hidden"); for (var i=0; i<result.streams.length; i++) { var stream = result.streams[i]; //when a user is streaming $("#input").append("<div class='row games' id='stream-" + stream._id + "'>" + "<div class='col-md-4'>" + "<a href='" + stream.channel.url + "' target='_blank'><img src='" + stream.preview.medium + "'></a>" + "</div>" + "<div class='col-md-6'><h3><a href='" + stream.channel.url + "' target='_blank'>" + stream.channel.display_name + "<br>" + stream.viewers + " people watching now</a></h3></div></div>"); } } }, headers: { "Client-ID": clientID } });
}
$(document).ready(function(){ $.ajax({ type:"GET", url: "https://api.twitch.tv/kraken/games/top", headers: { 'Client-ID': clientID }, success: function(data){ for(var i=0; i<data.top.length; i++){ $("#input").append("<div class='row games'>" + "<div class='col-md-4'>" + "<img src='" + data.top[i].game.box.medium + "'>" + "</div>" + "<div class='col-md-6'><a href='' id='" + data.top[i].game.name + "' class='streams'><h3>" + data.top[i].game.name + "<br>" + data.top[i].viewers + " &nbsp;people watching now</a></h3></div></div>"); } } }); $("#search-game").typeahead({ // start suggesting after the 3rd character provided by a user minLength: 3, // getting the list of suggestions for a query a user provides source: function(query, process) { $.getJSON("https://api.twitch.tv/kraken/search/games?client_id=" + '60m9tc7kdl1n223n7ddlpzzipc5h6u8' + "&q=" + query + "&type=suggest&live=true", function (result){ // preparing game names to feed typeahead var gameNames = []; for (var i=0; i<result.games.length; i++) { gameNames.push(result.games[i].name); } // up to this moment there are all names gathered return process(gameNames); }); }, afterSelect: function(selectedItem) { getStreams(selectedItem); // cleaning search $("#search-game").val(""); } }); $(".clshlpbtn").on('click',function(){ //go back to the top game list getGames(); });
});
Get Top Games - Script Codes
Get Top Games - Script Codes
Home Page Home
Developer Adrijana
Username Skybutterfly
Uploaded November 28, 2022
Rating 3
Size 4,064 Kb
Views 10,120
Do you need developer help for Get Top Games?

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!

Adrijana (Skybutterfly) Script Codes
Name
Test123
A Pen by Adrijana
APortfolio
NT Tribute
TestTest
Create amazing web content 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!