API Search App

Developer
Raquel Lorenzana
Size
4,133 Kb
Views
8,096
  1. API Search App Previews
  2. API Search App HTML Codes
  3. API Search App CSS Codes
  4. API Search App JS Codes

How do I make an api search app?

With the use of GitHub's API, created a search app to search through GitHub users, and their followers.. What is a api search app? How do you make a api search app? This script and codes were developed by Raquel Lorenzana on 20 January 2023, Friday.

API Search App Previews
IQ Test

API Search App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>API Search App</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <div class="row align-items-center justify-content-center"> <div class="col header-logo" id="top"> </div> </div> <!-- heading --> <div class="main-heading row align-items-center justify-content-center"> <div class="col align-self-center"> <h4 class="text-center animated fadeInDown">Search</h4> <h1 class="text-center animated fadeInDown">GitHub</h1> <h4 class="text-center animated fadeInDown">Users</h4> </div> </div> <!-- search input --> <div class="row justify-content-center"> <div class="col align-self-center"> <form class="text-center" id="github_search"> <div class="input-group input-group-lg"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <button class="submit-btn btn btn-outline-secondary" type="submit">Search</button> </form> </div> </div> <!-- display results here --> <div class="row"> <div id="results" class="col-sm-12 results"></div> </div> <!-- load more button --> <div class="row align-items-center"> <div class="col text-center align-self-center"> <button type="button" class="load-btn btn btn-secondary">Load More</button> <br> <a class="back-top" id="back_top" href="#top"><p>Back to top</p></a> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

API Search App - Script Codes CSS Codes

h1, h2, h3, h4 { margin: 0; padding: 0;
}
body { background-color: #f7f7f7;
}
.container-fluid { padding-bottom: 40px;
}
.header-logo { height: 64px; background-color: #24292e; background-image: url('../img/gh_icon.png'); background-size: 50px 50px; background-repeat: no-repeat; background-position: 60px;
}
.main-heading { margin: 1% 0 2%;
}
h1, h2, h3, h4 { font-family: Roboto, "Open Sans", Sans-serif;
}
/* Input form*/
.input-group { width: 300px; margin: 0 auto 1%;
}
input::placeholder { color: #d5d5d5; font-family: "Open Sans", Sans-serif;
}
form { margin: 30px;
}
/*GitHub user results*/
.user-col { width: 350px; height: 90px; background-color: #24292e; color: #f0f0f0; margin: 0 auto; border-radius: 5px;
}
.user-text { margin-top: 10px;
}
/*GitHub follower results*/
.follower-row { border-bottom: 1px solid #d5d5d5;
}
.follower-col { margin: 1% auto;
}
.avatar-img { width: 100px; height: 100px; margin: 2% 8% 2% 0%;
}
.avatar-text { color: #b9b9b9; font-family: "Roboto-Mono", "Open Sans", Sans-serif; font-weight: 500; font-size: 130%;
}
.load-btn { margin: 3% auto; display: none;
}
.back-top { font-family: Roboto, "Open Sans", Sans-serif; font-weight: 500; display: none;
}
a:link, a:visited { text-decoration: none; color: #b9b9b9;
}
/*Media Queries*/
@media (min-width: 768px) { .avatar-img { width: 130px; height: 130px; margin-right: 5% }

API Search App - Script Codes JS Codes

$(function () { SearchModule.init();
});
var SearchModule = function () { var $results = $("#results"); var $form = $("#github_search"); var remainderDisplayed; var totalDisplayedFollowers; var totalFollowers; // init function _init() { var $loadButton = $(".load-btn"); var $backTop = $(".back-top") // Retrieve first page of user and followers data $form.submit(function (e) { e.preventDefault(); $results.html(''); var searchText = $(this).find("input[type=text]:first").val(); $.ajax({ type: "GET", url: "https://api.github.com/users/" + searchText, dataType: "json", success: function (userData) { _createUserInfo(userData); $.ajax({ url: "https://api.github.com/users/" + searchText + "/followers", dataType: "json", type: 'GET', success: function (followerData) { _createFollowerResults(followerData); // display 'Load More' button and 'Back to Search' anchor when appropriate // Test with input value: Kira for 0 followers //Jake for 56 followers (2pgs) // Amy for 93 followers (4pgs) // Holman for 5k+ followers (100+pgs) totalFollowers = userData.followers totalDisplayedFollowers = $results.find(".follower-row").length; remainderDisplayed = totalFollowers % totalDisplayedFollowers; if(totalDisplayedFollowers < totalFollowers){ $loadButton.show(); } else if (remainderDisplayed < totalDisplayedFollowers) { $loadButton.hide(); } if(totalDisplayedFollowers){ $backTop.show(); }else{ $backTop.hide(); } // custom tracker start at pg 1 $loadButton.attr('data-page', 1); } }); } }); }); // Retrieve subsequent pages $loadButton.click(function (e) { e.preventDefault(); var searchText = $form.find("input[type=text]:first").val(); var page = parseInt($loadButton.attr('data-page')) + 1; // find remaining displayed on last page to know when button should be hidden // Test same as before var displayedCeil = totalDisplayedFollowers * page; var lastPageTotal = totalDisplayedFollowers - remainderDisplayed; var lastPageTotalDisplayed = displayedCeil - lastPageTotal; if(lastPageTotalDisplayed == totalFollowers){ $loadButton.hide(); } $.ajax({ url: "https://api.github.com/users/" + searchText + "/followers?page= " + page, dataType: "json", type: 'GET', success: function (moreFollowerData) { _createFollowerResults(moreFollowerData); } }); // page tracker $loadButton.attr('data-page', page); }); } // user data html(login and follower count) function _createUserInfo(userData) { var template = '' + '<div class="row">' + ' <div class="col-8 col-sm-6 user-col">' + ' <h2 class="text-center animated pulse user-text">' + userData.name + '</h2>' + ' <h4 class="text-center animated pulse followers-text">' + userData.followers + ' followers</h4>' + ' </div>' + '</div>' + '<br>'; $results.append(template); } // follower data html(avatar and url) function _createFollowerResults(followerData) { var length = followerData.length; var template = '' + '<div class="row follower-row">' + ' <div class="col-10 col-sm-4 follower-col">' + ' <a href="##URL##" target="_blank">' + ' <img class="rounded-circle img-fluid avatar-img" src="##AVATAR##" alt="Avatar Image">' + ' <span class="avatar-text">##LOGIN##</span>' + ' </a>' + ' </div>' + '</div>'; // replace proxies with actual for (i = 0; i < length; i++) { var follower = followerData[i]; var html = template .replace("##URL##", follower.html_url) .replace("##AVATAR##", follower.avatar_url) .replace("##LOGIN##", follower.login); $results.append(html); } } return {init: _init};
}();
API Search App - Script Codes
API Search App - Script Codes
Home Page Home
Developer Raquel Lorenzana
Username raquellorenzana
Uploaded January 20, 2023
Rating 3
Size 4,133 Kb
Views 8,096
Do you need developer help for API Search 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!

Raquel Lorenzana (raquellorenzana) Script Codes
Name
Material Design
HTML and CSS
JS Form
Banner Ad
Input Answer and View Results
A Pen by Raquel Lorenzana
Create amazing blog posts 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!