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";
let givenProfile = "";
let profileName = "";
let profileId = "";
let profileLink = "";
let profileRepos = "";
let profileFollowers = "";
let profileFollowing = "";

// Lehekülje renderdusfunktsioon
function renderPage() {
  document.getElementById("app").innerHTML = `
    <div>
      <h1>Github profile viewer</h1>
      <p>Please enter profile name: </p>
      <input value="${givenProfile}" placeholder="Enter GitHub username" />
      <div class="content">
        <h1 id="name">Name: ${profileName ? profileName : "-"}</h1>
        <p id="id">Id: ${profileId ? profileId : "-"}</p>
        <p id="repos">Public repos: ${profileRepos ? profileRepos : "-"}</p>
        <p id="followers">Followers: ${
          profileFollowers ? profileFollowers : "-"
        }</p>
        <p id="following">Following: ${
          profileFollowing ? profileFollowing : "-"
        }</p>
        <p id="profileurl">Link: ${
          profileLink && profileName
            ? `<a href="${profileLink}" target="_blank">${profileLink}</a>`
            : "-"
        }</p>
      </div>
    </div>
  `;
  // Pärast uuesti joonistamist lisa kindlasti käitleja uuesti sisendisse!
  const input = document.querySelector("input");
  input.addEventListener("change", updateValue);
}

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

// GitHubi profiilipä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"); //const rateLimitTime = response.headers.get("x-ratelimit-used");

    if (!response.ok) {
      profileName = "User not found";
      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 rate limit reached. Try again later";
      profileId = "-";
      profileLink = "";
      profileRepos = "-";
    }
    renderPage();
  } catch (e) {
    profileName = "Error";
    profileId = "-";
    profileLink = "";
    profileRepos = "-";
    profileFollowers = "-";
    profileFollowing = "-";
    renderPage();
  }
}

// Esialgne renderdamine
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);
}

#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;
}

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;
}

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)