From b54c20284b012d2600d372150012fafd7c8d83ca Mon Sep 17 00:00:00 2001 From: Peer Dino <136565121+PeerDino@users.noreply.github.com> Date: Mon, 21 Aug 2023 23:09:56 +0500 Subject: [PATCH 1/3] Update index.html updated html file --- .../github-profile viewer/index.html | 40 ++++++++++++------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/Frontend-Projects/github-profile viewer/index.html b/Frontend-Projects/github-profile viewer/index.html index 3b61b9afa7..4e161209bf 100644 --- a/Frontend-Projects/github-profile viewer/index.html +++ b/Frontend-Projects/github-profile viewer/index.html @@ -1,23 +1,33 @@ - - - - Github Profiles - + + + GitHub Profile Finder + + -
- - -
-
-
- - - +
+

GitHub Profile Finder

+
+
+ + +
+
+ +
+ +
+
+ + + + - \ No newline at end of file + + + From 9caae0144233850bbfd92df7ea2dfd01a59d42e1 Mon Sep 17 00:00:00 2001 From: Peer Dino <136565121+PeerDino@users.noreply.github.com> Date: Mon, 21 Aug 2023 23:10:40 +0500 Subject: [PATCH 2/3] Update index.js --- .../github-profile viewer/index.js | 94 +++++++------------ 1 file changed, 33 insertions(+), 61 deletions(-) diff --git a/Frontend-Projects/github-profile viewer/index.js b/Frontend-Projects/github-profile viewer/index.js index 051d6549f9..c6fa1c184e 100644 --- a/Frontend-Projects/github-profile viewer/index.js +++ b/Frontend-Projects/github-profile viewer/index.js @@ -1,69 +1,41 @@ -const APIURL = "https://api.github.com/users/"; -const main = document.querySelector("#main"); -const searchBox = document.querySelector("#search") -const getUser = async(username) => { - const response = await fetch(APIURL + username); - const data = await response.json() - const card = ` -
-
- Florin Pop -
-
-

${data.name}

-

${data.bio}

- +const form = document.getElementById('search-form'); +const userDetails = document.getElementById('user-details'); -
- -
-
-
- ` - main.innerHTML = card; - getRepos(username) -} - - -// init call -getUser("shreyans2004") +form.addEventListener('submit', function(event) { + event.preventDefault(); + const username = document.getElementById('username').value; + fetchUserData(username); +}); -const getRepos = async(username) => { - const repos = document.querySelector("#repos") - const response = await fetch(APIURL + username + "/repos") - const data = await response.json(); - data.forEach( - (item) => { +function fetchUserData(username) { + const apiUrl = `https://api.github.com/users/${username}`; - const elem = document.createElement("a") - elem.classList.add("repo") - elem.href = item.html_url - elem.innerText = item.name - elem.target = "_blank" - repos.appendChild(elem) - } - ) + fetch(apiUrl) + .then(response => response.json()) + .then(data => { + displayUserDetails(data); + }) + .catch(error => { + console.error('Error fetching data:', error); + }); } -const formSubmit = () => { - if (searchBox.value != "") { - getUser(searchBox.value); - searchBox.value = "" - } - return false; +function displayUserDetails(user) { + userDetails.innerHTML = ` +
+ Profile Picture +

${user.name}

+ Visit Profile +
+
+

${user.bio}

+

Repositories: ${user.public_repos}

+
+
Followers: ${user.followers}

+

Following: ${user.following}

+
+ `; } - -submit=document.getElementById("submit"); -submit.addEventListener( - "click", - function() { - formSubmit() - } - ) - \ No newline at end of file From 89061aceee1dafac252dc47cf8bf3d3c57a697ee Mon Sep 17 00:00:00 2001 From: Peer Dino <136565121+PeerDino@users.noreply.github.com> Date: Mon, 21 Aug 2023 23:11:25 +0500 Subject: [PATCH 3/3] Update styles.css --- .../github-profile viewer/styles.css | 146 ++++++------------ 1 file changed, 49 insertions(+), 97 deletions(-) diff --git a/Frontend-Projects/github-profile viewer/styles.css b/Frontend-Projects/github-profile viewer/styles.css index 7fb9ef5c79..31a88f4243 100644 --- a/Frontend-Projects/github-profile viewer/styles.css +++ b/Frontend-Projects/github-profile viewer/styles.css @@ -1,116 +1,68 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); -* { - box-sizing: border-box; - padding: 0; - margin: 0; +body{ + margin: 0; + padding: 0; + color: white; + background-image: url(https://cdn.neowin.com/news/images/uploaded/2021/04/1619644762_github-desktop_story.jpg); +} +.container{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + flex-wrap: wrap; + } -body { - background-color: #FFC300; - +#user-details { + margin-top: 10px; display: flex; - flex-direction: column; align-items: center; justify-content: center; - font-family: "Poppins", sans-serif; - margin: 0; - min-height: 100vh; -} - -input { - background:linear-gradient(90deg,#FF5733 50%,#C70039 50%); - border-radius: 10px; - border: none; - box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1); - color: white; - font-family: inherit; - font-size: 1rem; - padding: 1rem; - margin-bottom: 2rem; + flex-direction: column; width: 400px; -} -button{ - - - background:#C70039; + height: auto; + text-align: center; + border: 1px solid red; border-radius: 10px; + background-color: white; + color: black; - border:2px solid black; -cursor: pointer; - color: white; - font-family: inherit; - font-size: 1rem; - padding: 1rem; - margin-bottom: 2rem; - margin-left:10px; - width: 80px; - -} -button:hover{ - transform:scale(1.1); - transition:transform 1s; -} - -input::placeholder { - color: white; } - -input:focus { - outline: none; +form{ + width: 100%; + height: auto; } - -.card { - background-color:#FF5733; - 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; - max-width: 800px; +form input{ + text-align: center; + font-size: 16px; + width: 300px; + height: 20px; + border-radius: 10px; + flex-wrap: wrap; } - -.avatar { - border: 10px solid #2a2a72; +img{ + height: 80px; + width: 80px; + object-fit: cover; border-radius: 50%; - height: 150px; - width: 150px; -} - -.user-info { - color: #eee; - margin-left: 2rem; } - -.user-info h2 { - margin-top: 0; +.bio,.name,.follow{ + margin-top: 10px; + width: 100%; + border-bottom: 1px solid grey; + margin: 0; } - -.user-info ul { - display: flex; - justify-content: space-between; - list-style-type: none; - padding: 0; - max-width: 400px; +.bio p{ + color: green; } - -.user-info ul li { +.follow{ display: flex; - margin-right: 10px; + flex-direction: row; + justify-content: space-evenly; align-items: center; + } - -.user-info ul li strong { - font-size: 0.9rem; - margin-left: 0.5rem; +.follow p,.bio p,.name p{ + margin: 20px 20px; + } - -.repo { - background-color: #2a2a72; - border-radius: 5px; - display: inline-block; - color: white; - font-size: 0.7rem; - padding: 0.25rem 0.5rem; - margin-right: 0.5rem; - margin-bottom: 0.5rem; - text-decoration: none; -} \ No newline at end of file