mahmutkaya / hyf-javascript3 Goto Github PK

"use strict";
{
  const apiPath = "https://api.github.com";
  const usersSegment = "/users";
  const hyfSegment = "/hackyourfuture";
  const reposSegment = "/repos";

  function renderPage() {
    const mainContainer = createAndAppend("div", document.body);
    mainContainer.id = "container";

    createAndAppend("footer", document.body);

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

    createAndAppend("h1", header, "Repositories");

    const srcInput = createAndAppend("input", header);

    const searchButton = createAndAppend("button", header, "hyf-repos search");
    const fullListButton = createAndAppend("button", header, "hyf-repos full list");
    const usersReposButton = createAndAppend("button", header, "users repos");

    const reposContainer = createAndAppend("div", mainContainer);
    reposContainer.id = "repos-container";

    const contributorsContainer = createAndAppend("div", mainContainer);
    contributorsContainer.id = "contributors-container";

    const clearContainers = () => {
      reposContainer.innerHTML = "";
      contributorsContainer.innerHTML = "";
    };

    searchButton.addEventListener("click", () => {
      clearContainers();
      const url = apiPath + reposSegment + hyfSegment + "/" + srcInput.value;
      getData("GET", url)
        .then(data => {
          renderHyfRepo(data, reposContainer);
          return getData("GET", data.contributors_url);
        })
        .then(data => renderContributors(data, contributorsContainer))
        .catch(console.error);
    });

    fullListButton.addEventListener("click", () => {
      clearContainers();
      const url = apiPath + usersSegment + hyfSegment + reposSegment;
      getData("GET", url)
        .then(data => renderAllHyfRepos(data, reposContainer))
        .catch(console.error);
    });

    usersReposButton.addEventListener("click", () => {
      clearContainers();
      const url = apiPath + usersSegment + "/" + srcInput.value + reposSegment;
      getData("GET", url)
        .then(data => renderUserRepos(data, reposContainer))
        .catch(console.error);
    });
  }

  function renderContributors(data, container) {
    let htmlString = "";
    htmlString = "<h4> contributors: </h4>";
    for (const item of data) {
      htmlString +=
        "<div class='div4'>" +
        "<p>" +
        "<em>" +
        item.login +
        "</em>" +
        "</p>" +
        "</div>";
    }
    container.insertAdjacentHTML("beforeEnd", htmlString);
  }

  function renderHyfRepo(data, container) {
    const htmlString =
      "<div class='repo'>" +
      "<li><a target='_blank' href=" +
      data.html_url +
      ">" +
      data.name +
      "</a></li>" +
      "<p>" +
      " created date: " +
      data.created_at +
      "</p>" +
      "<p>" +
      " fork: " +
      data.forks +
      " star: " +
      data.stargazers_count +
      " watch: " +
      data.watchers +
      "</p>" +
      "<h3>" +
      " Description: " +
      data.description +
      "</h3>" +
      "</div>";
    container.insertAdjacentHTML("beforeEnd", htmlString);
  }

  function renderAllHyfRepos(data, container) {
    let htmlString = "";
    for (const item of data) {
      htmlString +=
        "<div class='repo'>" +
        "<li><a target='_blank' href=" +
        item.html_url +
        ">" +
        item.name +
        "</a></li>" +
        "<p>" +
        " created date: " +
        item.created_at +
        "</p>" +
        "<p>" +
        " fork: " +
        item.forks +
        " star: " +
        item.stargazers_count +
        " watch: " +
        item.watchers +
        "</p>" +
        "<h3>" +
        " Description: " +
        item.description +
        "</h3>" +
        "</div>";
    }
    container.insertAdjacentHTML("beforeEnd", htmlString);
  }

  function renderUserRepos(data, container) {
    let htmlString =
      "<div class='imgDiv'>" +
      "<img src='" +
      data[0].owner.avatar_url +
      "'>" +
      "<br>" +
      "<h3>" +
      data[0].owner.login +
      " repositories: " +
      "</h3>" +
      "</div>";
    for (const item of data) {
      htmlString +=
        "<div class='repo'>" +
        "<li><a target='_blank' href=" +
        item.html_url +
        ">" +
        item.name +
        "</a></li>" +
        "<p>" +
        " created date: " +
        item.created_at +
        "</p>" +
        "<p>" +
        " fork: " +
        item.forks +
        " star: " +
        item.stargazers_count +
        " watch: " +
        item.watchers +
        "<p>" +
        "<h3>" +
        " Description: " +
        item.description +
        "</h3>" +
        "</div>";
    }
    container.insertAdjacentHTML("beforeEnd", htmlString);
  }

  function getData(method, url) {
    return new Promise(function (resolve, reject) {
      const xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.onload = () => {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(JSON.parse(xhr.response));
        } else {
          reject(new Error(xhr.statusText));
        }
      };
      xhr.onerror = () => reject(new Error(xhr.statusText));
      xhr.send();
    });
  }

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

  renderPage();
}