A Pen by Sky
How do I make an a pen by sky?
What is a a pen by sky? How do you make a a pen by sky? This script and codes were developed by Sky on 29 January 2023, Sunday.
A Pen by Sky - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Sky</title> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://moleliza.gitlab.io/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h2>Star Wars Commander Player Data</h2> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <form action="." id="search-form"> <input type="search" id="search-box" placeholder="Enter a player's name . . ."> </form> </div> </div> <div class="row"> <div id="player-list" class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 text-center"></div> </div> <div class="row text-center prev-next-row"> <a id="previous" class="btn btn-primary hidden"><< prev</a> <a id="next" class="btn btn-primary hidden">next >></a> </div> </div> <script src='https://moleliza.gitlab.io/js/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Sky - Script Codes CSS Codes
body { background-color: #222; color: #eee; font-family: 'Roboto', sans-serif; padding-top: 20px; text-align: center;
}
input[type="search"] { font-size: 16px; color: #222; margin-bottom: 2em; margin-top: 2em; padding: .5em; width: 100%;
}
tbody tr { cursor: pointer;
}
tbody tr:active { background-color: #eee; color: #222;
}
#json-data { text-align: left;
}
.prev-next-row { margin-bottom: 2em;
}
A Pen by Sky - Script Codes JS Codes
"use strict";
$("#search-form").on("submit", function (e) { e.preventDefault(); if (!$("#search-box").val()) return; $("#search-box").blur(); // hides keyboard on mobile getPlayerList();
});
function getPlayerList(page) { var baseURL = "https://cors-anywhere.herokuapp.com/http://sod.lonegunman.ws/search?", params = "q=" + encodeURIComponent($("#search-box").val()) + "&st=commander", url = page ? baseURL + params + "&" + page : baseURL + params; showLoader(); $.ajaxSetup({ timeout: 7000 }); $.getJSON(url, handlePlayerData).fail(showError);
}
function handlePlayerData(playerList) { if (playerList.data.length === 0) { $("#player-list").html("<p>\nNo Results for <em>" + $("#search-box").val() + "</em>.\nTry a shorter search to get a list of matching players, \ne.g. \"Imperial\" instead of \"Imperial'Sniper\"\n</p>"); return; } showSearchResults(playerList);
}
// Convert JSON list of squads into a table
function showSearchResults(playerList) { if (playerList.data.length === 1) { showPlayerData(playerList.data[0]); return; } $("#player-list").html("<table class=\"table table-bordered\" id=\"results-table\">\n<thead>\n<tr>\n<th>HQ Level</th>\n<th>Name</th>\n<th>Squad</th>\n<th>Faction</th>\n</tr>\n</thead>\n<tbody></tbody>\n</table>"); // the squad ID is needed to call the API and get details for a selected squad playerList.data.forEach(function (player) { $("#results-table tbody").append("<tr data-squadId=\"" + player.squad.id + "\" data-playerId=\"" + player.playerId + "\">\n<td>" + player.hqLevel + "</td>\n<td>" + decodeURIComponent(player.name) + "</td>\n<td>" + decodeURIComponent(player.squad.name) + "</td>\n<td>" + player.faction + "</td>\n</tr>"); }); // select a row to get a list of squad members $("tbody tr").on("click", function (e) { return showPlayerData(playerList.data[$(e.currentTarget).index()]); }); // add previous/next buttons if we have more than 20 results if (playerList.next_page_url || playerList.prev_page_url) getMoreResults(playerList);
}
function showPlayerData(data) { showLoader(); $("#player-list").html("<pre id=\"json-data\">" + JSON.stringify(data, null, 2) + "</pre>");
}
// previous/next buttons when there are more than 20 squads shown in a search result
function getMoreResults(data) { if (data.next_page_url) { $("#next").removeClass("hidden").unbind("click").on("click", function () { return getPlayerList(data.next_page_url.split("?")[1]); }); } else { $("#next").addClass("hidden"); } if (data.prev_page_url) { $("#previous").removeClass("hidden").unbind("click").on("click", function () { return getPlayerList(data.prev_page_url.split("?")[1]); }); } else { $("#previous").addClass("hidden"); }
}
// show loading text while retrieving data
function showLoader() { $("#next, #previous").addClass("hidden"); $("#player-list").append("<p>Loading ... </p>");
}
function showError(err) { $("#next, #previous").addClass("hidden"); $("#player-list").html("<pre class=\"text-left\">" + JSON.stringify(err, null, 2) + "</pre>");
}
Developer | Sky |
Username | skycoder |
Uploaded | January 29, 2023 |
Rating | 3 |
Size | 4,531 Kb |
Views | 2,024 |
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 |
Portfolio - Work In Progress | 4,572 Kb |
FCC Leaderboard - vanilla JS | 2,546 Kb |
Media Queries | 2,045 Kb |
JSONP Examples with the Dark Sky API | 5,884 Kb |
Show the Local Weather - and a local background image | 8,205 Kb |
Dark Sky - Simple 5-day Forecast | 4,941 Kb |
Search box that submits when you hit Enter | 2,459 Kb |
Vanilla JS Forismatic Example | 2,284 Kb |
Bootstrap 3 Grid Example | 2,111 Kb |
Calculator | 4,133 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 |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Easing | GreenSock | 2,043 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Fluid Grid 12 | Alexoliverwd | 2,309 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!