From e1ca93583493a8cb15232ce1f4c49141cbfd64b9 Mon Sep 17 00:00:00 2001 From: joseph Date: Sat, 11 Oct 2025 21:57:30 -0400 Subject: [PATCH 1/2] done --- components/GithubCard.js | 135 ++++++++++++++++++++++++--------------- 1 file changed, 82 insertions(+), 53 deletions(-) diff --git a/components/GithubCard.js b/components/GithubCard.js index 4cc30e4..d73980e 100644 --- a/components/GithubCard.js +++ b/components/GithubCard.js @@ -1,53 +1,82 @@ -// 🛠️ STEP 1: Fetch GitHub Data -// 1️⃣ Use Axios to send a GET request to `https://api.github.com/users/your_github_username`. -// 2️⃣ Log the response data to inspect its structure. -// 3️⃣ Look at important fields like `name`, `avatar_url`, `location`, `followers`, `following`, `bio`, and `followers_url`. -// 4️⃣ Pass the data into a function to create a user card. -// 5️⃣ Append the created card to the `.cards` container in the DOM. - - -// 🛠️ STEP 2: Create a Function to Build the Card -// 1️⃣ Write a function that takes a **user object** as a parameter. -// 2️⃣ Use JavaScript DOM methods to create the following structure: -// -//
-// -//
-//

{name}

-//

{login}

-//

Location: {location}

-//

Profile: {html_url}

-//

Followers: {followers}

-//

Following: {following}

-//

Bio: {bio}

-//
-//
-// -// 3️⃣ Return the created card element. - - -// 🛠️ STEP 3: Add the Card to the DOM -// 1️⃣ Call the function with the GitHub data. -// 2️⃣ Select the `.cards` container using `document.querySelector('.cards')`. -// 3️⃣ Append the created card to the `.cards` container. - - -// 🛠️ STEP 4: Fetch Followers Data -// 1️⃣ Use the `followers_url` from the GitHub user data or - //Use this: https://api.github.com/users/your_username/followers -// 2️⃣ Send a GET request to fetch follower information. -// 3️⃣ Log the response data to inspect its structure. -// 4️⃣ For each follower: -// - Create a card using the function. -// - Append the card to the `.cards` container. - - -// 🛠️ STRETCH: Add More GitHub Users -// 1️⃣ Create an array `followersArray` with at least 5 GitHub usernames. -// 2️⃣ Loop through the array and send a GET request for each username. -// 3️⃣ Create a card for each user and append it to `.cards`. - - -// 🌟 BONUS TIP: -// 🎨 Style your cards using CSS to make them look polished! -// 🤖 Try experimenting with different GitHub profiles! +function fetchGithubData() { + return axios + .get("https://api.github.com/users/yousuf316") + .then((response) => response.data) + .catch((error) => console.log(error)); + } + + function createUsercard(userdata) { + const card = document.createElement("div"); + card.className = "card"; + + const avatar = document.createElement("img"); + avatar.src = userdata.avatar_url; + avatar.alt = `${userdata.login}'s avatar`; + card.append(avatar); + + const cardInfo = document.createElement("div"); + cardInfo.className = "card-info"; + card.append(cardInfo); + + const name = document.createElement("h3"); + name.className = "name"; + name.textContent = userdata.name || "No name provided"; + cardInfo.append(name); + + const username = document.createElement("p"); + username.className = "username"; + username.textContent = userdata.login; + cardInfo.append(username); + + const location = document.createElement("p"); + location.textContent = "Location: " + (userdata.location || "Not available"); + cardInfo.append(location); + + const profile = document.createElement("p"); + profile.innerHTML = `Profile: ${userdata.html_url}`; + cardInfo.append(profile); + + const followers = document.createElement("p"); + followers.textContent = "Followers: " + userdata.followers; + cardInfo.append(followers); + + const following = document.createElement("p"); + following.textContent = "Following: " + userdata.following; + cardInfo.append(following); + + const bio = document.createElement("p"); + bio.textContent = "Bio: " + (userdata.bio || "No bio available"); + cardInfo.append(bio); + + return card; + } + + function fetchFollowerData() { + return axios + .get("https://api.github.com/users/duraanali/followers") + .then((response) => response.data) + .catch((error) => console.log(error)); + } + + function displaynewUser() { + const cardsContainer = document.querySelector(".cards"); + cardsContainer.innerHTML = ""; + + fetchGithubData().then((currentUser) => { + cardsContainer.append(createUsercard(currentUser)); + }); + + fetchFollowerData().then((followers) => { + followers.forEach((user) => { + cardsContainer.append(createUsercard(user)); + }); + }); + } + + const button = document.createElement("button"); + button.textContent = "Load GitHub Users"; + button.addEventListener("click", displaynewUser); + document.body.prepend(button); + + displaynewUser(); + \ No newline at end of file From b2c3fb53db43d466c216e4f46533b50a1e0e4931 Mon Sep 17 00:00:00 2001 From: joseph Date: Sat, 11 Oct 2025 22:02:20 -0400 Subject: [PATCH 2/2] done --- components/GithubCard.js | 161 +++++++++++++++++++-------------------- 1 file changed, 80 insertions(+), 81 deletions(-) diff --git a/components/GithubCard.js b/components/GithubCard.js index d73980e..ec0ab7a 100644 --- a/components/GithubCard.js +++ b/components/GithubCard.js @@ -1,82 +1,81 @@ function fetchGithubData() { - return axios - .get("https://api.github.com/users/yousuf316") - .then((response) => response.data) - .catch((error) => console.log(error)); - } - - function createUsercard(userdata) { - const card = document.createElement("div"); - card.className = "card"; - - const avatar = document.createElement("img"); - avatar.src = userdata.avatar_url; - avatar.alt = `${userdata.login}'s avatar`; - card.append(avatar); - - const cardInfo = document.createElement("div"); - cardInfo.className = "card-info"; - card.append(cardInfo); - - const name = document.createElement("h3"); - name.className = "name"; - name.textContent = userdata.name || "No name provided"; - cardInfo.append(name); - - const username = document.createElement("p"); - username.className = "username"; - username.textContent = userdata.login; - cardInfo.append(username); - - const location = document.createElement("p"); - location.textContent = "Location: " + (userdata.location || "Not available"); - cardInfo.append(location); - - const profile = document.createElement("p"); - profile.innerHTML = `Profile: ${userdata.html_url}`; - cardInfo.append(profile); - - const followers = document.createElement("p"); - followers.textContent = "Followers: " + userdata.followers; - cardInfo.append(followers); - - const following = document.createElement("p"); - following.textContent = "Following: " + userdata.following; - cardInfo.append(following); - - const bio = document.createElement("p"); - bio.textContent = "Bio: " + (userdata.bio || "No bio available"); - cardInfo.append(bio); - - return card; - } - - function fetchFollowerData() { - return axios - .get("https://api.github.com/users/duraanali/followers") - .then((response) => response.data) - .catch((error) => console.log(error)); - } - - function displaynewUser() { - const cardsContainer = document.querySelector(".cards"); - cardsContainer.innerHTML = ""; - - fetchGithubData().then((currentUser) => { - cardsContainer.append(createUsercard(currentUser)); - }); - - fetchFollowerData().then((followers) => { - followers.forEach((user) => { - cardsContainer.append(createUsercard(user)); - }); - }); - } - - const button = document.createElement("button"); - button.textContent = "Load GitHub Users"; - button.addEventListener("click", displaynewUser); - document.body.prepend(button); - - displaynewUser(); - \ No newline at end of file + return axios + .get("https://api.github.com/users/yousuf316") + .then((response) => response.data) + .catch((error) => console.log(error)); +} + +function createUsercard(userdata) { + const card = document.createElement("div"); + card.className = "card"; + + const avatar = document.createElement("img"); + avatar.src = userdata.avatar_url; + avatar.alt = `${userdata.login}'s avatar`; + card.append(avatar); + + const cardInfo = document.createElement("div"); + cardInfo.className = "card-info"; + card.append(cardInfo); + + const name = document.createElement("h3"); + name.className = "name"; + name.textContent = userdata.name || "No name provided"; + cardInfo.append(name); + + const username = document.createElement("p"); + username.className = "username"; + username.textContent = userdata.login; + cardInfo.append(username); + + const location = document.createElement("p"); + location.textContent = "Location: " + (userdata.location || "Not available"); + cardInfo.append(location); + + const profile = document.createElement("p"); + profile.innerHTML = `Profile: ${userdata.html_url}`; + cardInfo.append(profile); + + const followers = document.createElement("p"); + followers.textContent = "Followers: " + userdata.followers; + cardInfo.append(followers); + + const following = document.createElement("p"); + following.textContent = "Following: " + userdata.following; + cardInfo.append(following); + + const bio = document.createElement("p"); + bio.textContent = "Bio: " + (userdata.bio || "No bio available"); + cardInfo.append(bio); + + return card; +} + +function fetchFollowerData() { + return axios + .get("https://api.github.com/users/yousuf316/followers") + .then((response) => response.data) + .catch((error) => console.log(error)); +} + +function displaynewUser() { + const cardsContainer = document.querySelector(".cards"); + cardsContainer.innerHTML = ""; + + fetchGithubData().then((currentUser) => { + cardsContainer.append(createUsercard(currentUser)); + }); + + fetchFollowerData().then((followers) => { + followers.forEach((user) => { + cardsContainer.append(createUsercard(user)); + }); + }); +} + +const button = document.createElement("button"); +button.textContent = "Load GitHub Users"; +button.addEventListener("click", displaynewUser); +document.body.prepend(button); + +displaynewUser();