From 82192c2e513c24d8706c39aff4527c63968fa6ca Mon Sep 17 00:00:00 2001 From: Safia Dahir Date: Fri, 25 Jul 2025 21:10:27 -0500 Subject: [PATCH 1/2] done --- components/GithubCard.js | 143 ++++++++++++++++++++++++--------------- index.html | 1 + 2 files changed, 91 insertions(+), 53 deletions(-) diff --git a/components/GithubCard.js b/components/GithubCard.js index 4cc30e4..539af08 100644 --- a/components/GithubCard.js +++ b/components/GithubCard.js @@ -1,53 +1,90 @@ -// 🛠️ 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! +// fetched user from github +function user() { + return axios.get(`https://api.github.com/users/safiyacodes`) + .then((response) => { + return response.data; + }) + .catch((error) => { + console.log(error); + }); +} + + + +// create the HTML element with DOM +function createUserCard(user) { + const mainDiv = document.createElement("div"); + mainDiv.className = "card"; + + const image = document.createElement("img"); + image.src = user.avatar_url; + + const cardInfo = document.createElement("div"); + cardInfo.className = "card-info"; + + const name = document.createElement("h3"); + name.textContent = user.name || user.login; + name.className = "name"; + + const userName = document.createElement("p"); + userName.textContent = `Username: ${user.login}`; + userName.className = "username"; + + const location = document.createElement("p"); + location.textContent = `Location: ${user.location}`; + + const profile = document.createElement("p"); + profile.textContent = `Profile: ${user.html_url}`; + + const followers = document.createElement("p"); + followers.textContent = `Followers: ${user.followers !== undefined ? user.followers : "N/A"}`; + + const following = document.createElement("p"); + following.textContent = `Following: ${user.following !== undefined ? user.following : "N/A"}`; + + const bio = document.createElement("p"); + bio.textContent = `Bio: ${user.bio || "No bio"}`; + + // append elements + cardInfo.append(name, userName, location, profile, followers, following, bio); + mainDiv.append(image, cardInfo); + + return mainDiv; +} + +// function that connects everything +function displayUserCard() { + const cardContainer = document.querySelector(".cards"); + cardContainer.innerHTML = ""; + + user().then((currentUser) => { + cardContainer.prepend(createUserCard(currentUser)); + }); +} + + + + + + +function fetchFollowing() { + axios.get("https://api.github.com/users/safiyacodes/following") + .then((response) => { + const users = response.data; + const cardContainer = document.querySelector(".cards"); + + + users.forEach((user) => { + axios.get(user.url) + .then((res) => { + cardContainer.append(createUserCard(res.data)); + }); + }); + }) + .catch((error) => { + console.log(error); + }); +} + +displayUserCard() +fetchFollowing() \ No newline at end of file diff --git a/index.html b/index.html index 906769d..f39bc5b 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@ + \ No newline at end of file From f54d35e0ed7a1bdf7a6ed3b13e419fddca99d5d2 Mon Sep 17 00:00:00 2001 From: Safia Dahir Date: Sat, 26 Jul 2025 00:15:40 -0500 Subject: [PATCH 2/2] updated the apperience of the anchored text --- components/GithubCard.js | 38 ++++++++++++++++---------------------- index.css | 2 +- 2 files changed, 17 insertions(+), 23 deletions(-) diff --git a/components/GithubCard.js b/components/GithubCard.js index 539af08..a9a31dd 100644 --- a/components/GithubCard.js +++ b/components/GithubCard.js @@ -1,6 +1,7 @@ // fetched user from github function user() { - return axios.get(`https://api.github.com/users/safiyacodes`) + return axios + .get(`https://api.github.com/users/safiyacodes`) .then((response) => { return response.data; }) @@ -9,8 +10,6 @@ function user() { }); } - - // create the HTML element with DOM function createUserCard(user) { const mainDiv = document.createElement("div"); @@ -27,23 +26,23 @@ function createUserCard(user) { name.className = "name"; const userName = document.createElement("p"); - userName.textContent = `Username: ${user.login}`; + userName.textContent = user.login; userName.className = "username"; const location = document.createElement("p"); location.textContent = `Location: ${user.location}`; const profile = document.createElement("p"); - profile.textContent = `Profile: ${user.html_url}`; + profile.innerHTML = `Profile: ${user.html_url}`; const followers = document.createElement("p"); - followers.textContent = `Followers: ${user.followers !== undefined ? user.followers : "N/A"}`; + followers.textContent = `Followers: ${user.followers}`; const following = document.createElement("p"); - following.textContent = `Following: ${user.following !== undefined ? user.following : "N/A"}`; + following.textContent = `Following: ${user.following}`; const bio = document.createElement("p"); - bio.textContent = `Bio: ${user.bio || "No bio"}`; + bio.textContent = `Bio: ${user.bio}`; // append elements cardInfo.append(name, userName, location, profile, followers, following, bio); @@ -52,7 +51,7 @@ function createUserCard(user) { return mainDiv; } -// function that connects everything +// function that displays user info function displayUserCard() { const cardContainer = document.querySelector(".cards"); cardContainer.innerHTML = ""; @@ -62,23 +61,18 @@ function displayUserCard() { }); } - - - - - +//function that displays following users function fetchFollowing() { - axios.get("https://api.github.com/users/safiyacodes/following") + axios + .get("https://api.github.com/users/safiyacodes/following") .then((response) => { const users = response.data; const cardContainer = document.querySelector(".cards"); - users.forEach((user) => { - axios.get(user.url) - .then((res) => { - cardContainer.append(createUserCard(res.data)); - }); + axios.get(user.url).then((res) => { + cardContainer.append(createUserCard(res.data)); + }); }); }) .catch((error) => { @@ -86,5 +80,5 @@ function fetchFollowing() { }); } -displayUserCard() -fetchFollowing() \ No newline at end of file +displayUserCard(); +fetchFollowing(); diff --git a/index.css b/index.css index d97bce9..01940e6 100644 --- a/index.css +++ b/index.css @@ -29,7 +29,7 @@ footer, header, hgroup, menu, nav, section { display: block; } body { - line-height: 1; + line-height: 1.5; } ol, ul { list-style: none;