Harjutus 7: Github API

See juhend näitab, kuidas luua lihtne veebirakendus, mis kasutab JavaScripti Fetch API-d GitHubi avaliku API kaudu kasutajaprofiili andmete hankimiseks ja kuvamiseks. Kasutaja sisestab GitHubi kasutajanime, rakendus pärib avalikud andmed nagu nimi, ID, avalike repode arv ja profiililink. Andmete pärimine on asünkroonne ning sisaldab veatöötlust, mis teavitab kasutajat, kui profiili ei leita või API päring ebaõnnestub.

1)Valmista endale uus JavaScript keskkond Code Sandbox’is või Visual Studio Code’is

1. HTML-i seadistamine:
Loo lihtne HTML-fail, kus on <div id="app"></div> ning JavaScripti fail lingituna.

2. JavaScripti põhistruktuur:
Deklareeri muutujad profiiliandmete hoidmiseks.

3. Lehekülje renderdamine:
Funktsioon renderPage() kuvab sisestusvälja ja profiili info ning lisab sisendile sündmuse kuulaja, mis käivitab andmete uuendamise.

Kood:

import "./styles.css";
let givenProfile = "";
let profileName = "";
let profileId = "";
let profileLink = "";
let profileRepos = "";
let profileFollowers = "";
let profileFollowing = "";

// Lehe joonistamise funktsioon
function renderPage() {
  document.getElementById("app").innerHTML = `
    <div>
      <h1>Github profiili vaataja</h1>
      <p>Palun sisesta profiili nimi: </p>
      <input value="${givenProfile}" placeholder="Sisesta GitHub kasutajanimi" />
      <div class="content">
        <h1 id="name">Nimi: ${profileName ? profileName : "-"}</h1>
        <p id="id">Id: ${profileId ? profileId : "-"}</p>
        <p id="repos">Avalikud repositooriumid: ${profileRepos ? profileRepos : "-"}</p>
        <p id="followers">Jälgijad: ${profileFollowers ? profileFollowers : "-"}</p>
        <p id="following">Jälgitavad: ${profileFollowing ? profileFollowing : "-"}</p>
        <p id="profileurl">Link: ${
          profileLink && profileName
            ? `<a href="${profileLink}" target="_blank">${profileLink}</a>`
            : "-"
        }</p>
      </div>
    </div>
  `;
  // Pärast ümberjoonistamist lisa kindlasti uuesti sündmuse kuulaja input'ile!
  const input = document.querySelector("input");
  input.addEventListener("change", updateValue);
}

// Sisendi töötlemise funktsioon
function updateValue(e) {
  givenProfile = e.target.value;
  fetchProfile();
}

// GitHub profiili päringu funktsioon
async function fetchProfile() {
  if (!givenProfile) {
    profileName = "";
    profileId = "";
    profileLink = "";
    profileRepos = "";
    profileFollowers = "";
    profileFollowing = "";
    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 = "Kasutajat ei leitud";
      profileId = "-";
      profileLink = "";
      profileRepos = "-";
      profileFollowers = "-";
      profileFollowing = "-";
    } else {
      const data = await response.json();
      profileName = data.login || "-";
      profileId = data.id || "-";
      profileLink = data.html_url || "";
      profileRepos = data.public_repos || "-";
      profileFollowers = data.followers || "-";
      profileFollowing = data.following || "-";
    }

    if (rateLimitRemaining === "0") {
      profileName = "API päringu limiit on täis. Proovi hiljem uuesti";
      profileId = "-";
      profileLink = "";
      profileRepos = "-";
    }
    renderPage();
  } catch (e) {
    profileName = "Viga";
    profileId = "-";
    profileLink = "";
    profileRepos = "-";
    profileFollowers = "-";
    profileFollowing = "-";
    renderPage();
  }
}

// Esmane joonistamine
renderPage();

CSS

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #e0e7ff, #ffffff);
  margin: 0;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#app > div {
  background: #ffffff;
  padding: 30px 40px;
  border-radius: 15px;
  width: 360px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

#app > div:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

h1 {
  margin-top: 0;
  color: #1e293b;
  font-weight: 700;
  letter-spacing: 0.03em;
}

p {
  font-size: 15px;
  color: #475569;
  line-height: 1.5;
}

input {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  margin-bottom: 25px;
  box-sizing: border-box;
  outline-offset: 2px;
  outline-color: #2563eb;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}

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

a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

Vaata programmis

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 (ID, ava repos,
Viit repos)

Scroll to Top