From 8fd7fab9f087114c1fb142646295980da49c4b17 Mon Sep 17 00:00:00 2001 From: IndigoWizard Date: Sat, 29 Oct 2022 17:56:02 +0100 Subject: [PATCH 1/4] GitHub Profile Card setting up webdev project info in README.md --- projects/GitHub Profile Card/README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 projects/GitHub Profile Card/README.md diff --git a/projects/GitHub Profile Card/README.md b/projects/GitHub Profile Card/README.md new file mode 100644 index 0000000..9dbbd0e --- /dev/null +++ b/projects/GitHub Profile Card/README.md @@ -0,0 +1,20 @@ +# GitHub Profile Card +This is a simple web project using html/css and vanilla javascript to learn how to use an API, here the GitHub API is used to search and retrieve a user's public info and display them such as; name, avatar, number of followers, bio, projects ..etc + +## Info +This project uses the GitHub API, see more here: +- [GitHub API - GitHub Developer](https://docs.github.com/en/rest) +- [https://api.github.com/](https://api.github.com/) + +Unlike the original project, I updated this one to not just display plain info but to also link to the user's profile, projects, followers/following and achievements. +It only makes sense to be able to actually visit visit the user's profile to navigate on github website, this upgrade helps to do so. + +## Setup +You can clone and open the project in a local server (e.g: liveserver) or you can host it somewhere like GitHub pages. + +## Contribution +This project itself serves as learning material to know how to handle an API. Still, you may want to add more features as part of your web dev learning journey, try to: +- Display user's achievements icons +- Add feature to print the user card +- Display a user's organizations on the card +- Make GitHub Organizations searchable (only user profiles are supported as of now) \ No newline at end of file From 50ce26326d52e9537e26b0e5d8ca2bf08f9941ef Mon Sep 17 00:00:00 2001 From: IndigoWizard Date: Sat, 29 Oct 2022 22:41:01 +0100 Subject: [PATCH 2/4] Main project setup - main index landing page - style.css --- projects/GitHub Profile Card/index.html | 19 ++++ projects/GitHub Profile Card/style.css | 132 ++++++++++++++++++++++++ 2 files changed, 151 insertions(+) create mode 100644 projects/GitHub Profile Card/index.html create mode 100644 projects/GitHub Profile Card/style.css diff --git a/projects/GitHub Profile Card/index.html b/projects/GitHub Profile Card/index.html new file mode 100644 index 0000000..710125d --- /dev/null +++ b/projects/GitHub Profile Card/index.html @@ -0,0 +1,19 @@ + + + + + + + Github Profiles Card + + +
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/projects/GitHub Profile Card/style.css b/projects/GitHub Profile Card/style.css new file mode 100644 index 0000000..e3b805e --- /dev/null +++ b/projects/GitHub Profile Card/style.css @@ -0,0 +1,132 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-image: url(https://github.blog/wp-content/uploads/2020/12/wallpaper_footer_4KUHD_16_9.png); + background-position: bottom; + background-size: cover; + background-repeat: no-repeat; + 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: 800px; +} + +.user-form input { + width: 100%; + display: block; + background: linear-gradient(90deg, rgba(13, 9, 92, 0.65) 0%, rgba(31, 53, 93, 0.4) 48%, rgba(40, 20, 82, 0.65) 100%); + background-color: rgba(38, 53, 98, 0.3); + border: none; + border-radius: 8px; + color: #fff; + padding: 1rem; + margin-bottom: 2rem; + font-family: inherit; + font-size: 1rem; + box-shadow: 5px 5px 15px rgba(38, 53, 98, 0.6); +} + +.user-form input::placeholder { + color: #bbb; +} + +.user-form input:focus { + outline: none; +} + +.card { + max-width: 800px; + background: linear-gradient(90deg, rgba(13, 9, 92, 0.65) 0%, rgba(31, 53, 93, 0.4) 48%, rgba(40, 20, 82, 0.65) 100%); + background-color: rgba(38, 53, 98, 0.3); + border-radius: 8px; + box-shadow: 5px 5px 15px rgba(38, 53, 98, 0.6); + display: flex; + padding: 1rem; + margin: 0 1.5rem; +} + +.avatar { + border-radius: 50%; + border: 5px solid rgba(22, 8, 63, 0.65); + height: 150px; + width: 150px; +} + +.user-info { + color: #eeee; + 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: 500px; +} + +.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: rgba(22, 8, 63, 0.65); + font-size: 0.7rem; + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + margin-bottom: 0.5rem; + display: inline-block; + border-radius: 4px; +} + +a +{ + text-decoration:none; + color: #fff; +} + +a:visited { + text-decoration: none; + color: #fff; + } + +@media (max-width: 500px) { + .card { + flex-direction: column; + align-items: center; + } + + .user-form { + max-width: 350px; + } + + .user-info ul li strong{ + font-size:0.7rem; + } +} From aa590c2d239f5db34fa10daacc61007bd121da2a Mon Sep 17 00:00:00 2001 From: IndigoWizard Date: Sun, 30 Oct 2022 01:29:12 +0100 Subject: [PATCH 3/4] Adding main script + updating general project info - adding main js script to fet gh api and display user info - updating style.css for better render on mobile screen - updating project info in README.md --- projects/GitHub Profile Card/README.md | 12 +++- projects/GitHub Profile Card/script.js | 91 ++++++++++++++++++++++++++ projects/GitHub Profile Card/style.css | 11 +++- 3 files changed, 111 insertions(+), 3 deletions(-) create mode 100644 projects/GitHub Profile Card/script.js diff --git a/projects/GitHub Profile Card/README.md b/projects/GitHub Profile Card/README.md index 9dbbd0e..689a021 100644 --- a/projects/GitHub Profile Card/README.md +++ b/projects/GitHub Profile Card/README.md @@ -1,14 +1,22 @@ # GitHub Profile Card -This is a simple web project using html/css and vanilla javascript to learn how to use an API, here the GitHub API is used to search and retrieve a user's public info and display them such as; name, avatar, number of followers, bio, projects ..etc +This is a simple web project using html/css and vanilla javascript to learn how to use an API to search for any user profile. + +Here the GitHub API is used to search and retrieve a user's public info and display them such as; name, avatar, number of followers, bio, projects ..etc ## Info This project uses the GitHub API, see more here: - [GitHub API - GitHub Developer](https://docs.github.com/en/rest) - [https://api.github.com/](https://api.github.com/) -Unlike the original project, I updated this one to not just display plain info but to also link to the user's profile, projects, followers/following and achievements. +Unlike the original project by insaaFusion, I upgraded this one to not just display plain info but to also link to the user's profile, projects, followers/following and achievements. It only makes sense to be able to actually visit visit the user's profile to navigate on github website, this upgrade helps to do so. +## Preview + +|Desktop|Mobile| +|--|--| +|![desktop](https://www.pixenli.com/image/ZAW_CSCX) |![mobile](https://www.pixenli.com/image/0GCdVuhU) | + ## Setup You can clone and open the project in a local server (e.g: liveserver) or you can host it somewhere like GitHub pages. diff --git a/projects/GitHub Profile Card/script.js b/projects/GitHub Profile Card/script.js new file mode 100644 index 0000000..5998141 --- /dev/null +++ b/projects/GitHub Profile Card/script.js @@ -0,0 +1,91 @@ +const main = document.getElementById('main') +const form = document.getElementById('form') +const search = document.getElementById('search') +const gh_url = 'https://api.github.com/users/' + +async function getUser(username) { + try { + const { data } = await axios(gh_url + username) + createUserCard(data) + getRepos(username) + } catch(err) { + if(err.response.status == 404) { + createErrorCard('No profile found')} + } +} + +async function getRepos(username) { + try { + const { data } = await axios(gh_url + username + '/repos?sort=created') + addReposToCard(data) + } catch(err) { + createErrorCard('Cant feth repos') + } +} + +function createUserCard(user) { + const profileID = user.name || user.login || user.href + const profileBio = 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,6) + .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 = '' + } +}) \ No newline at end of file diff --git a/projects/GitHub Profile Card/style.css b/projects/GitHub Profile Card/style.css index e3b805e..b6355b0 100644 --- a/projects/GitHub Profile Card/style.css +++ b/projects/GitHub Profile Card/style.css @@ -85,7 +85,7 @@ body { .user-info ul li { display: flex; - align-items: center; + align-items: end; } .user-info ul li strong { @@ -126,6 +126,15 @@ a:visited { max-width: 350px; } + .user-info{ + margin: auto; + margin-inline: 1rem; + } + + .user-info h2 { + text-align: center; + } + .user-info ul li strong{ font-size:0.7rem; } From 8aa98d715cea2d7a6c09d062787271188c22e17f Mon Sep 17 00:00:00 2001 From: IndigoWizard Date: Sun, 30 Oct 2022 03:01:05 +0100 Subject: [PATCH 4/4] Updating proejct summary list Updating proejct summary list proejcts/README.md --- projects/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/README.md b/projects/README.md index 8d571a6..95501d2 100644 --- a/projects/README.md +++ b/projects/README.md @@ -2,6 +2,7 @@ You find here a quick summary of the contributed projects to this repo. - [Add here your project name](project url) - Rock Paper Scissors game using Javascript https://github.com/amaan0810/HacktoberFest_2022/tree/Rock_Paper_Scissors_game/projects/Rock_Paper_Scissors +- [GitHub Profile Card](/projects/GitHub%20Profile%20Card/) Note: Please update the list if you contribute a project.