Veronika Milovzorova portfolio/ eng

Harjutus 7. GT API päring

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

// Funktsioon, mis kuvab lehe sisu ja värskendab HTMLi
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 &&
          profileName !== "User not found" &&
          !profileName.startsWith("API rate limit")
            ? `<a href="${profileLink}" target="_blank">${profileLink}</a>`
            : "-"
        }</p>
      </div>
    </div>
  `;

  // Lisame sisendväljale sündmuse kuulaja, mis kutsutakse iga sisendi muutuse korral
  const input = document.querySelector("input");
  input.addEventListener("input", updateValue);
}

// Funktsioon, mis uuendab antud profiili nime ja käivitab profiili päringu
function updateValue(e) {
  givenProfile = e.target.value.trim();
  fetchProfile();
}

// Asünkroonne funktsioon, mis pärib GitHubi APIst kasutaja andmed
async function fetchProfile() {
  if (!givenProfile) {
    // Kui profiili pole sisestatud, lähtestame kõik andmed
    profileName = "";
    profileId = "";
    profileLink = "";
    profileRepos = "";
    profileFollowers = "";
    profileFollowing = "";
    renderPage();
    return;
  }

  try {
    const response = await fetch(
      `https://api.github.com/users/${givenProfile}`
    );

    if (response.status === 403) {
      // Kui API päringute limiit on täis, kuvame vastava sõnumi
      profileName = "API rate limit reached. Try again later";
      profileId = "-";
      profileLink = "";
      profileRepos = "-";
      profileFollowers = "-";
      profileFollowing = "-";
    } else if (!response.ok) {
      // Kui kasutajat ei leitud, kuvame vastava sõnumi
      profileName = "User not found";
      profileId = "-";
      profileLink = "";
      profileRepos = "-";
      profileFollowers = "-";
      profileFollowing = "-";
    } else {
      // Kui vastus on edukas, täidame andmed vastusest
      const data = await response.json();
      profileName = data.name || data.login || "-";
      profileId = data.id || "-";
      profileLink = data.html_url || "";
      profileRepos = data.public_repos || "-";
      profileFollowers = data.followers || "-";
      profileFollowing = data.following || "-";
    }
    renderPage();
  } catch (error) {
    // Kui tekib viga päringus, kuvame veateate
    console.error("Fetch error:", error);
    profileName = "Error";
    profileId = "-";
    profileLink = "";
    profileRepos = "-";
    profileFollowers = "-";
    profileFollowing = "-";
    renderPage();
  }
}

// Alglaadimine - renderdame lehe esmalt tühjade andmetega
renderPage();


body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f6f8;
  color: #333;
  margin: 20px;
  display: flex;
  justify-content: center;
}

#app {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 30px 40px;
  max-width: 400px;
  width: 100%;
}

h1 {
  color: #24292e;
  margin-bottom: 15px;
}

input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  margin-bottom: 20px;
  transition: border-color 0.3s ease;
}

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

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

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

.content p a:hover {
  text-decoration: underline;
}

Kokkuvõte:

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

On loodud leht mis teeb pätingu GIThubi ja näitab valiku infot (ID, ava repos, link, followers).

en_US
en_US et