H7: Github andmete kasutamine API kaudu

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

2)Loo lihtne HTML-fail (index.html) koos konteineri, kus rakendus kuvab sisu.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
 
  <body>
    <div id="app"></div>
    <script src="./index.js" type="module"></script>
  </body>
</html>

Loo index.js fail, et käsitleda rakenduse loogikat.

Alusta muutujate deklareerimisest, mis hoiavad profiiliandmeid:

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

Määratle funktsioon renderPage, mis kuvab sisestusvälja ja profiili teabe:

function renderPage() {
  document.getElementById("app").innerHTML = `
    <div>
      <h1>Github profile viewer</h1>
      <p>Sisesta kasutajanimi / Введите никнейм:</p>
      <input value="${givenProfile}" placeholder="nt. torvalds" />
      <div class="content">
        <h1 id="name">Nimi/Имя: ${profileName ? profileName : "-"}</h1>
        <p id="id">ID: ${profileId ? profileId : "-"}</p>
        <p id="repos">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);
}

style.css

/* styles.css */

body {
  font-family: Arial, sans-serif;
  background-color: #e0f0ff; 
  color: #004080; 
  margin: 20px;
}

#app {
  max-width: 400px;
  margin: 0 auto;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #99ccff;
  border-radius: 4px;
  font-size: 16px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

h1,
p {
  margin: 6px 0;
}

a {
  color: #004080;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Full code

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();

Kokkuvõtte

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