From 8191a9a96ca6b8b109952d4f33373605018dd206 Mon Sep 17 00:00:00 2001 From: Abhishek Parmar Date: Mon, 17 Apr 2023 00:40:26 +0530 Subject: [PATCH] User finder by Abhishek --- Gihubuserfinder-by-Abhishek/index.css | 115 +++++++++++++++++++++++++ Gihubuserfinder-by-Abhishek/index.html | 20 +++++ Gihubuserfinder-by-Abhishek/index.js | 93 ++++++++++++++++++++ 3 files changed, 228 insertions(+) create mode 100644 Gihubuserfinder-by-Abhishek/index.css create mode 100644 Gihubuserfinder-by-Abhishek/index.html create mode 100644 Gihubuserfinder-by-Abhishek/index.js diff --git a/Gihubuserfinder-by-Abhishek/index.css b/Gihubuserfinder-by-Abhishek/index.css new file mode 100644 index 0000000..1bb50db --- /dev/null +++ b/Gihubuserfinder-by-Abhishek/index.css @@ -0,0 +1,115 @@ +* { + box-sizing: border-box; +} +body { + background-color: black; + color: #fff; + font-family: 'Poppins', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.user-form { + width: 100%; + max-width: 700px; +} + +.user-form input { + width: 100%; + height: 70%; + display: block; + background-color:grey; + border: none; + border-radius: 10px; + color: #fff; + padding: 1rem; + margin-bottom: 2rem; + font-family: inherit; + font-size: 1rem; + box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), + 0 15px 40px rgba(0, 0, 0, 0.1); +} +.logo{ + color: rgb(160, 160, 160); + font-size:100px; +} + +.user-form input::placeholder { + color:white; +} + +.user-form input:focus { + outline: none; +} + +.card { + max-width: 800px; + background-color: rgb(21, 162, 162); + border-radius: 20px; + box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), + 0 15px 40px rgba(0, 0, 0, 0.1); + display: flex; + padding: 3rem; + margin: 0 1.5rem; +} + +.avatar { + border-radius: 50%; + height: 150px; + width: 150px; +} + +.user-info { + color: #eee; + margin-left: 2rem; +} + +.user-info h2 { + margin-top: 0; +} + +.user-info ul { + list-style-type: none; + display: flex; + justify-content: space-between; + padding: 0; + max-width: 400px; +} + +.user-info ul li { + display: flex; + align-items: center; +} + +.user-info ul li strong { + font-size: 0.9rem; + margin-left: 0.5rem; +} + +.repo { + text-decoration: none; + color: #fff; + background-color: #1c6ca9; + font-size: 0.7rem; + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + margin-bottom: 0.5rem; + display: inline-block; +} + +@media (max-width: 500px) { + .card { + flex-direction: column; + align-items: center; + } + + .user-form { + max-width: 400px; + } +} + diff --git a/Gihubuserfinder-by-Abhishek/index.html b/Gihubuserfinder-by-Abhishek/index.html new file mode 100644 index 0000000..501677a --- /dev/null +++ b/Gihubuserfinder-by-Abhishek/index.html @@ -0,0 +1,20 @@ + + + + + + + Github Hunter + + +

Git Lookup

+
+ +
+ +
+ + + + + diff --git a/Gihubuserfinder-by-Abhishek/index.js b/Gihubuserfinder-by-Abhishek/index.js new file mode 100644 index 0000000..e4c74ea --- /dev/null +++ b/Gihubuserfinder-by-Abhishek/index.js @@ -0,0 +1,93 @@ +const APIURL = 'https://api.github.com/users/' + +const main = document.getElementById('main') +const form = document.getElementById('form') +const search = document.getElementById('search') + +async function getUser(username) { + try { + const { data } = await axios(APIURL + username) + + createUserCard(data) + getRepos(username) + } catch(err) { + if(err.response.status == 404) { + createErrorCard('No profile with this username') + } + } +} + +async function getRepos(username) { + try { + const { data } = await axios(APIURL + username + '/repos?sort=created') + + addReposToCard(data) + } catch(err) { + createErrorCard('Problem fetching repos') + } +} + +function createUserCard(user) { + const userID = user.name || user.login + const userBio = user.bio ? `

${user.bio}

` : '' + const cardHTML = ` +
+
+ ${user.name} +
+ +
+ ` + main.innerHTML = cardHTML + +} + +function createErrorCard(msg) { + const cardHTML = ` +
+

${msg}

+
+ ` + + main.innerHTML = cardHTML +} + +function addReposToCard(repos) { + const reposEl = document.getElementById('repos') + + repos + .slice(0, 5) + .forEach(repo => { + const repoEl = document.createElement('a') + repoEl.classList.add('repo') + repoEl.href = repo.html_url + repoEl.target = '_blank' + repoEl.innerText = repo.name + + reposEl.appendChild(repoEl) + }) +} + +form.addEventListener('submit', (e) => { + e.preventDefault() + + const user = search.value + + if(user) { + getUser(user) + + search.value = '' + } +}) + +