Hr. 7 (vene versioon) GITHUB otsimineGithub profiili otsingu rakendus / Приложение для поиска профиля GithubHr. 7 (vene versioon) GITHUB otsimine

1. Töökeskkonna ettevalmistus

EST: Kõige lihtsam on kasutada CodeSandboxi, aga võib ka teha arvutis kaks faili: index.html ja index.js.
RUS: Проще всего использовать CodeSandbox, но можно создать у себя на компьютере два файла: index.html и index.js.

HTML kood / HTML-код:

<div id="app"></div>
<script src="index.js"></script>

2. Mis see rakendus teeb?

EST: Sa sisestad Githubi kasutajanime ja näed kohe tema põhiinfot: nimi, ID, repo arv ja link profiilile.
RUS: Вводишь никнейм пользователя Github — видишь основную информацию: имя, ID, количество репозиториев и ссылку на профиль.

3. JavaScripti põhimuutujad / Основные переменные JS

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

4. Kuidas näeb välja kasutajaliides?

EST: Teeme funktsiooni, mis joonistab ekraanile sisestusvälja ja tulemused.
RUS: Делаем функцию, которая рисует на странице поле для ввода и блок с результатами.

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

5. Kuidas töötab sisestamine? / Как работает ввод?

EST: Kui kasutaja kirjutab nime ja vajutab Enter, salvestame selle ja küsime Githubist andmeid.
RUS: Когда пользователь вводит ник и нажимает Enter, мы сохраняем это и запрашиваем данные с Github.

function updateValue(e) {
  givenProfile = e.target.value;
  fetchProfile();
}

6. Andmete küsimine Githubist / Получение данных с Github

EST: Teeme päringu Githubi aadressile https://api.github.com/users/USERNAME. Kui kasutaja on olemas, näitame tema andmeid. Kui ei ole, ütleme, et ei leitud.
RUS: Делаем запрос на https://api.github.com/users/ИМЯ_ПОЛЬЗОВАТЕЛЯ. Если пользователь есть — показываем его данные, если нет — пишем, что не найден.

async function fetchProfile() {
  if (!givenProfile) {
    profileName = "";
    profileId = "";
    profileLink = "";
    profileRepos = "";
    renderPage();
    return;
  }
  try {
    const response = await fetch(`https://api.github.com/users/${givenProfile}`);
    if (!response.ok) {
      profileName = "Kasutajat ei leitud / Пользователь не найден";
      profileId = "-";
      profileLink = "";
      profileRepos = "-";
    } else {
      const data = await response.json();
      profileName = data.login || "-";
      profileId = data.id || "-";
      profileLink = data.html_url || "";
      profileRepos = data.public_repos || "-";
    }
    renderPage();
  } catch (e) {
    profileName = "Viga / Ошибка";
    profileId = "-";
    profileLink = "";
    profileRepos = "-";
    renderPage();
  }
}

7. Käivitame rakenduse / Запускаем приложение

renderPage();

8. Täiskood / Полный код

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

// Функция отрисовки страницы
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="profileurl">Link: ${
          profileLink && profileName
            ? `<a href="${profileLink}" target="_blank">${profileLink}</a>`
            : "-"
        }</p>
      </div>
    </div>
  `;
  // После перерисовки обязательно снова добавляем обработчик на input!
  const input = document.querySelector("input");
  input.addEventListener("change", updateValue);
}

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

// Функция запроса профиля с GitHub
async function fetchProfile() {
  if (!givenProfile) {
    profileName = "";
    profileId = "";
    profileLink = "";
    profileRepos = "";
    renderPage();
    return;
  }
  try {
    const response = await fetch(
      `https://api.github.com/users/${givenProfile}`
    );
    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 || "-";
    }
    renderPage();
  } catch (e) {
    profileName = "Error";
    profileId = "-";
    profileLink = "";
    profileRepos = "-";
    renderPage();
  }
}

// Первичная отрисовка
renderPage();

9. Kuidas kasutada? / Как пользоваться?

EST: Ava leht, sisesta Githubi kasutajanimi (nt. torvalds, defunkt vms) ja kohe näed infot!
RUS: Открой страницу, введи никнейм (например, torvalds, defunkt или свой) — и увидишь всю нужную информацию!