Build a Github API Username Code Repositories List Card in Vanilla Javascript Using AJAX Full Project For Beginners

Build a Github API Username Code Repositories List Card in Vanilla Javascript Using AJAX Full Project For Beginners

 

Welcome folks today in this blog post we will be building a github api username code repositories list card in browser using vanilla 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

 

<!DOCTYPE html>
<html>
<body>
  <div class="container">
<div id="list">
    <h3>Gautam Sharma Repos</h3>
    <ul class="noBullet" id="userRepos">
    </ul>
</div>
    </div>
</body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.4/jquery.xdomainrequest.min.js"></script>
</html>

 

 

Now make a style.css file and copy paste the below code

 

style.css

 

@import url('https://fonts.googleapis.com/css?family=Manjari&display=swap');

body{
  background: #77A1D3;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #E684AE, #79CBCA, #77A1D3);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #E684AE, #79CBCA, #77A1D3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-repeat: no-repeat;
  font-family: 'Manjari', sans-serif;
  width: 100%;
  height: 100%;
  color: #252391;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#list{
  display: flex;
  flex-direction: column;
  width: 500px;
  background: #fdffef;
  border-radius: 50px;
  justify-content: center;
  border: solid 5px #F482A3;
}

ul {
  padding-top: 20px;
  width: 80%;
  align-self:center;
  margin:0;
  padding-right: 3rem;
}

li {
  border-bottom: 3px solid #E0BBA2;
}

h3 {
  text-align: center;
}

.noBullet {
  list-style-type: none;
}

 

See also  Avgrund CSS3 and Javascript UI Modal/Popup Window Library With Examples Full Source Code

 

Now make a script.js file and copy paste the below code

 

script.js

 

function requestUserRepos(username){
    const xhr = new XMLHttpRequest();
    const url = `https://api.github.com/users/${username}/repos`;
    xhr.open('GET', url, true);
    xhr.onload = function() {
        const data = JSON.parse(this.response);
        for(let i in data) {
            let ul = document.getElementById('userRepos');
            let li = document.createElement('li');
            li.classList.add('list-group-item');
            li.innerHTML = (`
            <p>Repo: ${data[i].name}</p>
            <p>Description: ${data[i].description}</p>
            <p>URL: <a href="${data[i].html_url}">${data[i].html_url}</a></p>
            `);
            ul.appendChild(li);
        }
    }
    xhr.send();   
}
requestUserRepos('gauti123456');

 

 

Now if you open the index.html file inside the browser you will see the below output

 

 

Leave a Reply