A Pen by Sky

Developer
Sky
Size
4,531 Kb
Views
2,024
  1. A Pen by Sky Previews
  2. A Pen by Sky HTML Codes
  3. A Pen by Sky CSS Codes
  4. A Pen by Sky JS Codes

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 Previews
IQ Test

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">&lt;&lt; prev</a> <a id="next" class="btn btn-primary hidden">next &gt;&gt;</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>");
}
A Pen by Sky - Script Codes
A Pen by Sky - Script Codes
Home Page Home
Developer Sky
Username skycoder
Uploaded January 29, 2023
Rating 3
Size 4,531 Kb
Views 2,024
Do you need developer help for A Pen by Sky?

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!

Sky (skycoder) Script Codes
Name
FCC Leaderboard - vanilla JS
Bootstrap 3 Grid Example
Portfolio - Work In Progress
Feather Icons
Calculator
Vanilla JS Forismatic Example
Show the Local Weather - and a local background image
Wikipedia Viewer
Use the Twitch.tv JSON API
Media Queries
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!