Now it also shows hireablility and twitter link (if they have one)

githubfinder/ui.js

@@ -1,6 +1,20 @@
 class UI {
   constructor() {
-    this.profile = document.getElementById('profile');
+    this.profile = document.getElementById("profile");
+    this.months = [
+      "Jan",
+      "Feb",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "Sept",
+      "Oct",
+      "Nov",
+      "Dec",
+    ];
   }
 
   // Display profile in UI
@@ -10,20 +24,45 @@ class UI {
         <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>
+            <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-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: <a href="https://${user.blog}" target="_blank">${user.blog}</a></li>
+              <li class="list-group-item">Website/Blog: <a href="https://${
+                user.blog
+              }" target="_blank">${user.blog}</a></li>
               <li class="list-group-item">Location: ${user.location}</li>
-              <li class="list-group-item">Member Since: ${user.created_at}</li>
+              <li class="list-group-item">Member Since: ${
+                this.months[new Date(user.created_at).getMonth()] +
+                "-" +
+                new Date(user.created_at).getDate() +
+                "-" +
+                new Date(user.created_at).getFullYear()
+              }</li>
             </ul>
+            <br>
+            <span class="badge badge-${
+              user.hireable ? "success" : "danger"
+            }">Available for hire : ${user.hireable ? "Yes" : "No"}</span>
+            ${
+              user.twitter_username
+                ? `<span class="badge badge-info"><a href="https://twitter.com/${user.twitter_username}" class="text-white" target="_blank">Follow on Twitter</a></span>`
+                : ""
+            }
           </div>
         </div>
       </div>
@@ -34,9 +73,9 @@ class UI {
 
   // Show user repos
   showRepos(repos) {
-    let output = '';
+    let output = "";
 
-    repos.forEach(function(repo) {
+    repos.forEach(function (repo) {
       output += `
         <div class="card card-body mb-2">
           <div class="row">
@@ -54,23 +93,23 @@ class UI {
     });
 
     // Output repos
-    document.getElementById('repos').innerHTML = output;
+    document.getElementById("repos").innerHTML = output;
   }
 
   // Show alert message
   showAlert(message, className) {
     // Clear any remaining alerts
     this.clearAlert();
     // Create div
-    const div  =  document.createElement('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');
+    const container = document.querySelector(".searchContainer");
     // Get search box
-    const search = document.querySelector('.search');
+    const search = document.querySelector(".search");
     // Insert alert
     container.insertBefore(div, search);
 
@@ -82,15 +121,15 @@ class UI {
 
   // Clear alert message
   clearAlert() {
-    const currentAlert = document.querySelector('.alert');
+    const currentAlert = document.querySelector(".alert");
 
-    if(currentAlert){
+    if (currentAlert) {
       currentAlert.remove();
     }
   }
 
   // Clear profile
   clearProfile() {
-    this.profile.innerHTML = '';
+    this.profile.innerHTML = "";
   }
 }