My Repos

List of My Repos from GitHub

by Donal Devine

HTML

<div class="github-projects-title">

</div>
<div class="github-projects">

</div>

JavaScript

var githubProjects = document.querySelector('.github-projects');
  if (typeof(githubProjects) != 'undefined' && githubProjects != null) {
    populateGithubProjects();
  }

  function populateGithubProjects() {
    const root = 'https://api.github.com';

    fetch(root + '/users/donaldevine/repos')
      .then(getRepos)
      .then(renderRepos)
      .then(renderMetaData)
      .then(getLanguageStats);

    function getRepos(response) {
      return response.json().then((json) => {
        var repos = formatRepos(json);
        return repos;
      })
    }

    function renderRepos(repos) {
      for (var i = 0; i < repos.length; ++i) {
        var element = document.createElement('li');
        element.innerHTML = '<div class="project"><h3 class="title"><span>' + repos[i].name +
          '</span></h4><div class="url"><a id ="git-link" href="' + repos[i].url + '">Repository Link</a></div><div class="description">' + repos[i].description + '</div><div class="language">' + repos[i].language + '</div></div></div>';
        githubProjects.appendChild(element);
      }
      return repos;
    }

    function renderMetaData(repos) {
      var githubProjectsTitle = document.querySelector('.github-projects-title');
      githubProjectsTitle.innerHTML = githubProjectsTitle.innerHTML + ' - ' + repos.length + ' projects';
      return repos;
    }

    function getLanguageStats(repos) {
      var languages = Object.keys(repos).map(a => repos[a].language)
      var languageOccurances = new Map([...new Set(languages)].map(
        x => [x, languages.filter(y => y === x).length]
      ));

      console.log(languageOccurances)

      return repos;
    }

    function formatRepos(json) {
      return json.map(repo => {
        return {
          id: repo.id,
          created_date: repo.created_at,
          url: repo.html_url,
          description: repo.description || 'No description available',
          name: repo.name,
          stars: repo.stargazers_count,
         ...