waan dhamaystiray week7

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

components/GithubCard.js

@@ -21,8 +21,7 @@
 //         <p>Following: {following}</p>
 //         <p>Bio: {bio}</p>
 //       </div>
-//     </div>
-//
+//     </div>\]==================//
 // 3️⃣ Return the created card element.
 
 
@@ -42,12 +41,199 @@
 //     - Append the card to the `.cards` container.
 
 
+const api_url = "https://api.github.com/users/naqib-axmed"
+
+function fetchapi () {
+        return axios.get (api_url) 
+        .then ((response) => {
+                console.log(response.data) 
+
+                return response.data
+
+
+
+        })
+        .catch ((error) => {
+                console.log(error)
+        })
+
+
+}
+
+
+
+
+ function api_card (information) {
+
+
+
+     const maindiv = document.querySelector(".cards") 
+      // maindiv.innerHTML = "";
+
+//     <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>
+
+
+
+const usercard = document.createElement("div")
+usercard.className = "card"
+
+const imgs = document.createElement("img")
+ imgs.src = information.avatar_url
+ imgs.alt = "git-hub-data"
+
+ const seconddiv = document.createElement("div")
+ seconddiv.className = "card-info"
+
+const titles = document.createElement("h3")
+titles.className = "name"
+titles.textContent = information.name 
+
+const ptag = document.createElement("p")
+ptag.className = "username"
+ptag.textContent = information.login
+
+const ptag2 = document.createElement("p")
+ptag2.textContent = "Location: " + information.location
+
+ const ptag3 = document.createElement("p");
+  ptag3.innerHTML = `Profile: <a href="${information.html_url}">${information.html_url}</a>`;
+
+
+//  const ptag3 = document.createElement("p");
+//     const linkk = document.createElement("a");
+//     linkk.href = information.html_url;
+//     linkk.textContent = information.html_url;
+//     ptag3.textContent = "Profile: ";
+const ptag4 = document.createElement("P")
+ptag4.textContent ="Followers: " + information.followers
+
+const ptag5 = document.createElement("p")
+ptag5.textContent = "Following: " + information.following 
+
+const ptag6 = document.createElement("p")
+ptag6.textContent = "Bio: " + information.bio
+
+maindiv.append(usercard)
+usercard.append(imgs)
+usercard.append(seconddiv)
+seconddiv.append(titles)
+seconddiv.append(ptag)
+seconddiv.append(ptag2)
+//ptag3.appendChild(linkk)
+seconddiv.append(ptag3)
+seconddiv.append(ptag4)
+seconddiv.append(ptag5)
+seconddiv.append(ptag6)
+return usercard
+
+
+
+
+
+
+
+
+}
+
+
+function display () {
+         fetchapi()
+        .then((information) => {
+                api_card(information)
+
+        })
+}
+
+
+
+
+ function fetchFollowers() {
+  return axios.get("https://api.github.com/users/naqib-axmed/followers")
+    .then((response) => {
+      console.log(response.data)
+      return response.data
+    })
+    .catch((error) => {
+      console.log(error)
+    });
+}
+
+function displayAll() {
+  const maindiv = document.querySelector(".cards")
+  maindiv.innerHTML = "";
+
+  fetchapi()
+    .then((information) => {
+      api_card(information)
+    });
+
+  fetchFollowers()
+    .then((followers) => {
+      followers.forEach((follower) => {
+        axios.get(follower.url)
+          .then((response) => {
+            api_card(response.data)
+          })
+          .catch((error) => console.log(error))
+      })   
+    })
+}
+
+
+
+
+
+
+
+
+
 // 🛠️ 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`.
 
+const followersArray = ["duraanali", "sahramayo", "ROWDA73", "saynis","m-salah19"];
+
+followersArray.forEach(username => {
+  axios.get(`https://api.github.com/users/${username}`)
+    .then(response => {
+      api_card(response.data);
+    })
+    .catch(error => console.log(error));
+});
+
+displayAll();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 // 🌟 BONUS TIP:
 // 🎨 Style your cards using CSS to make them look polished!
 // 🤖 Try experimenting with different GitHub profiles!
+
+
+
+

index.html

@@ -16,7 +16,7 @@
       <div class="cards"></div>
     </div>
     <!-- This is the axios CDN -->
-    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script src="./components/GithubCard.js"></script>
   </body>
 </html>