H7.Github API päring

<!-- wp:code -->
<pre class="wp-block-code"><code>let givenProfile = "";
let profileName = "";
let profileId = "";
let profileLink = "";
let profileRepos = "";
let profileFollowers = "";
let profileFollowing = "";

// Функция отрисовки страницы
function renderPage() {
  document.getElementById("app").innerHTML = `
    &lt;div&gt;
    &lt;head&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;/head&gt;

      &lt;h1&gt;Github profile viewer&lt;/h1&gt;
      &lt;p&gt;Please enter profile name: &lt;/p&gt;
      &lt;input value="${givenProfile}" placeholder="Enter GitHub username" /&gt;
      &lt;div class="content"&gt;
        &lt;h1 id="name"&gt;Name: ${profileName ? profileName : "-"}&lt;/h1&gt;
        &lt;p id="id"&gt;Id: ${profileId ? profileId : "-"}&lt;/p&gt;
        &lt;p id="repos"&gt;Public repos: ${profileRepos ? profileRepos : "-"}&lt;/p&gt;
        &lt;p id="followers"&gt;Followers: ${
          profileFollowers ? profileFollowers : "-"
        }&lt;/p&gt;
        &lt;p id="following"&gt;Following: ${
          profileFollowing ? profileFollowing : "-"
        }&lt;/p&gt;
        &lt;p id="profileurl"&gt;Link: ${
          profileLink &amp;&amp; profileName
            ? `&lt;a href="${profileLink}" target="_blank"&gt;${profileLink}&lt;/a&gt;`
            : "-"
        }&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
  `;
  // После перерисовки обязательно снова добавляем обработчик на 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 = "";
    profileFollowers = "";
    profileFollowing = "";
    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 = "-";
      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 || "-";
    }
    renderPage();
  } catch (e) {
    profileName = "Error";
    profileId = "-";
    profileLink = "";
    profileRepos = "-";
    profileFollowers = "-";
    profileFollowing = "-";
    renderPage();
  }
}

// Первичная отрисовка
renderPage();
</code></pre>
<!-- /wp:code -->

<!-- wp:code -->
<pre class="wp-block-code"><code>/* General reset and body styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
}

h1 {
  font-size: 2rem;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

/* Wrapper for the content */
div {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.content p {
  font-size: 1rem;
  color: #555;
  margin: 8px 0;
}

input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

input:focus {
  outline: none;
  border-color: #0073e6;
}

a {
  color: #0073e6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Error or User not found text */
#error {
  color: red;
  font-weight: bold;
}</code></pre>
<!-- /wp:code -->