diff --git a/README.md b/README.md index 9e77327..6ac208e 100644 --- a/README.md +++ b/README.md @@ -309,6 +309,17 @@ In order to run this project you need: +
  • +
    +Github Profile Finder +

    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.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/GithubProfileFinder/assets/github-logo.png b/Source-Code/GithubProfileFinder/assets/github-logo.png new file mode 100644 index 0000000..e927dc1 Binary files /dev/null and b/Source-Code/GithubProfileFinder/assets/github-logo.png differ diff --git a/Source-Code/GithubProfileFinder/assets/github.avif b/Source-Code/GithubProfileFinder/assets/github.avif new file mode 100644 index 0000000..a8958f3 Binary files /dev/null and b/Source-Code/GithubProfileFinder/assets/github.avif differ diff --git a/Source-Code/GithubProfileFinder/index.html b/Source-Code/GithubProfileFinder/index.html new file mode 100644 index 0000000..497556a --- /dev/null +++ b/Source-Code/GithubProfileFinder/index.html @@ -0,0 +1,55 @@ + + + + + + Github Profile Finder + + + + + + + + +
    +
    + + +
    + +
    +
    + avatar + Tajul Afreen + +
    +
    +

    A full stack developer

    +

    58 Repositories

    +
    + +
    +
    + + + + diff --git a/Source-Code/GithubProfileFinder/script.js b/Source-Code/GithubProfileFinder/script.js new file mode 100644 index 0000000..0468f0b --- /dev/null +++ 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 = ` + avatar + ${jsonData.name} + @${jsonData.login} + `; + 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 new file mode 100644 index 0000000..964856f --- /dev/null +++ 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; + } +}