diff --git a/app.js b/app.js new file mode 100644 index 0000000..0994687 --- /dev/null +++ b/app.js @@ -0,0 +1,31 @@ +// Init Github +const github = new Github; +// Init UI +const ui = new UI; + +// Search input +const searchUser = document.getElementById('searchUser'); + +// Search input event listener +searchUser.addEventListener('keyup', (e) => { + // Get input text + const userText = e.target.value; + + if(userText != '') { + // Make HTTP call + github.getUser(userText) + .then(data => { + if(data.profile.message === 'Not Found') { + // Show alert + ui.showAlert('User not found', 'alert alert-danger'); + } else { + // Show profile + ui.showProfile(data.profile); + ui.showRepos(data.repos); + } + }) + } else { + // Clear profile + ui.clearProfile(); + } +}); \ No newline at end of file diff --git a/github.js b/github.js new file mode 100644 index 0000000..e6aadf3 --- /dev/null +++ b/github.js @@ -0,0 +1,22 @@ +class Github { + constructor() { + this.client_id = '8e6fe0bcd1150b14274d'; + this.client_secret = '670646345f9a4f437a323f1b77479670c9f6f050'; + this.repos_count = 5; + this.repos_sort = 'created: asc'; + } + + async getUser(user) { + const profileResponse = await fetch(`https://api.github.com/users/${user}?client_id=${this.client_id}&client_secret=${this.client_secret}`); + + const repoResponse = await fetch(`https://api.github.com/users/${user}/repos?per_page=${this.repos_count}&sort=${this.repos_sort}&client_id=${this.client_id}&client_secret=${this.client_secret}`); + + const profile = await profileResponse.json(); + const repos = await repoResponse.json(); + + return { + profile, + repos + } + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..1874bc3 --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + + GitHub Finder + + + +
+
+

Search GitHub Users

+

Enter a username to fetch a user profile and repos

+ +
+
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/ui.js b/ui.js new file mode 100644 index 0000000..09c74cf --- /dev/null +++ b/ui.js @@ -0,0 +1,96 @@ +class UI { + constructor() { + this.profile = document.getElementById('profile'); + } + + // Display profile in UI + showProfile(user) { + this.profile.innerHTML = ` +
+
+
+ + View Profile +
+
+ Public Repos: ${user.public_repos} + Public Gists: ${user.public_gists} + Followers: ${user.followers} + Following: ${user.following} +

+
    +
  • Company: ${user.company}
    • +
  • Website/Blog: ${user.blog}
    • +
  • Location: ${user.location}
    • +
  • Member Since: ${user.created_at}
    • +
+
+
+
+

Latest Repos

+
+ `; + } + + // Show user repos + showRepos(repos) { + let output = ''; + + repos.forEach(function(repo) { + output += ` +
+
+
+ ${repo.name} +
+
+ Stars: ${repos.stargazers_count} + Watchers: ${repos.watchers_count} + Forks: ${repo.forks_count} +
+
+
+ `; + }); + + // Output repos + document.getElementById('repos').innerHTML = output; + } + + // Show alert message + showAlert(message, className) { + // Clear any remaining alerts + this.clearAlert(); + // Create div + const div = document.createElement('div'); + // Add classes + div.className = className; + // Add text + div.appendChild(document.createTextNode(message)); + // Get parent + const container = document.querySelector('.searchContainer'); + // Get search box + const search = document.querySelector('.search'); + // Insert alert + container.insertBefore(div, search); + + // Timeout after 3 sec + setTimeout(() => { + this.clearAlert(); + }, 3000); + } + + // Clear alert message + clearAlert() { + const currentAlert = document.querySelector('.alert'); + + if(currentAlert) { + currentAlert.remove(); + } + } + + // Clear profile + clearProfile() { + this.profile.innerHTML = ''; + } +} \ No newline at end of file