salmo

components/GithubCard.js

@@ -4,16 +4,72 @@
 // 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 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>
+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 nameElement = document.createElement("h3");
+        nameElement.className = "name";
+        nameElement.textContent = user.name;
+        cardInfo.appendChild(nameElement);
+
+        const usernameElement = document.createElement("p");
+        usernameElement.className = "username";
+        usernameElement.textContent = user.login;
+        cardInfo.appendChild(usernameElement);
+
+        const locationElement = document.createElement("p");
+        locationElement.textContent = `Location: ${user.location}`;
+        cardInfo.appendChild(locationElement);
+
+        const profileElement = document.createElement("p");
+        profileElement.innerHTML = `Profile: <a href="${user.html_url}">${user.html_url}</a>`;
+        cardInfo.appendChild(profileElement);
+
+        const followersElement = document.createElement("p");
+        followersElement.textContent = `Followers: ${user.followers}`;
+        cardInfo.appendChild(followersElement);
+
+        const followingElement = document.createElement("p");
+        followingElement.textContent = `Following: ${user.following}`;
+        cardInfo.appendChild(followingElement);
+
+        const bioElement = document.createElement("p");
+        bioElement.textContent = `Bio: ${user.bio}`;
+        cardInfo.appendChild(bioElement);
+
+        card.appendChild(cardInfo);
+
+        return card;
+}
+
+       const cardsContainer = document.querySelector('.cards');
+
+        // 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>
@@ -24,13 +80,37 @@
 //     </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/safiyacodes/followers")
+        .then((response) => {
+                return response.data
+                })
+        .catch((error) => {
+                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)
 
+displaynewUser();
 
 // 🛠️ STEP 4: Fetch Followers Data
 // 1️⃣ Use the `followers_url` from the GitHub user data or 
@@ -50,4 +130,4 @@
 
 // 🌟 BONUS TIP:
 // 🎨 Style your cards using CSS to make them look polished!
-// 🤖 Try experimenting with different GitHub profiles!
+// 🤖 Try experimenting with different GitHub profiles!

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;
+}