From 4a5a1142b9a6372d249c9801007acfe7bd0eebdf Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Tue, 3 Nov 2020 10:39:12 -0500 Subject: [PATCH] Github profiles --- github-profiles/index.html | 19 +++++++ github-profiles/script.js | 90 +++++++++++++++++++++++++++++ github-profiles/style.css | 113 +++++++++++++++++++++++++++++++++++++ 3 files changed, 222 insertions(+) create mode 100644 github-profiles/index.html create mode 100644 github-profiles/script.js create mode 100644 github-profiles/style.css diff --git a/github-profiles/index.html b/github-profiles/index.html new file mode 100644 index 0000000..5157144 --- /dev/null +++ b/github-profiles/index.html @@ -0,0 +1,19 @@ + + + + + + + Github Profiles + + +
+ +
+ +
+ + + + + diff --git a/github-profiles/script.js b/github-profiles/script.js new file mode 100644 index 0000000..e41f735 --- /dev/null +++ b/github-profiles/script.js @@ -0,0 +1,90 @@ +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 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 = '' + } +}) + diff --git a/github-profiles/style.css b/github-profiles/style.css new file mode 100644 index 0000000..b648f88 --- /dev/null +++ b/github-profiles/style.css @@ -0,0 +1,113 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #2a2a72; + 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%; + display: block; + background-color: #4c2885; + 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); +} + +.user-form input::placeholder { + color: #bbb; +} + +.user-form input:focus { + outline: none; +} + +.card { + max-width: 800px; + background-color: #4c2885; + 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%; + border: 10px solid #2a2a72; + 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: #212a72; + 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; + } +}