From 7d47aadf973b763e5063e1d50a7f10b2a3dba3a4 Mon Sep 17 00:00:00 2001
From: Ayan Farah <Ayyanfarrah97@gmail.com>
Date: Sat, 20 Sep 2025 17:58:37 +0100
Subject: [PATCH] finished

---
 .vscode/settings.json    |  3 +++
 components/GithubCard.js | 53 +++++++++++++++++++++++++++++++++++++++-
 index.css                | 24 ++++++++++++++++++
 week7                    |  0
 4 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 week7

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/components/GithubCard.js b/components/GithubCard.js
index 4cc30e4..fe5d15e 100644
--- a/components/GithubCard.js
+++ b/components/GithubCard.js
@@ -4,6 +4,15 @@
 // 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.
+         
+
+         axios.get('https://api.github.com/users/Ayan2382')
+          .then(function(response) {
+          console.log(response.data);  
+          })
+         .catch(function(error) {
+         console.error('User not found or error fetching user:', error);
+         });
 
 
 // 🛠️ STEP 2: Create a Function to Build the Card
@@ -26,20 +35,52 @@
 // 3️⃣ Return the created card element.
 
 
+function createUserCard(data) {
+  const card = document.createElement('div');
+  card.className = 'card';
+  card.innerHTML = `
+
+    <img src="${data.avatar_url}" alt="${data.name || data.login}" width="100" style="border-radius: 50%; margin-bottom: 10px;">
+    <h2>${data.name || data.login}</h2>
+    <p><strong>Bio:</strong> ${data.bio || 'N/A'}</p>
+    <p><strong>Location:</strong> ${data.location || 'Not specified'}</p>
+    <p><strong>Followers:</strong> ${data.followers}</p>
+    <p><strong>Following:</strong> ${data.following}</p>
+    <p><a href="${data.html_url}" target="_blank">GitHub Profile</a></p>
+  `;
+  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.
+        
+   const card = createUserCard(data);
+   const container = document.querySelector('.cards');
+   container.appendChild(card);
+
 
 
 // 🛠️ 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
+        //Use this: https://api.github.com/users/Ayan2382/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.
+axios.get('https://api.github.com/users/Ayan2382/followers')
+  .then(response => {
+    const followers = response.data;
+    followers.forEach(follower => {
+      const card = createUserCard(follower);
+      document.querySelector('.cards').appendChild(card);
+    });
+  })
+  .catch(error => console.error('Error fetching followers:', error));
 
 
 // 🛠️ STRETCH: Add More GitHub Users
@@ -47,6 +88,16 @@
 // 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 = ['DuraanAli', 'JohnDoe', 'MarkUrias', 'username4', 'username5'];
+    followersArray.forEach(username => {
+    axios.get(`https://api.github.com/users/${username}`)
+    .then(response => {
+      const card = createUserCard(response.data);
+      document.querySelector('.cards').appendChild(card);
+    })
+    .catch(error => console.error('Error fetching user:', error));
+});
+
 
 // 🌟 BONUS TIP:
 // 🎨 Style your cards using CSS to make them look polished!
diff --git a/index.css b/index.css
index d97bce9..7980abc 100644
--- a/index.css
+++ b/index.css
@@ -122,5 +122,29 @@ body {
   font-style: italic;
   margin: 3px 0 10px;
 }
+.card {
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  padding: 15px;
+  margin: 10px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+  width: 250px;
+  text-align: center;
+  background-color: white;
+  font-family: Arial, sans-serif;
+  transition: transform 0.2s ease;
+}
+
+.card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}
+
+.card img {
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  margin-bottom: 10px;
+}
 
 
diff --git a/week7 b/week7
new file mode 100644
index 0000000..e69de29