diff --git a/components/GithubCard.js b/components/GithubCard.js
index 4cc30e4..653d16e 100644
--- a/components/GithubCard.js
+++ b/components/GithubCard.js
@@ -5,6 +5,15 @@
// 4️⃣ Pass the data into a function to create a user card.
// 5️⃣ Append the created card to the `.cards` container in the DOM.
+// answers step 1
+axios.get('https://api.github.com/users/mohamed-Abdalle')
+ .then(response => {
+ console.log(response.data);
+ createGithubCard(response.data);
+ })
+ .catch(error => {
+ console.error('Error fetching GitHub data:', error);
+ });
// 🛠️ STEP 2: Create a Function to Build the Card
// 1️⃣ Write a function that takes a **user object** as a parameter.
@@ -25,12 +34,49 @@
//
// 3️⃣ Return the created card element.
+function createUserCard(user) {
+ const card = document.createElement('div');
+ card.classList.add('card');
+
+ card.innerHTML = `
+
+
+
${user.name || "Magac la'aan"}
+
${user.login}
+
Location: ${user.location || "Lama hayo"}
+
Profile: ${user.html_url}
+
Followers: ${user.followers}
+
Following: ${user.following}
+
Bio: ${user.bio || "Ma jiro bio"}
+
+ `;
+
+ return card;
+}
+
// 🛠️ 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.
+axios.get('https://api.github.com/users/mohamed-Abdalle/followers')
+ .then(response => {
+ response.data.forEach(follower => {
+ axios.get(`https://api.github.com/users/${follower.login}`)
+ .then(res => {
+ const followerCard = createUserCard(res.data);
+ document.querySelector('.cards').appendChild(followerCard);
+ })
+ .catch(err => {
+ console.error("Follower xog lama helin:", err);
+ });
+ });
+ })
+ .catch(error => {
+ console.error("Xogta followers lama helin:", error);
+ });
+
// 🛠️ STEP 4: Fetch Followers Data
// 1️⃣ Use the `followers_url` from the GitHub user data or
@@ -47,6 +93,26 @@
// 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`.
+const followersArray = [
+ 'mohadaahir',
+ 'mohamed-Moha-Bozka',
+ 'm-salah19',
+ 's-hariri',
+ 'u-mar'
+];
+
+followersArray.forEach(username => {
+ axios.get(`https://api.github.com/users/${username}`)
+ .then(response => {
+ const userCard = createUserCard(response.data);
+ document.querySelector('.cards').appendChild(userCard);
+ })
+ .catch(error => {
+ console.error(`Xog lama helin: ${username}`, error);
+ });
+});
+
+
// 🌟 BONUS TIP:
// 🎨 Style your cards using CSS to make them look polished!
diff --git a/index.css b/index.css
index d97bce9..7c34ca2 100644
--- a/index.css
+++ b/index.css
@@ -124,3 +124,4 @@ body {
}
+