From 18bb1d057edaafbec909ef46967465a6ad4728a8 Mon Sep 17 00:00:00 2001
From: Swar1904 <Swar1904@gmail.com>
Date: Thu, 24 Jul 2025 19:40:51 -0500
Subject: [PATCH 1/3] finished

---
 components/GithubCard.js | 137 ++++++++++++++++++++++++---------------
 index.css                |  66 ++++++++++++++++---
 2 files changed, 142 insertions(+), 61 deletions(-)

diff --git a/components/GithubCard.js b/components/GithubCard.js
index 4cc30e4..6359b97 100644
--- a/components/GithubCard.js
+++ b/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!
+function fetchGitHubData(_username = 'Swar1904') {
+  axios.get(`https://api.github.com/users/${swar1904}`) // Replace 'swar1904' with the username you want to fetch data for
+        .catch(_err => { 
+    .then(response => {
+      const userData = response.data;
+      console.log('User Data:', userData);
+
+      const userCard = createUserCard(userData);
+      const cardsContainer = document.querySelector('.cards');
+      cardsContainer.appendChild(userCard);
+        // Fetch followers data
+      return axios.get(userData.followers_url);
+    })         
+    .then(followersResponse => {
+      console.log('Followers:', followersResponse.data);
+      const followers = followersResponse.data;
+      const cardsContainer = document.querySelector('.cards');
+
+      followers.forEach(follower => {
+        axios.get(`https://api.github.com/users/${follower.login}`)
+          .then(followerDataResponse => {
+            const followerData = followerDataResponse.data;
+            const followerCard = createUserCard(followerData);
+            cardsContainer.appendChild(followerCard);
+          })
+          .catch(err => console.error('Error fetching follower data:', err));
+      });
+    })
+    .catch(error => console.error('Error fetching user or followers:', error));
+}
+
+function createUserCard(user) {
+  const card = document.createElement('div');
+  card.classList.add('card');
+
+  const avatar = document.createElement('img');
+  avatar.src = user.avatar_url;
+  card.appendChild(avatar);
+
+  const cardInfo = document.createElement('div');
+  cardInfo.classList.add('card-info');
+
+  const name = document.createElement('h3');
+  name.classList.add('name');
+  name.textContent = user.name || 'No name provided';
+  cardInfo.appendChild(name);
+
+  const username = document.createElement('p');
+  username.classList.add('username');
+  username.textContent = user.login;
+  cardInfo.appendChild(username);
+
+  const location = document.createElement('p');
+  location.textContent = `Location: ${user.location || 'Unknown'}`;
+  cardInfo.appendChild(location);
+
+  const profile = document.createElement('p');
+  profile.innerHTML = `Profile: <a href="${user.html_url}" target="_blank">${user.html_url}</a>`;
+  cardInfo.appendChild(profile);
+
+  const followers = document.createElement('p');
+  followers.textContent = `Followers: ${user.followers}`;
+  cardInfo.appendChild(followers);
+
+  const following = document.createElement('p');
+  following.textContent = `Following: ${user.following}`;
+  cardInfo.appendChild(following);
+
+  const bio = document.createElement('p');
+  bio.textContent = `Bio: ${user.bio || 'No bio available'}`;
+  cardInfo.appendChild(bio);
+
+  card.appendChild(cardInfo);
+
+  return card;
+}
+
+// Run with your GitHub username
+fetchGitHubData('Swar1904');
+// This code fetches GitHub user data and displays it in a card format
+// It also fetches the followers of the user and displays their data in similar cards
+// Make sure to include the necessary CSS styles in your index.css file for proper display
+// Example CSS styles can be found in the index.css file
+// Ensure you have axios included in your project for the API calls to work             
\ No newline at end of file
diff --git a/index.css b/index.css
index d97bce9..7ca8263 100644
--- a/index.css
+++ b/index.css
@@ -1,8 +1,4 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
+/* Eric Meyer's CSS Reset - http://meyerweb.com/eric/tools/css/reset/ */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -23,32 +19,39 @@ time, mark, audio, video {
 	font: inherit;
 	vertical-align: baseline;
 }
+
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
+
 body {
 	line-height: 1;
 }
+
 ol, ul {
 	list-style: none;
 }
+
 blockquote, q {
 	quotes: none;
 }
+
 blockquote:before, blockquote:after,
 q:before, q:after {
 	content: '';
 	content: none;
 }
+
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
 
+/* ====== Custom Styles Below ====== */
 
-/* Reset above, our CSS below */
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 
 html, body, * {
   font-family: 'Roboto', sans-serif;
@@ -58,9 +61,12 @@ html, body, * {
 html {
   font-size: 62.5%;
 }
+
 body {
   background: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
+  padding: 2rem;
 }
+
 .container {
   max-width: 800px;
   margin: 50px auto;
@@ -84,7 +90,8 @@ body {
 }
 
 .header p {
-  font-size: 48px;
+  font-size: 4.8rem;
+  color: #fff;
 }
 
 .cards {
@@ -95,17 +102,46 @@ body {
   width: 100%;
   padding: 20px;
   display: flex;
+  flex-direction: column;
+  align-items: center;
   border-radius: 5px;
   box-shadow: 0 1px 6px -2px #000;
   background-color: #FFF;
   margin-bottom: 30px;
+  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+}
+
+.card:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+@media (min-width: 600px) {
+  .card {
+    flex-direction: row;
+    align-items: flex-start;
+    text-align: left;
+  }
 }
 
 .card img {
   width: 150px;
   height: 150px;
   border-radius: 3px;
-  margin-right: 20px;
+  margin-bottom: 15px;
+}
+
+@media (min-width: 600px) {
+  .card img {
+    margin-bottom: 0;
+    margin-right: 20px;
+  }
+}
+
+.card-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .card .name {
@@ -123,4 +159,18 @@ body {
   margin: 3px 0 10px;
 }
 
+.card a {
+  color: #1fc8db;
+  text-decoration: none;
+  font-weight: bold;
+}
 
+.card a:hover {
+  text-decoration: underline;
+}
+.card .stats {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 10px;
+}
\ No newline at end of file

From 415561b63775b863e787be4d9e7dae199b479056 Mon Sep 17 00:00:00 2001
From: Swar1904 <Swar1904@gmail.com>
Date: Sat, 26 Jul 2025 14:30:12 -0500
Subject: [PATCH 2/3] git

---
 components/GithubCard.js | 189 +++++++++++++++++++++++++--------------
 1 file changed, 122 insertions(+), 67 deletions(-)

diff --git a/components/GithubCard.js b/components/GithubCard.js
index 6359b97..1427ab0 100644
--- a/components/GithubCard.js
+++ b/components/GithubCard.js
@@ -1,84 +1,139 @@
-function fetchGitHubData(_username = 'Swar1904') {
-  axios.get(`https://api.github.com/users/${swar1904}`) // Replace 'swar1904' with the username you want to fetch data for
-        .catch(_err => { 
+// 🛠️ 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.
+
+function fetchGitHub() {
+    axios.get('https://api.github.com/users/swar1904')
     .then(response => {
-      const userData = response.data;
-      console.log('User Data:', userData);
-
-      const userCard = createUserCard(userData);
-      const cardsContainer = document.querySelector('.cards');
-      cardsContainer.appendChild(userCard);
-        // Fetch followers data
-      return axios.get(userData.followers_url);
-    })         
-    .then(followersResponse => {
-      console.log('Followers:', followersResponse.data);
-      const followers = followersResponse.data;
-      const cardsContainer = document.querySelector('.cards');
-
-      followers.forEach(follower => {
-        axios.get(`https://api.github.com/users/${follower.login}`)
-          .then(followerDataResponse => {
-            const followerData = followerDataResponse.data;
-            const followerCard = createUserCard(followerData);
-            cardsContainer.appendChild(followerCard);
-          })
-          .catch(err => console.error('Error fetching follower data:', err));
-      });
+      return  response.data;
+      createCard(response.data);
     })
-    .catch(error => console.error('Error fetching user or followers:', error));
+    .catch(error => {
+      console.error( error);
+    });
 }
+    
+
+
 
-function createUserCard(user) {
-  const card = document.createElement('div');
-  card.classList.add('card');
+  
 
-  const avatar = document.createElement('img');
-  avatar.src = user.avatar_url;
-  card.appendChild(avatar);
 
-  const cardInfo = document.createElement('div');
-  cardInfo.classList.add('card-info');
+// 🛠️ 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.
+function buildUsercard(user) {
+        const card = document.createElement("div");
+        card.className = "card";
+        const avatar = document.createElement("img");
+        avatar.src = user.avatar_url;
+        card.appendChild(avatar);
+        
+        const cardInfo = document.createElement("div");
+        cardInfo.className = "card-info";
 
-  const name = document.createElement('h3');
-  name.classList.add('name');
-  name.textContent = user.name || 'No name provided';
-  cardInfo.appendChild(name);
+        const nameElement = document.createElement("h3");
+        nameElement.className = "name";
+        nameElement.textContent = user.name;
+        cardInfo.appendChild(nameElement);
 
-  const username = document.createElement('p');
-  username.classList.add('username');
-  username.textContent = user.login;
-  cardInfo.appendChild(username);
+        const usernameElement = document.createElement("p");
+        usernameElement.className = "username";
+        usernameElement.textContent = user.login;
+        cardInfo.appendChild(usernameElement);
 
-  const location = document.createElement('p');
-  location.textContent = `Location: ${user.location || 'Unknown'}`;
-  cardInfo.appendChild(location);
+        const locationElement = document.createElement("p");
+        locationElement.textContent = user.location;
+        cardInfo.appendChild(locationElement);
 
-  const profile = document.createElement('p');
-  profile.innerHTML = `Profile: <a href="${user.html_url}" target="_blank">${user.html_url}</a>`;
-  cardInfo.appendChild(profile);
+        const profileElement = document.createElement("p");
+        const profileLink = document.createElement("a");
+        profileLink.href = user.html_url;
+        profileLink.textContent = user.html_url;
+        profileElement.textContent = user.Profile;
+        profileElement.appendChild(profileLink);
+        cardInfo.appendChild(profileElement);
 
-  const followers = document.createElement('p');
-  followers.textContent = `Followers: ${user.followers}`;
-  cardInfo.appendChild(followers);
+        const followersElement = document.createElement("p");
+        followersElement.textContent = user.follower;
+        cardInfo.appendChild(followersElement);
 
-  const following = document.createElement('p');
-  following.textContent = `Following: ${user.following}`;
-  cardInfo.appendChild(following);
+        const followingElement = document.createElement("p");
+        followingElement.textContent = user.following;
+        cardInfo.appendChild(followingElement);
 
-  const bio = document.createElement('p');
-  bio.textContent = `Bio: ${user.bio || 'No bio available'}`;
-  cardInfo.appendChild(bio);
+        const bioElement = document.createElement("p");
+        bioElement.textContent = user.bio;
+        cardInfo.appendChild(bioElement);
 
-  card.appendChild(cardInfo);
+        card.appendChild(cardInfo);
 
-  return card;
+        return card;
 }
 
-// Run with your GitHub username
-fetchGitHubData('Swar1904');
-// This code fetches GitHub user data and displays it in a card format
-// It also fetches the followers of the user and displays their data in similar cards
-// Make sure to include the necessary CSS styles in your index.css file for proper display
-// Example CSS styles can be found in the index.css file
-// Ensure you have axios included in your project for the API calls to work             
\ No newline at end of file
+       const cardsContainer = document.querySelector('.cards');
+       
+        cardsContainer.appendChild(buildUsercard(fetchGitHab()));
+
+// 🛠️ 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 fetchFollowerData() {
+        return axios.get("https://api.github.com/users/anshur970/followers")
+        .then((response) => {
+                return response.data
+                })
+        .catch((error) => {
+                console.log(error)
+        })
+  }
+const button = document.createElement("button")
+button.addEventListener("click", displaynewUser)
+
+displaynewUser();
+
+// 🛠️ 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`.
+// 4️⃣ Use the `Promise.all` method to handle multiple requests.
+// 5️⃣ Use `Promise.all` to wait for all requests to complete before appending the cards to the DOM.
+// 6️⃣ Use `Promise.all` to wait for all requests to complete before appending the cards to the DOM.
+// 7️⃣ Use `Promise.all` to wait for all requests to complete before appending the cards to the DOM.
+// 8️⃣ Use `Promise.all` to wait for all requests to complete before appending the cards to the DOM.
+// 9️⃣ Use `Promise.all` to wait for all requests to complete before appending the cards to the DOM.
+// 🔟 Use `Promise.all` to wait for all requests to complet     e
+
+// 🌟 BONUS TIP:
+// 🎨 Style your cards using CSS to make them look polished!
+// 🤖 Try experimenting with different GitHub profiles!
\ No newline at end of file

From 073ee85b8b9ff7a4a06490b5154ff27645c89be1 Mon Sep 17 00:00:00 2001
From: Swar1904 <Swar1904@gmail.com>
Date: Mon, 28 Jul 2025 13:09:30 -0500
Subject: [PATCH 3/3] finished

---
 components/GithubCard.js | 94 +++++++++++++++++++---------------------
 1 file changed, 44 insertions(+), 50 deletions(-)

diff --git a/components/GithubCard.js b/components/GithubCard.js
index 1427ab0..c1ccfdd 100644
--- a/components/GithubCard.js
+++ b/components/GithubCard.js
@@ -4,42 +4,19 @@
 // 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.
-
-function fetchGitHub() {
-    axios.get('https://api.github.com/users/swar1904')
-    .then(response => {
-      return  response.data;
-      createCard(response.data);
-    })
-    .catch(error => {
-      console.error( error);
-    });
+        function fetchGitHab() {
+        return axios.get("https://api.github.com/users/swar1904")
+        .then((response) => {
+                return response.data
+        })
+        .catch((error) => {
+                console.log(error)
+        })
 }
-    
-
-
-
-  
-
 
 // 🛠️ 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.
 function buildUsercard(user) {
         const card = document.createElement("div");
         card.className = "card";
@@ -61,27 +38,23 @@ function buildUsercard(user) {
         cardInfo.appendChild(usernameElement);
 
         const locationElement = document.createElement("p");
-        locationElement.textContent = user.location;
+        locationElement.textContent = `Location: ${user.location}`;
         cardInfo.appendChild(locationElement);
 
         const profileElement = document.createElement("p");
-        const profileLink = document.createElement("a");
-        profileLink.href = user.html_url;
-        profileLink.textContent = user.html_url;
-        profileElement.textContent = user.Profile;
-        profileElement.appendChild(profileLink);
+        profileElement.innerHTML = `Profile: <a href="${user.html_url}">${user.html_url}</a>`;
         cardInfo.appendChild(profileElement);
 
         const followersElement = document.createElement("p");
-        followersElement.textContent = user.follower;
+        followersElement.textContent = `Followers: ${user.followers}`;
         cardInfo.appendChild(followersElement);
 
         const followingElement = document.createElement("p");
-        followingElement.textContent = user.following;
+        followingElement.textContent = `Following: ${user.following}`;
         cardInfo.appendChild(followingElement);
 
         const bioElement = document.createElement("p");
-        bioElement.textContent = user.bio;
+        bioElement.textContent = `Bio: ${user.bio}`;
         cardInfo.appendChild(bioElement);
 
         card.appendChild(cardInfo);
@@ -91,14 +64,28 @@ function buildUsercard(user) {
 
        const cardsContainer = document.querySelector('.cards');
        
-        cardsContainer.appendChild(buildUsercard(fetchGitHab()));
+        // Remove this incorrect usage, fetchGitHab() returns a Promise, not a user object
+        // cardsContainer.appendChild(buildUsercard(fetchGitHab()));
 
+        fetchGitHab().then(user => {
+            cardsContainer.appendChild(buildUsercard(user));
+        });
+//         <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.
 function fetchFollowerData() {
-        return axios.get("https://api.github.com/users/anshur970/followers")
+        return axios.get("https://api.github.com/users/safiyacodes/followers")
         .then((response) => {
                 return response.data
                 })
@@ -106,6 +93,20 @@ function fetchFollowerData() {
                 console.log(error)
         })
   }
+
+function displaynewUser(){      
+        
+    const cardsContainer = document.querySelector(".cards")
+        cardsContainer.innerHTML = ""
+         fetchGitHab().then((currentUser) =>
+        cardsContainer.append(buildUsercard(currentUser)))
+        fetchFollowerData().then((following)=>{
+                following.map((user)=>{
+                        cardsContainer.append(buildUsercard(user))
+                })
+        })
+}
+
 const button = document.createElement("button")
 button.addEventListener("click", displaynewUser)
 
@@ -121,18 +122,11 @@ displaynewUser();
 //     - 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`.
-// 4️⃣ Use the `Promise.all` method to handle multiple requests.
-// 5️⃣ Use `Promise.all` to wait for all requests to complete before appending the cards to the DOM.
-// 6️⃣ Use `Promise.all` to wait for all requests to complete before appending the cards to the DOM.
-// 7️⃣ Use `Promise.all` to wait for all requests to complete before appending the cards to the DOM.
-// 8️⃣ Use `Promise.all` to wait for all requests to complete before appending the cards to the DOM.
-// 9️⃣ Use `Promise.all` to wait for all requests to complete before appending the cards to the DOM.
-// 🔟 Use `Promise.all` to wait for all requests to complet     e
+
 
 // 🌟 BONUS TIP:
 // 🎨 Style your cards using CSS to make them look polished!