Skip to content

changes #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 21, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# github-api-tutorial
👨‍💻⚡️🛠 A Quick Tutorial on Building a Simple Web App w/ the GitHub API
70 changes: 45 additions & 25 deletions app.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,68 +3,88 @@ const gitHubForm = document.getElementById('gitHubForm');

// Listen for submissions on GitHub username input form
gitHubForm.addEventListener('submit', (e) => {

// Prevent default form submission action
e.preventDefault();

// Get the GitHub username input field on the DOM
let usernameInput = document.getElementById('usernameInput');

// Get the value of the GitHub username input field
let gitHubUsername = usernameInput.value;
let gitHubUsername = usernameInput.value;

// Run GitHub API function, passing in the GitHub username
requestUserRepos(gitHubUsername);

})


function requestUserRepos(username){
function requestUserRepos(username) {

// Create new XMLHttpRequest object
const xhr = new XMLHttpRequest();

// GitHub endpoint, dynamically passing in specified username
const url = `https://api.github.com/users/${username}/repos`;

// Open a new connection, using a GET request via URL endpoint
// Providing 3 arguments (GET/POST, The URL, Async True/False)
xhr.open('GET', url, true);

// When request is received
// Process it here
xhr.onload = function () {
xhr.onload = function() {

// Parse API data into JSON
const data = JSON.parse(this.response);

// Loop over each object in data array
for (let i in data) {

// Get the ul with id of of userRepos
let root = document.getElementById('userRepos');
while (root.firstChild) {
root.removeChild(root.firstChild);
}
if (data.message === "Not Found") {
let ul = document.getElementById('userRepos');

// Create variable that will create li's to be added to ul
let li = document.createElement('li');

// Add Bootstrap list item class to each li
li.classList.add('list-group-item')

// Create the html markup for each li
// Create the html markup for each li
li.innerHTML = (`
<p><strong>No account exists with username:</strong> ${username}</p>`);
// Append each li to the ul
ul.appendChild(li);
} else {

// Get the ul with id of of userRepos
let ul = document.getElementById('userRepos');
let p = document.createElement('p');
p.innerHTML = (`<p><strong>Number of Public Repos:${data.length}</p>`)
ul.appendChild(p);
// Loop over each object in data array
for (let i in data) {
// Create variable that will create li's to be added to ul
let li = document.createElement('li');

// Add Bootstrap list item class to each li
li.classList.add('list-group-item')

// Create the html markup for each li
li.innerHTML = (`
<p><strong>Repo:</strong> ${data[i].name}</p>
<p><strong>Description:</strong> ${data[i].description}</p>
<p><strong>URL:</strong> <a href="${data[i].html_url}">${data[i].html_url}</a></p>
`);

// Append each li to the ul
ul.appendChild(li);

}

// Append each li to the ul
ul.appendChild(li);

}

}
}

// Send the request to the server
xhr.send();

}
Binary file added assets/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 17 additions & 13 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>GitHub API</title>
<meta charset="UTF-8">
<title>GitHub API</title>
<link rel="icon" type="image/png" href="assets/favicon.png">

<!-- Import the Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Import the Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>

<body>

<h3 class="text-center mt-5">GitHub API</h3>
<form id="gitHubForm" class="form-inline mx-auto" style="width: 280px">
<input id="usernameInput" class="form-control mb-5" type="text" name="username" placeholder="GitHub Username">
<input type="submit" class="btn btn-primary ml-2 mb-5" value="Submit">
</form>
<ul id="userRepos" class="list-group mx-auto mb-5" style="width: 500px">
<h3 class="text-center mt-5">GitHub API</h3>
<form id="gitHubForm" class="form-inline mx-auto" style="width: 280px">
<input id="usernameInput" class="form-control mb-5" type="text" name="username" placeholder="GitHub Username">
<input type="submit" class="btn btn-primary ml-2 mb-5" value="Submit">
</form>
<ul id="userRepos" class="list-group mx-auto mb-5" style="width: 500px">

</ul>
<script src="app.js"></script>
</ul>

<script src="app.js"></script>
</body>

</html>