script.js

// sab element ko select karne ke liye
const searchBtn = document.getElementById('searchBtn');
const searchInput = document.getElementById('searchInput');

const nameEl = document.getElementById('name');
const userIdEl = document.getElementById('userid');
const followersEl = document.getElementById('followers');
const followingEl = document.getElementById('following');
const avatarEl = document.getElementById('avatar');
const repoListEl = document.getElementById('repoList');

const loadingText = document.getElementById('loadingText');
const errorText = document.getElementById('errorText');


searchBtn.addEventListener('click', searchKaro); //click karne par search 
searchInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {// enter karne par search 
    searchKaro();
  }
});

function searchKaro() {
  // Get the value entered in the search input field and remove any extra spaces
  const username = searchInput.value.trim();// dsa mein ali bhaiya ne padhaye the 

  // Check if the input is empty
  if (username === "") {
    // If empty, show an alert to the user and stop further execution
    alert("Please enter a GitHub username");
    return;
  }

  // Clear any previous error messages
  errorText.textContent = "";

  // Show a loading indicator to inform the user that something is happening
  loadingText.style.display = 'block';

  // Create a new instance of the GitHubUser class with the entered username
  const user = new GitHubUser(username);

  // Call the method to fetch user data from GitHub and display it
  user.fetchAndDisplayUser();
}

// GitHubUser class
class GitHubUser {
  constructor(username) {
    this.username = username;
    this.apiUrl = `https://api.github.com/users/${username}`;
    this.reposUrl = `https://api.github.com/users/${username}/repos`;
  }

  async fetchAndDisplayUser() {
    try {
      const [userRes, reposRes] = await Promise.all([
        fetch(this.apiUrl),
        fetch(this.reposUrl)// do api call ek saath kiye 
      ]);

      if (!userRes.ok || !reposRes.ok) {
        throw new Error("GitHub user not found");
      }

      const userData = await userRes.json();
      const reposData = await reposRes.json();// dono ka json data nikala 

      this.displayProfile(userData);
      this.displayRepos(reposData);// profile and repo dikkane ke liye alag function chalaya and usme json wala user data and repo data pass kar diya
    } catch (error) {
      errorText.textContent = error.message;
      repoListEl.innerHTML = "";
    } finally {
      loadingText.style.display = 'none';
    }
  }

  displayProfile(data) {// sab chij ko update kiya 
    nameEl.textContent = data.name || "No name";
    userIdEl.textContent = data.login;
    followersEl.textContent = data.followers;
    followingEl.textContent = data.following;

    avatarEl.style.backgroundImage = `url(${data.avatar_url})`;
    avatarEl.style.backgroundSize = 'cover';
    avatarEl.style.backgroundPosition = 'center';
  }

  displayRepos(repos) { // repo ki update kiya hu bas 
    repoListEl.innerHTML = "";
  
    if (repos.length === 0) {
      repoListEl.innerHTML = "<li>No public repositories</li>";
      return;
    }
    // repo ko stars ke hisab se sort kiya hu
    const sorted = repos.sort((a, b) => b.stargazers_count - a.stargazers_count);
    const top5 = sorted.slice(0, 5);
  
    top5.forEach((repo) => {
      const li = document.createElement('li');
      const lang = repo.language ? repo.language.toLowerCase() : 'unknown';
  
      li.innerHTML = `
        <a href="${repo.html_url}" target="_blank" style="text-decoration: none; font-weight: bold;">
          ${repo.name}
        </a>
        <span class="lang ${lang}">(${lang})</span>
      `;
  
      repoListEl.appendChild(li); 
    });
  }
}