Script for displaying your repos using github API

Posted by Adarshreddy Adelli

Saturday, June 6, 2020

Recently when I am working with my portfolio, I thought I should display my GitHub repositories right there with some extra information like Licence, repo link, and language used in it. I thought this might help you.

Lets first create an Html container to display our repositories.

<ul class="projects-ul"></ul>

Now let's go with the script

const classes = {
  a: "projects-a",
  li: "projects-li",
  ul: "projects-ul",
  lang: "projects-lang",
  desc: "projects-desc",
  creat:"projects-creat"
};
const username = "adarshreddyash";
const repoXHR = new XMLHttpRequest();
function populate() {
  const repos = JSON.parse(this.response);
  const ul = document.getElementsByClassName(classes.ul)[0];
  for (var i = 0, len = repos.length; i < len; i++) {
    if (!repos[i].fork) {
      const li = document.createElement("li");
      const a = document.createElement("a");
      const p = document.createElement("p");
      const p2 = document.createElement("p");
      const p3=
document.createElement("p");
   
      li.className = classes.li;
   
      a.className = classes.a;
      a.href = repos[i].html_url;
      a.innerText = repos[i].name;
   
      p.className = classes.lang;
      p.innerText = repos[i].language || " ";
   
      p2.className = classes.desc;
      p2.innerText = repos[i].description;
      p3.className=classes.create;
     p3.innerText= repos[i].license && repos[i].license.name;
      ul.appendChild(li)
        .appendChild(a)
        .appendChild(p)
        .appendChild(p2)
        .appendChild(p3);
    }
  }
}
repoXHR.open(
  "GET",
  'https://api.github.com/users/' + username + '/repos?sort=updated',
  true
);
repoXHR.addEventListener("load", populate);
repoXHR.send();

Now change the username with your username. You can also sort using these values

• updated- recently updated comes first.
• created- recently created comes first.
• pushed -sorts on push

Now the beauty part 

body{
  background:#000;
}
.projects-ul {
  margin: 0;
  padding: 0;
}
.projects-li {
  box-sizing: border-box;
  width: 16em;
  height: 13em;
  vertical-align: top;
  display: inline-block;
  list-style: none;
  margin: 1em 0 0 1em;
  padding: 24px;
  background-color: #272830;
box-shadow: 0px 2px 2px rgba(0,0,0,.2), 0px 0px 2px rgba(0,0,0,.2);
  overflow: hidden;
  text-overflow: ellipsis;
}
.projects-li:nth-child(3n-2) {
  margin: 1em 0 0 0;
}
.projects-a {
  height: 11em;
display: block;
  color:  #999;
  text-decoration: none;
  padding: 0 .5em 0 0;
  margin: 0;
  color:#fff;
  font-size: 1.1em;
  font-weight:400;
  font-size:18px;
}
.projects-a:hover {
  color: #4C4690;
}
.projects-lang {
  color: #999;
  font-size: .8em;
  margin: .8em 0 0 0;
}
.projects-desc {
  color: #999;
  text-overflow: inherit;
}
.projects-lang:after {
   font-family: "Font Awesome 5 Brands";
   content: "\f092 \ Github";
   padding-right: 3px;
   padding-top:3px;
   white-space: pre;
}
.projects-lang:before {
   font-family: "Font Awesome 5 Free";
   content: "\f1c9";
   padding-right: 3px;
}

See this in action

See the Pen
Github Api get repos by Adarshreddy adelli (@adarshreddyadelli)
on CodePen.

Adarshreddy Adelli Saturday, June 6, 2020 javascript web development