GitHub User Finder | HTML, CSS & JavaScript

GitHub User Finder with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #23

Project Overview

A GitHub User Finder built using HTML, CSS, and JavaScript that allows users to search for GitHub profiles by username.
The application fetches real-time data from the GitHub public API and displays user details such as profile information, repositories count, and followers in a clean and responsive interface.

Key Features

Search GitHub users by username.
Fetches real-time data using the GitHub public API.
Displays user avatar, name, bio, and profile link.
Shows key statistics like repositories, followers, and following.
Handles invalid usernames with clear error messages.
Clean, responsive, and user-friendly design.
No API key required.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>GitHub User Finder</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="container">
    <h2>GitHub User Finder</h2>

    <div class="search-box">
      <input
        type="text"
        id="username"
        placeholder="Enter GitHub username"
      />
      <button onclick="getUser()">Search</button>
    </div>

    <div id="result"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background: #ffffff;
  width: 360px;
  padding: 25px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

h2 {
  margin-bottom: 15px;
}

.search-box {
  display: flex;
  margin-bottom: 15px;
}

.search-box input {
  flex: 1;
  padding: 10px;
  border-radius: 6px 0 0 6px;
  border: 1px solid #ccc;
}

.search-box button {
  padding: 10px 16px;
  border: none;
  border-radius: 0 6px 6px 0;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

.profile {
  margin-top: 15px;
}

.profile img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.profile h3 {
  margin-bottom: 5px;
}

.profile p {
  font-size: 13px;
  color: #555;
}

.stats {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 13px;
}

.stats div {
  background: #f3f4f6;
  padding: 6px;
  border-radius: 6px;
  width: 30%;
}

.profile a {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: #4f46e5;
  text-decoration: none;
}

.error {
  color: red;
  font-size: 14px;
}

Javascript Code

const result = document.getElementById("result");

function getUser() {
  const username = document.getElementById("username").value.trim();

  if (!username) {
    result.innerHTML = `<p class="error">Please enter a username</p>`;
    return;
  }

  result.innerHTML = "Loading...";

  fetch(`https://api.github.com/users/${username}`)
    .then(res => {
      if (!res.ok) throw new Error("User not found");
      return res.json();
    })
    .then(user => {
      result.innerHTML = `
        <div class="profile">
          <img src="${user.avatar_url}" alt="Avatar">
          <h3>${user.name || user.login}</h3>
          <p>${user.bio || "No bio available"}</p>

          <div class="stats">
            <div>Repos<br><strong>${user.public_repos}</strong></div>
            <div>Followers<br><strong>${user.followers}</strong></div>
            <div>Following<br><strong>${user.following}</strong></div>
          </div>

          <a href="${user.html_url}" target="_blank">View Profile</a>
        </div>
      `;
    })
    .catch(() => {
      result.innerHTML = `<p class="error">User not found</p>`;
    });
}