Here is the HTML + the solved function inside:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GitHub Repos</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>
GitHub username:
<input type="text" id="username"/>
<button onclick="loadRepos()">Load Repos</button>
<ul id="repos">
<li>
<a href="{repo.html_url}">
{repo.full_name}
</a>
</li>
</ul>
<script>
function loadRepos() {
$("#repos").empty();
let url = "https://api.github.com/users/" +
$("#username").val() + "/repos";
$.ajax({
url,
success: displayRepos,
error: displayError
});
function displayRepos(respos) {
for (let repo of respos) {
let link = $('<a>').text(repo.full_name);
link.attr('href', repo.html_url);
$("#repos").append($('<li>').append(link));
}
}
function displayError(err) {
$("#repos").append($("<li>Error</li>"));
}
}
</script>
</body>
</html>
Only the function:
function loadRepos() {
$("#repos").empty();
let url = "https://api.github.com/users/" +
$("#username").val() + "/repos";
$.ajax({
url,
success: displayRepos,
error: displayError
});
function displayRepos(respos) {
for (let repo of respos) {
let link = $('<a>').text(repo.full_name);
link.attr('href', repo.html_url);
$("#repos").append($('<li>').append(link));
}
}
function displayError(err) {
$("#repos").append($("<li>Error</li>"));
}
}
Account
