Daria Halchenko õpimapp I portfoolio

en_USet

Harjutus 7: GitHub API päring

Ülesande eesmärk: Õppida saama ja kuvama kasutaja andmeid GitHubi avatud API-st, omandada põhioskused asünkroonsete päringute (fetch) ja veebilehe sisu dünaamilise uuendamise kohta saadud andmete põhjal.

Tulemuseks on lihtne veebileht, mis võimaldab sisestada GitHubi kasutajanime, saata päringu API-le, saada profiili teavet (nimi, ID, repositooriumide arv, link profiilile) ja kuvada seda lehel.

  1. Ava veebilehitsejas Code Sandbox sait
  2. Vali kollase taustaga JavaScript

index.mjs

import "./styles.css";

let givenProfile = "";
let profileName = "";
let profileID = "";
let profileLink = "";
let profileRepos = "";

// Funktsionloob ja uuenda veebilehe sissu
function renderPage() {
  document.getElementById("app").innerHTML = `
      <div>
        <h1>Github konto vaade</h1>
        <p>Palun sisesta konto nimi</p>
        <input placeholder="Sisesta GitHub kasutajanimi" value="${givenProfile}" />
        <div class="content">
          <h1 id="nimi">Nimi: ${profileName ? profileName : "-"}</h1>
          <p id="profileid">ID: ${profileID ? profileID : "-"}</p>
          <p id="profilerepos">Repos: ${profileRepos ? profileRepos : "-"}</p>
          <p id="profileurl">Link: ${
            profileLink && profileName
              ? `<a href="${profileLink}" target="_blank">${profileLink}</a>`
              : "-"
          }</p>
        </div>
      </div>
    `;
  const input = document.querySelector("input");
  input.addEventListener("change", updateValue);
}

// Jalgib sisestus valju muudutusi
function updateValue(e) {
  givenProfile = e.target.value;
  fetchProfile();
}

// Teostab API päringud ja töödeldab vastused
async function fetchProfile() {
  if (!givenProfile) {
    profileName = "";
    profileID = "";
    profileLink = "";
    profileRepos = "";
    renderPage();
    return;
  }
  try {
    const response = await fetch(
      `https://api.github.com/users/${givenProfile}`
    );
    const rateLimitRemaining = response.headers.get("X-RateLimit-Remaining");

    if (!response.ok) {
      profileName = "User not found";
      profileID = "-";
      profileLink = "";
      profileRepos = "-";
    } else {
      const data = await response.json();
      profileName = data.login || "-";
      profileID = data.id || "-";
      profileLink = data.html_url || "-";
      profileRepos = data.public_repos || "-";
    }
    if (rateLimitRemaining === "0") {
      profileName = "API rate limit reached. Try again later.";
      profileID = "-";
      profileLink = "";
      profileRepos = "-";
    }
    renderPage();
  } catch (e) {
    console.log(e);
    profileName = "Error";
    profileID = "-";
    profileLink = "";
    profileRepos = "-";
    renderPage();
  }
}
renderPage();

styles.css

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f8fa;
  color: #24292e;
  margin: 0;
  padding: 20px;
}

#app {
  max-width: 500px;
  margin: 40px auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 30px 40px;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #0366d6;
}

p {
  font-size: 1rem;
  margin-bottom: 20px;
}

input {
  width: 100%;
  padding: 12px 15px;
  font-size: 1rem;
  border: 1.5px solid #d1d5da;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

input:focus {
  border-color: #0366d6;
  box-shadow: 0 0 5px rgba(3, 102, 214, 0.5);
}

.content {
  margin-top: 25px;
  background-color: #f6f8fa;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #e1e4e8;
}

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

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

#profileurl a:hover {
  text-decoration: underline;
}

3. Salvesta ja uuenda leht.

Kokkuvõte:

  • renderPage() – loob ja uuendab veebilehe sisu
  • updateValue() – jälgib sisestusvälja muutusi
  • fetchProfile() – teostab API päringud ja töödeldab vastused

On loodud leht mis teeb päringu GitHubi ja näitab valiku infot (nimi, ID, repositooriumide arv, link profiilile).