H7.GitHub API päring

Otsime github kontosi nende username´st

JavaScript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitHub API</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background: #f4f4f4;
        margin: 0;
        padding: 0;
      }
      #app {
        max-width: 400px;
        margin: 40px auto;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        padding: 32px 24px 24px 24px;
      }
      h1 {
        color: #222;
        margin-bottom: 16px;
        font-size: 1.6em;
      }
      input {
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1em;
      }
      .content {
        margin-top: 10px;
      }
      .profile-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 10px;
        border: 2px solid #eee;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
      }
      .profile-link {
        color: #0074d9;
        text-decoration: none;
        font-weight: bold;
      }
      .profile-link:hover {
        text-decoration: underline;
      }
      .profile-label {
        font-weight: bold;
        color: #555;
      }
      .profile-value {
        color: #222;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script>
      let givenProfile = "";
      let profileName = "";
      let profileId = "";
      let profileLink = "";
      let profileRepos = "";
      let profileAvatar = "";
      let profileType = "";
      let profileLocation = "";
      let profileBio = "";
      let profileFollowers = "";
      let profileFollowing = "";
      let profileCreated = "";
      let profileUpdated = "";

      // Функция отрисовки страницы
      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">
        ${
          profileAvatar
            ? `<img src="${profileAvatar}" class="profile-avatar" alt="avatar" />`
            : ""
        }
        <div><span class="profile-label">Name:</span> <span class="profile-value">${
          profileName ? profileName : "-"
        }</span></div>
        <div><span class="profile-label">Id:</span> <span class="profile-value">${
          profileId ? profileId : "-"
        }</span></div>
        <div><span class="profile-label">Public repos:</span> <span class="profile-value">${
          profileRepos ? profileRepos : "-"
        }</span></div>
        <div><span class="profile-label">Link:</span> <span class="profile-value">${
          profileLink && profileName
            ? `<a href="${profileLink}" class="profile-link" target="_blank">${profileLink}</a>`
            : "-"
        }</span></div>
        <div><span class="profile-label">Type:</span> <span class="profile-value">${
          profileType ? profileType : "-"
        }</span></div>
        <div><span class="profile-label">Location:</span> <span class="profile-value">${
          profileLocation ? profileLocation : "-"
        }</span></div>
        <div><span class="profile-label">Bio:</span> <span class="profile-value">${
          profileBio ? profileBio : "-"
        }</span></div>
        <div><span class="profile-label">Followers:</span> <span class="profile-value">${
          profileFollowers ? profileFollowers : "-"
        }</span></div>
        <div><span class="profile-label">Following:</span> <span class="profile-value">${
          profileFollowing ? profileFollowing : "-"
        }</span></div>
        <div><span class="profile-label">Created at:</span> <span class="profile-value">${
          profileCreated ? profileCreated : "-"
        }</span></div>
        <div><span class="profile-label">Updated at:</span> <span class="profile-value">${
          profileUpdated ? profileUpdated : "-"
        }</span></div>
      </div>
    </div>
  `;
        // После перерисовки обязательно снова добавляем обработчик на input!
        const input = document.querySelector("input");
        input.addEventListener("change", updateValue);
      }

      // Функция обработки ввода
      function updateValue(e) {
        givenProfile = e.target.value;
        fetchProfile();
      }

      // Функция запроса профиля с GitHub
      async function fetchProfile() {
        const rateLimitTemaining = response.headers.get('X-RateLimit-Remaining');
        if (rateLimitTemaining !== null && parseInt(rateLimitTemaining) === 0) {
          profileName = "Rate limit exceeded";
          profileId = "-";
          profileLink = "";
          profileRepos = "-";
          profileAvatar = "";
          profileType = "";
          profileLocation = "";
          profileBio = "";
          profileFollowers = "";
          profileFollowing = "";
          profileCreated = "";
          profileUpdated = "";
          renderPage();
          return;
        }


        if (!givenProfile) {
          profileName = "";
          profileId = "";
          profileLink = "";
          profileRepos = "";
          profileAvatar = "";
          profileType = "";
          profileLocation = "";
          profileBio = "";
          profileFollowers = "";
          profileFollowing = "";
          profileCreated = "";
          profileUpdated = "";
          renderPage();
          return;
        }
        try {
          const response = await fetch(
            `https://api.github.com/users/${givenProfile}`
          );
          if (!response.ok) {
            profileName = "User not found";
            profileId = "-";
            profileLink = "";
            profileRepos = "-";
            profileAvatar = "";
            profileType = "";
            profileLocation = "";
            profileBio = "";
            profileFollowers = "";
            profileFollowing = "";
            profileCreated = "";
            profileUpdated = "";
          } else {
            const data = await response.json();
            profileName = data.login || "-";
            profileId = data.id || "-";
            profileLink = data.html_url || "";
            profileRepos = data.public_repos || "-";
            profileAvatar = data.avatar_url || "";
            profileType = data.type || "-";
            profileLocation = data.location || "-";
            profileBio = data.bio || "-";
            profileFollowers = data.followers || "-";
            profileFollowing = data.following || "-";
            profileCreated = data.created_at
              ? new Date(data.created_at).toLocaleString()
              : "-";
            profileUpdated = data.updated_at
              ? new Date(data.updated_at).toLocaleString()
              : "-";
          }
          renderPage();
        } catch (e) {
          profileName = "Error";
          profileId = "-";
          profileLink = "";
          profileRepos = "-";
          profileAvatar = "";
          profileType = "";
          profileLocation = "";
          profileBio = "";
          profileFollowers = "";
          profileFollowing = "";
          profileCreated = "";
          profileUpdated = "";
          renderPage();
        }
      }

      // Первичная отрисовка
      renderPage();
    </script>
  </body>
</html>

Tulemus:

Kokkuvõtte:

on loodud leht, mis teeb päringu GitHub ja näitab valiku infot(
Name, ID, Public repos, Link, Type, Location, Bio, Followers, Followings, Created at, Updated at
)