tajulafreen · tajulafreen · Jul 29, 2024 · Jul 29, 2024 · Jul 29, 2024 · Jul 29, 2024
diff --git a/README.md b/README.md
@@ -309,6 +309,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Github Profile Finder</summary>
+<p>The GitHub User Info Finder is a web application designed to fetch and display detailed information about GitHub users. By simply entering a GitHub username, users can retrieve profile information including the avatar, name, bio, number of public repositories, followers, and following count. This project leverages the GitHub API to provide real-time data, and it is built using HTML, CSS, and JavaScript for a seamless user experience.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/GithubProfileFinder/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/GithubProfileFinder">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/GithubProfileFinder/assets/github-logo.png b/Source-Code/GithubProfileFinder/assets/github-logo.png
diff --git a/Source-Code/GithubProfileFinder/assets/github.avif b/Source-Code/GithubProfileFinder/assets/github.avif
diff --git a/Source-Code/GithubProfileFinder/index.html b/Source-Code/GithubProfileFinder/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Github Profile Finder</title>
+    <!-- google fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div class="search-container">
+        <input
+          type="text"
+          name=""
+          id="input"
+          placeholder="Enter Github UserName"
+          class=""
+        />
+        <button id="search">Search User</button>
+      </div>
+
+      <div class="profile-card">
+        <div class="main-info">
+          <img src="./assets/github-logo.png" alt="avatar" id="prof-img" />
+          <span class="name" id="name">Tajul Afreen</span>
+          <a href="" id="username"></a>
+        </div>
+        <div class="bio">
+          <p id="bio">A full stack developer</p>
+          <p><span id="repo">58</span> Repositories</p>
+        </div>
+        <div class="follow">
+          <div class="followers">
+            <span class="no" id="followers">49</span>
+            Followers
+          </div>
+          <div class="following">
+            <span class="no" id="following">19</span>
+            Following
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Source-Code/GithubProfileFinder/script.js b/Source-Code/GithubProfileFinder/script.js
@@ -0,0 +1,46 @@
+const inputUser = document.querySelector('#input');
+
+const userImg = document.querySelector('.main-info');
+const search = document.getElementById('search');
+const bio = document.querySelector('#bio');
+const repos = document.querySelector('#repo');
+const followers = document.querySelector('#followers');
+const following = document.querySelector('#following');
+
+const fetchUser = (username) => {
+  fetch(`https://api.github.com/users/${username}`)
+    .then((data) => data.json())
+    .then((jsonData) => {
+      if (jsonData.message === 'Not Found') {
+        alert('User Not Found');
+      } else {
+        userImg.innerHTML = `
+            <img src="${jsonData.avatar_url}" alt="avatar" id="prof-img">
+            <span class="name" id="name">${jsonData.name}</span>
+            <a href="${jsonData.html_url}" id="username">@${jsonData.login}</a>
+            `;
+        bio.innerHTML = jsonData.bio ? jsonData.bio : 'No bio available.';
+        repos.innerHTML = jsonData.public_repos;
+        followers.innerHTML = jsonData.followers;
+        following.innerHTML = jsonData.following;
+      }
+    })
+    .catch((err) => {
+      console.log(`Catch: ${err.message}`);
+    });
+};
+
+const getUser = () => {
+  const username = inputUser.value.trim();
+
+  if (username.length === 0) {
+    alert('Please enter a valid GitHub username');
+  } else {
+    fetchUser(username);
+  }
+
+  inputUser.value = '';
+};
+
+// Attach event listener to the search button
+search.addEventListener('click', getUser);
diff --git a/Source-Code/GithubProfileFinder/style.css b/Source-Code/GithubProfileFinder/style.css
@@ -0,0 +1,131 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: url(./assets/github.avif);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  background-blend-mode: darken;
+}
+
+.search-container {
+  width: 550px;
+  height: 50px;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-evenly;
+  margin: 0 auto;
+  margin-top: 50px;
+  box-shadow: 0 3px 10px gray;
+}
+
+#input {
+  width: 70%;
+  height: 100%;
+  background-color: #fff;
+  border: none;
+  outline: none;
+  padding: 5px 160px 5px 15px;
+  box-sizing: border-box;
+}
+
+#search {
+  height: 100%;
+  width: 30%;
+  background-color: #000;
+  color: white;
+  cursor: pointer;
+  text-transform: uppercase;
+}
+
+.profile-card {
+  width: 500px;
+  background-color: rgba(255, 255, 255, 0.6);
+  margin: 25px  auto;
+  border-radius: 15px;
+  overflow: hidden;
+  margin-bottom: 15px;
+  box-shadow: 0 3px 10px gray;
+  font-family: 'Lobster Two', cursive;
+}
+
+.main-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-bottom: 1px solid gray;
+}
+
+#prof-img {
+  height: 70px;
+  width: auto;
+  border-radius: 50%;
+  margin: 10px 0;
+  box-shadow: 0 3px 10px rgb(96, 93, 93);
+}
+
+.name {
+  margin-top: 15px;
+  font-size: 25px;
+}
+
+#username {
+  font-size: 20px;
+  text-decoration: none;
+  margin-top: 5px;
+  margin-bottom: 8px;
+}
+
+a {
+  text-decoration: none;
+}
+
+.bio {
+  width: 100%;
+  text-align: center;
+  padding: 20px 10px;
+  font-size: 23px;
+}
+
+#bio {
+  font-weight: bold;
+  color: rgb(28, 99, 109);
+}
+
+p {
+  margin-top: 12px;
+}
+
+.follow {
+  width: 100%;
+  display: flex;
+  height: 60px;
+  border-top: 1px solid grey;
+  font-size: 20px;
+}
+
+.follow div {
+  width: 50%;
+  text-align: center;
+  padding-top: 15px;
+}
+
+.followers {
+  border-right: 1px solid grey;
+}
+
+@media screen  and (max-width: 600px) {
+  .profile-card {
+    width: 450px;
+    margin: 0 45px;
+    margin-top: 30px;
+    border-radius: 15px;
+    overflow: hidden;
+    margin-bottom: 15px;
+    box-shadow: 0 3px 10px gray;
+  }
+}