Github profile search with JavaScript ES6

Today i will create GitHub profile search with es6.I am using MVC approach in this small application.If you see the js files there are three main files one is Index.js which is our controller and second one is Model.js which is our model and third one is View.js which is our View.
1) Index.js is a controller where our Model and View logic combines
2) View.js is wheres is our all view related stuff goes.
3) Model.js is where our all logic goes.
Demo

Index.js (This is controller)
import { elements } from './views/common';
import * as View from './views/View';
import { Github } from './models/Model';
const git = new Github();
elements.search.addEventListener('keyup',(e)=>{
     if(e.target.value !== ''){
           git.getResults(e.target.value)
     .then(result=>{
         if(elements.profile.hasChildNodes){
             View.clearResults();
         }
         View.userData(result);
     })
     .catch(error =>{
         alert(error);
     })
     }
     else{
         View.clearResults();
     }
})
Model.js (This is our model)
import axios from 'axios';
import * as View from '../views/View';
import { elements,renderLoader,clearLoader } from '../views/common';
export class Github {
       async getResults(user){
        const proxy = 'https://cors-anywhere.herokuapp.com/';
        const clientId = '71ab86e9c38a62a60d3c';
        const clientSecret = '5d2ff288ac343da75970a1a4d7bd299f9745968a';
        try{
           View.clearResults()
            renderLoader(elements.profile)
            const result = await axios(`${proxy}https://api.github.com/users/${user}?clientId=${clientId}&clientSecret=${clientSecret}`);
            clearLoader();
         return result;
        }
        catch(error){
            alert(error);
        }
    };
   
}
View.js (This is View)
import { elements } from './common';
export const userData = (userProfile) =>{
    const HTMLmarkup = `<div class="card card-body mb-3">
        <div class="row">
          <div class="col-md-3">
            <img class="img-fluid mb-2" src="${userProfile.data.avatar_url}">
            View Profile
          </div>
          <div class="col-md-9">
            Public Repos: ${userProfile.data.public_repos}
            Public Gists: ${userProfile.data.public_gists}
            Followers: ${userProfile.data.followers}
            Following: ${userProfile.data.following}
            <br><br>
            <ul class="list-group">
              <li class="list-group-item">Company: ${userProfile.data.company}</li>
              <li class="list-group-item">Website/Blog: ${userProfile.data.blog}</li>
              <li class="list-group-item">Location: ${userProfile.data.location}</li>
              <li class="list-group-item">Member Since: ${userProfile.created_at}</li>
            </ul>
          </div>
        </div>
      </div>
    `
    elements.profile.insertAdjacentHTML('beforeend',HTMLmarkup);
}
export const clearResults = () =>{
    elements.profile.innerHTML = '';

}
 common.js (This is common elements or function we are useing in all application)
export const elements = {
    search:document.getElementById('searchUser'),
     profile:document.getElementById('profile'),
};
export const elementString = {
    loader:'loader'
}
export const renderLoader = parent =>{
    const loader = `
        <div class="${elementString.loader}">
           <div></div><div></div>
        </div>
    `;
    parent.insertAdjacentHTML('afterbegin', loader);
}
export const clearLoader = ()=>{
    const loader = document.querySelector(`.${elementString.loader}`);
    if(loader){
        loader.parentElement.removeChild(loader);
    }
}
index.html
<!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/cerulean/bootstrap.min.css">
  <title>Githhub User</title>
  <style>
  .loader {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  left: 40%;
    top: 40%;
}
.loader div {
  position: absolute;
  border: 4px solid #cef;
  opacity: 1;
  border-radius: 50%;
  animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loader div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes loader {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}

</style>
</head>
<body>

  <div class="container searchContainer">
    <div class="search card card-body">
           <input type="text" id="searchUser" class="form-control" placeholder="Search GitHub User">
    </div>
    <br>
    <div id="profile"></div>
  </div>

  
  

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *