arasmr / javascript3 Goto Github PK

container.innerHTML = '';

"use strict";
{
  //  API Links to Fetch

  const repLink = "https://api.github.com/repos/HackYourFuture/";
  const userLink = "https://api.github.com/users/";

  // Linked With The Html

  function render() {
    const root = document.getElementById("root");

    const header = createAndAppend("div", root);
    header.setAttribute("id", "header");

    const container = createAndAppend("div", root);
    container.setAttribute("id", "container");

    const gitLogo = createAndAppend("img", header);
    gitLogo.setAttribute("src", "images/github.png");
    gitLogo.setAttribute("class", "logo");

    const hyfLogo = createAndAppend("img", header);
    hyfLogo.setAttribute("src", "images/logo.png");
    hyfLogo.setAttribute("class", "logo");

    const input = createAndAppend("input", header);
    input.setAttribute("placeholder", "Type User Name or Repository Name");
    input.setAttribute("type", "text");

    const button = createAndAppend("button", header, "Search Hack Your Future Repository");
    button.addEventListener("click", () => repositoryClick(container, input));

    const button1 = createAndAppend("button", header, "Search User Repositories");
    button1.addEventListener("click", () => userClick(container, input));
  }

  // Render Repository Button Click

  function repositoryClick(container, input) {
    container.innerHTML = '';
    const repUrl = repLink + input.value;
    getJson(repUrl)
      .then(repoData => {
        renderRepoData(repoData, container);
        return getJson(repoData.contributors_url);
      })
      .then(contributors => {
        renderContributors(contributors, container);
      })
      .catch(error => console.error(error.message));
  }

  function renderRepoData(repoData, container) {
    const repositoryName = createAndAppend("h1", container, repoData.full_name);
    repositoryName.setAttribute("id", "repositoryName");

    const repositoryUrl = createAndAppend("a", container, "Link Of Repository: " + repoData.html_url);
    repositoryUrl.setAttribute("id", "repositoryUrl");
    repositoryUrl.setAttribute("href", repoData.html_url);
    repositoryUrl.setAttribute("target", "_blank");

    const contributor = createAndAppend("h2", container, "Contributors");
    contributor.setAttribute("id", "contributors");
  }

  function renderContributors(contributors, container) {
    const contributorsList = createAndAppend("ul", container);
    contributorsList.setAttribute("id", "contributorListLi");

    for (const contributor of contributors) {
      const li = createAndAppend("li", contributorsList);

      const a = createAndAppend("a", li, "<hr>" + "User Name: " + contributor.login + "<br><br>");
      a.setAttribute("href", contributor.html_url);
      a.setAttribute("target", "_blank");
      a.setAttribute("id", "userLoginLink");

      const userAvatar = createAndAppend("img", li);
      userAvatar.setAttribute("src", contributor.avatar_url + "<hr>");
      userAvatar.setAttribute("id", "userAvatar");
    }
  }

  function userClick(container, input) {
    container.innerHTML = '';
    const userUrl = userLink + input.value + "/repos";
    getJson(userUrl)
      .then(userData => {
        renderUserData(userData, container);
      })
      .catch(error => console.error(error.message));
  }

  function renderUserData(userData, container) {
    const userLogo = createAndAppend("img", container);
    userLogo.setAttribute("src", userData[0].owner.avatar_url);
    userLogo.setAttribute("id", "userLogo");

    const userName = createAndAppend("h2", container, userData[0].owner.login);
    userName.setAttribute("id", "userName");

    for (const userItem of userData) {
      const reposName = createAndAppend("h2", container, userItem.name);
      reposName.setAttribute("id", "reposName");

      const reposLink = createAndAppend("a", container, userItem.html_url);
      reposLink.setAttribute("href", userItem.html_url);
      reposLink.setAttribute("target", "_blank");
      reposLink.setAttribute("id", "reposLink");
    }
  }

  // XMLHttpRequest to Fetch Json File

  function getJson(url) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.responseType = "json";
      xhr.send();
      xhr.onload = () => resolve(xhr.response);
      xhr.onerror = () => reject(new Error(xhr.statusText));
    });
  }

  // Create and Append Function for DRY(do not repeat yourself)

  function createAndAppend(name, append, innerHTML) {
    const child = document.createElement(name);
    append.appendChild(child);
    if (innerHTML !== undefined) {
      child.innerHTML = innerHTML;
    }
    return child;
  }

  render();
}