Vladislav Kudriašev Portfoolio

en_US
Noorem Tarkvaraarendaja eriala

H7: GitHub API päring

See juhend selgitab, kuidas luua lihtne veebirakendus, mis kasutab JavaScripti Fetch API-d GitHubi avaliku API kaudu kasutajaprofiili andmete hankimiseks ja kuvamiseks. Rakendus võimaldab kasutajal sisestada GitHubi kasutajanime ning pärib seejärel selle kasutaja avalikke andmeid, nagu nimi, ID, avalike repode arv ja profiililink. Andmete hankimine on asünkroonne ja sisaldab minu poolt lisatud veatöötlust, mis kuvab vastavad teated, kui kasutaja ei ole identifitseeritud või API päring ebaõnnestub.

HTML:

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="app"></div>

    <script src="./index.js" type="module"></script>
  </body>
</html>

CSS:

CSS
body {
  font-family: Arial, Helvetica, sans-serif, sans-serif;
  background: #f0f2f5;
  margin: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
}

#app > div {
  background: white;
  padding: 25px 30px;
  border-radius: 10px;
  width: 350px;
}

img {
  width: 100%;
}

h1 {
  margin-top: 0;
  color: #24292e;
}

p {
  font-size: 14px;
  color: #555;
}

input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid gray;
  margin-bottom: 20px;
  box-sizing: border-box;
  outline-color: #4f81bb;
}

input:focus {
  border-color: #0366d6;
}

.content p,
.content h1 {
  margin: 8px 0;
}

a {
  color: #0366d6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

JavaScript:

JavaScript
let givenProfile = "";
let profileName = "";
let profileAvatar = "";
let profileId = "";
let profileLink = "";
let profileRepos = "";

function renderPage() {
  document.getElementById("app").innerHTML = `
    <div>
      <h1>Github profile viewer</h1>
      <p>Please enter profile name:</p>
      <input />
      <div class="content">
        <h1 id="name">Name: ${profileName}</h1>
        <img src=${profileAvatar}/>
        <p id="id">Id: ${profileId}</p>
        <p id="repos">Public repos: ${profileRepos}</p>
        <p id="profileurl">Link: <a href="${profileLink}" target="_blank">${profileLink}</a></p>
 
      </div>
    </div>
  `;

  const input = document.querySelector("input");
  input.addEventListener("change", updateValue);
}

renderPage();

function updateValue(e) {
  givenProfile = e.target.value;
  fetchProfile();
}

async function fetchProfile() {
  try {
    const reqHeaders = new Headers();
    reqHeaders.set("Authorization", "URL");
    const options = {
      headers: reqHeaders,
    };
    const response = await fetch(
      `https://api.github.com/users/${givenProfile}`,
      options
    );
    const rateLimitRemaining = response.headers.get("X-RateLimit-Remaining");

    if (!response.ok) {
      profileName = "User not found";
      profileAvatar = "";
      profileId = "";
      profileLink = "";
      profileRepos = "";
    } else {
      const data = await response.json();
      profileName = data.login;
      profileAvatar = data.avatar_url;
      profileId = data.id;
      profileLink = data.html_url;
      profileRepos = data.public_repos;
    }

    if (rateLimitRemaining === "0") {
      profileName = "API rate limit reached. Try again later.";
      profileAvatar = "";
      profileId = "";
      profileLink = "";
      profileRepos = "";
    }
  } catch (error) {
    profileName = "Error fetching data";
    profileAvatar = "";
    profileId = "";
    profileLink = "";
    profileRepos = "";
  }
  renderPage();
}