Building a Dynamic GitHub Profile Explorer SPA (Async REST API Mini App)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BCA Day 39 - GitHub Inspector</title>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background: #060c18; color: #fff; padding: 24px; }
    .card { max-width: 560px; margin: auto; background: #0c1328; border: 1px solid #1e293b; padding: 24px; border-radius: 14px; }
    .search-box { display: flex; gap: 8px; margin-bottom: 20px; }
    input { flex: 1; padding: 10px; background: #060c18; border: 1px solid #334155; color: #fff; border-radius: 6px; }
    button { padding: 10px 18px; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
    .profile-card { display: flex; gap: 16px; align-items: center; background: #060c18; padding: 16px; border-radius: 10px; margin-bottom: 16px; }
    .avatar { width: 70px; height: 70px; border-radius: 50%; border: 2px solid #2563eb; }
    .repo-item { background: #1e293b; padding: 12px; border-radius: 8px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
    .repo-name { color: #38bdf8; font-weight: bold; text-decoration: none; }
    .star-badge { background: #334155; padding: 2px 8px; border-radius: 12px; font-size: 11px; }
    #output { display: none; }
  </style>
</head>
<body>
  <div class="card">
    <h2>⚡ BCA GitHub Inspector</h2>
    <div class="search-box">
      <input type="text" id="userInput" placeholder="Search developer (e.g., octocat)..." />
      <button id="searchBtn">Inspect</button>
    </div>
    <div id="output">
      <div class="profile-card">
        <img class="avatar" id="avatar" src="" />
        <div>
          <h3 style="margin:0;" id="name"></h3>
          <p style="margin:4px 0;color:#94a3b8;font-size:12px;" id="bio"></p>
          <div style="font-size:12px;color:#10b981;" id="stats"></div>
        </div>
      </div>
      <h4>Top Repositories</h4>
      <div id="reposList"></div>
    </div>
    <div id="errMsg" style="color:#ef4444;text-align:center;display:none;"></div>
  </div>

  <script>
    const btn = document.getElementById("searchBtn");
    const input = document.getElementById("userInput");
    const output = document.getElementById("output");
    const errMsg = document.getElementById("errMsg");

    btn.addEventListener("click", async () => {
      const u = input.value.trim();
      if (!u) return;

      output.style.display = "none";
      errMsg.style.display = "none";
      btn.disabled = true;

      try {
        const [uRes, rRes] = await Promise.all([
          fetch("https://api.github.com/users/" + encodeURIComponent(u)),
          fetch("https://api.github.com/users/" + encodeURIComponent(u) + "/repos?sort=updated&per_page=3")
        ]);

        if (uRes.status === 404) throw new Error("User not found on GitHub");
        if (!uRes.ok) throw new Error("Failed to fetch user");

        const user = await uRes.json();
        const repos = await rRes.json();

        document.getElementById("avatar").src = user.avatar_url;
        document.getElementById("name").textContent = user.name || user.login;
        document.getElementById("bio").textContent = user.bio || "No bio available.";
        document.getElementById("stats").textContent = user.public_repos + " Repositories • " + user.followers + " Followers";

        const reposList = document.getElementById("reposList");
        reposList.innerHTML = "";
        repos.forEach(r => {
          const div = document.createElement("div");
          div.className = "repo-item";
          div.innerHTML = '<a class="repo-name" href="' + r.html_url + '" target="_blank">' + r.name + '</a><span class="star-badge">⭐ ' + r.stargazers_count + '</span>';
          reposList.appendChild(div);
        });

        output.style.display = "block";
      } catch (err) {
        errMsg.textContent = "Error: " + err.message;
        errMsg.style.display = "block";
      } finally {
        btn.disabled = false;
      }
    });
  </script>
</body>
</html>