Initial commit

hyltonwalters · Aug 5, 2018 · 0e0b5c7 · 0e0b5c7
1 parent 148a9f3
commit 0e0b5c7
Show file tree

Hide file tree

Showing 4 changed files with 187 additions and 0 deletions.
diff --git a/app.js 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();
+  }
+});
diff --git a/github.js 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
+    }
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://bootswatch.com/4/litera/bootstrap.min.css">
+  <title>GitHub Finder</title>
+</head>
+<body>
+  <nav class="navbar navbar-dark bg-primary mb-3">
+    <div class="container">
+      <a href="#" class="navbar-brand">GitHub Finder</a>
+    </div>
+  </nav>
+  <div class="container searchContainer">
+    <div class="search card card-body">
+      <h1>Search GitHub Users</h1>
+      <p class="lead">Enter a username to fetch a user profile and repos</p>
+      <input type="text" id="searchUser" class="form-control" placeholder="GitHub Username...">
+    </div>
+    <br>
+    <div id="profile"></div>
+  </div>
+
+  <footer class="mt-5 p-3 text-center bg-light">
+    GitHub Finder &copy;
+  </footer>
+
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
+
+  <script src="github.js"></script>
+  <script src="ui.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/ui.js b/ui.js
@@ -0,0 +1,96 @@
+class UI {
+  constructor() {
+    this.profile = document.getElementById('profile');
+  }
+
+  // Display profile in UI
+  showProfile(user) {
+    this.profile.innerHTML = `
+      <div class="card card-body mb-3">
+        <div class="row">
+          <div class="col-md-3">
+            <img class="img-fluid mb-2" src="${user.avatar_url}">
+            <a href="${user.html_url}" target="_blank" class="btn btn-primary btn-block mb-4">View Profile</a>
+          </div>
+          <div class="col-md-9">
+            <span class="badge badge-primary">Public Repos: ${user.public_repos}</span>
+            <span class="badge badge-secondary">Public Gists: ${user.public_gists}</span>
+            <span class="badge badge-success">Followers: ${user.followers}</span>
+            <span class="badge badge-info">Following: ${user.following}</span>
+            <br><br>
+            <ul class="list-group">
+              <li class="list-group-item">Company: ${user.company}</li>
+              <li class="list-group-item">Website/Blog: ${user.blog}</li>
+              <li class="list-group-item">Location: ${user.location}</li>
+              <li class="list-group-item">Member Since: ${user.created_at}</li>
+            </ul>
+          </div>
+        </div>      
+      </div>
+      <h3 class="page-heading mb-3">Latest Repos</h3>
+      <div id="repos"></div>
+    `;
+  }
+
+  // Show user repos
+  showRepos(repos) {
+    let output = '';
+
+    repos.forEach(function(repo) {
+      output += `
+        <div class="card card-body mb-2">
+          <div class="row">
+            <div class="col-md-6">
+              <a href="${repo.html_url}" target="_blank">${repo.name}</a>
+            </div>
+            <div class="col-md-6">
+            <span class="badge badge-primary">Stars: ${repos.stargazers_count}</span>
+            <span class="badge badge-secondary">Watchers: ${repos.watchers_count}</span>
+            <span class="badge badge-success">Forks: ${repo.forks_count}</span>
+            </div>
+          </div>
+        </div>
+      `;
+    });
+
+    // 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 = '';
+  }
+}