i am finish the assigment

components/GithubCard.js

@@ -5,6 +5,22 @@
 // 4️⃣ Pass the data into a function to create a user card.
 // 5️⃣ Append the created card to the `.cards` container in the DOM.
 
+// https://api.github.com/users/Abdirahman984
+
+const apiURL = "https://api.github.com/users/Abdirahman984";
+
+function fitchApi() {
+  // return the promise that resolves to the user data (response.data)
+  return axios
+    .get(apiURL)
+    .then((response) => response.data)
+    .catch((error) => {
+      console.log("Error fetching user:", error);
+      // rethrow so callers can also handle if needed
+      throw error;
+    });
+}
+
 
 // 🛠️ STEP 2: Create a Function to Build the Card
 // 1️⃣ Write a function that takes a **user object** as a parameter.
@@ -22,15 +38,71 @@
 //         <p>Bio: {bio}</p>
 //       </div>
 //     </div>
+
+function createCard(userObject) {
+  const mainCard = document.createElement("div");
+  mainCard.className = "card";
+
+  const mainImg = document.createElement("img");
+  mainImg.src = userObject.avatar_url;
+
+  const secondDiv = document.createElement("div");
+  secondDiv.className = "card-info";
+
+  const titleH3 = document.createElement("h3");
+  titleH3.className = "name";
+  titleH3.textContent = userObject.name || userObject.login; // fallback if no name
+
+  const firstPara = document.createElement("p");
+  firstPara.className = "username";
+  firstPara.textContent = userObject.login;
+
+  const secoPara = document.createElement("p");
+  secoPara.textContent = `Location: ${userObject.location || "Not specified"}`;
+
+  const thirdPara = document.createElement("p");
+  thirdPara.innerHTML = `Profile: <a href="${userObject.html_url}" target="_blank">${userObject.html_url}</a>`;
+
+  const forthPara = document.createElement("p");
+  forthPara.textContent = `Followers: ${userObject.followers ?? 0}`;
+
+  const fifthPara = document.createElement("p");
+  fifthPara.textContent = `Following: ${userObject.following ?? 0}`;
+
+  const sixthPara = document.createElement("p");
+  sixthPara.textContent = `Bio: ${userObject.bio || "No bio"}`;
+
+  secondDiv.append(titleH3, firstPara, secoPara, thirdPara, forthPara, fifthPara, sixthPara);
+  mainCard.append(mainImg, secondDiv);
+
+  return mainCard;
+}
+
 //
 // 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.
 
+function displayGitHub() {
+  // call API to get main user data
+  fitchApi()
+    .then((userData) => {
+      // STEP 3: create and append the main user card
+      const card = createCard(userData);
+      const cardsContainer = document.querySelector(".cards");
+      cardsContainer.append(card);
+
+
+
+// run it
+
+
 
 // 🛠️ STEP 4: Fetch Followers Data
 // 1️⃣ Use the `followers_url` from the GitHub user data or 
@@ -42,6 +114,31 @@
 //     - Append the card to the `.cards` container.
 
 
+   // STEP 4: fetch followers using the followers_url from userData
+      return axios.get(userData.followers_url)
+        .then((followersResponse) => {
+          // 3️⃣ Log the response data to inspect structure
+          console.log("Followers response:", followersResponse.data);
+
+          const followersList = followersResponse.data; // array of follower objects
+
+          // 4️⃣ For each follower: create card and append
+          followersList.forEach((follower) => {
+            const followerCard = createCard(follower);
+            cardsContainer.append(followerCard);
+          });
+        })
+        .catch((err) => {
+          console.log("Error fetching followers:", err);
+        });
+    })
+    .catch((err) => {
+      console.log("Error in displayGitHub:", err);
+    });
+}
+
+displayGitHub();
+
 // 🛠️ 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.

index.html

@@ -1,15 +1,18 @@
 <!-- Do NOT change anything here -->
 <html>
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="./index.css">
-
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./index.css" />
   </head>
+
   <body>
     <div class="container">
       <div class="header">
-        <img src="assets/gabilogo.png" alt="Gabi School Logo"/>
+        <img src="assets/gabilogo.png" alt="Gabi School Logo" />
         <p>❤️'s</p>
         <img src="./assets/githublogo.png" alt="GitHub Logo" />
       </div>
@@ -18,6 +21,7 @@
     <!-- This is the axios CDN -->
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <script src="./components/GithubCard.js"></script>
+
   </body>
 </html>
-<!-- Do NOT change anything here except TODO line -->
+<!-- Do NOT change anything here except TODO line -->