done

components/GithubCard.js

@@ -1,53 +1,84 @@
-// 🛠️ 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:
-//
-//     <div class="card">
-//       <img src="{avatar_url}" />
-//       <div class="card-info">
-//         <h3 class="name">{name}</h3>
-//         <p class="username">{login}</p>
-//         <p>Location: {location}</p>
-//         <p>Profile: <a href="{html_url}">{html_url}</a></p>
-//         <p>Followers: {followers}</p>
-//         <p>Following: {following}</p>
-//         <p>Bio: {bio}</p>
-//       </div>
-//     </div>
-//
-// 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 = user.login;
+  userName.className = "username";
+
+  const location = document.createElement("p");
+  location.textContent = `Location: ${user.location}`;
+
+  const profile = document.createElement("p");
+  profile.innerHTML = `Profile: <a href="${user.html_url}" target="_blank" style="color:blue">${user.html_url}</a>`;
+
+  const followers = document.createElement("p");
+  followers.textContent = `Followers: ${user.followers}`;
+
+  const following = document.createElement("p");
+  following.textContent = `Following: ${user.following}`;
+
+  const bio = document.createElement("p");
+  bio.textContent = `Bio: ${user.bio}`;
+
+  // append elements
+  cardInfo.append(name, userName, location, profile, followers, following, bio);
+  mainDiv.append(image, cardInfo);
+
+  return mainDiv;
+}
+
+// function that displays user info
+function displayUserCard() {
+  const cardContainer = document.querySelector(".cards");
+  cardContainer.innerHTML = "";
+
+  user().then((currentUser) => {
+    cardContainer.prepend(createUserCard(currentUser));
+  });
+}
+
+//function that displays following users
+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();

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;

index.html

@@ -18,6 +18,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 -->