Vue.js Github API Example to Search Information By Username in Javascript Full Project For Beginners

  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

 

Welcome folks today in this blog post we will be getting github users information using username using github api in javascript. All the full source code of the application is shown below.

 

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<div id="app">
    <div class="search__form">
        <div class="inner text-xs-center"><label>Search by username</label><input type="text" @change="searchGH" v-model="search" /></div>
    </div>
    <div class="result__user">
        <div class="user"><img src="{{ user.avatar_url }}" />
            <h3>{{ user.name }}</h3>
            <h3>{{ user.location }}</h3>
            <h3>{{ user.email }}</h3>
            <h3>{{ user.blog }}</h3>
            <h3>{{ user.bio }}</h3>
            <h3>{{ user.html_url }}</h3>
            <h3>{{ user.public_repos }}</h3>
            <h3>{{ user.followers }}</h3>
            <h3>{{ user.following }}</h3>
            <h3>Join: {{ user.created_at }}</h3>
            <h3>Hireable: {{ user.hireable }}</h3>
        </div>
        <pre><code>{{ user | json }}</code></pre>
    </div>
</div>

 

 

 

style.css

 

 

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
 :root {
     font-size: 16px;
}
 * {
     box-sizing: border-box;
}
 html, body {
     height: 100%;
     margin: 0;
     padding: 0;
}
 #app {
     display: flex;
     width: 100%;
     height: 100%;
     align-items: center;
}
 .search__form, .result__user {
     width: 50%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
}
 .search__form .inner, .result__user .inner {
     width: 20rem;
}
 .search__form {
     background: #f5f5f5;
}
 .user img {
     height: 15rem;
     width: 15rem;
     border-radius: 50%;
}

 

See also  Vue.js Tutorial to Get Query Parameters From URL in Browser Full Project For Beginners

 

 

script.js

 

 

new Vue({
  el: '#app',
  data: {
    user: [],
    search: 'masonfox'
  },
  methods: {
    searchGH: function() {
      var username = this.search.toLowerCase();
      var route = 'https://api.github.com/users/' + username;
      console.log(route);
      // send api request
      this.$http.get(route).then((response) => {
        // success callback
        console.log(response.data);
        this.user = response.data;
      }, (response) => {
        // error callback
      });
    }
  }, 
  ready: function() {
    this.searchGH();
  }
});

Leave a Reply