Week 7 JavaScript Assignment - Mohamed Jisow - cards complete

components/GithubCard.js

@@ -1,53 +1,19 @@
-// 🛠️ 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!
+// components/GithubCard.js
+function GithubCard(user) {
+  const card = document.createElement("div");
+  card.className = "card";
+
+  card.innerHTML = `
+    <img src="${user.avatar_url}" alt="${user.login} avatar" />
+    <div class="card-info">
+      <h3 class="name">${user.name ?? user.login}</h3>
+      <p class="username">${user.login}</p>
+      <p>Location: ${user.location ?? "Not available"}</p>
+      <p>Profile: <a href="${user.html_url}" target="_blank">${user.html_url}</a></p>
+      <p>Followers: ${user.followers}</p>
+      <p>Following: ${user.following}</p>
+      <p>Bio: ${user.bio ?? "No bio provided"}</p>
+    </div>
+  `;
+  return card;
+}

index.css

@@ -122,5 +122,52 @@ body {
   font-style: italic;
   margin: 3px 0 10px;
 }
+/* ========== Card Styling ========== */
+.card {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
+  padding: 15px 20px;
+  margin: 20px auto;
+  max-width: 600px;
+}
+
+.card img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%; /* makes it round */
+  object-fit: cover;
+  border: 3px solid #ddd;
+}
+
+.card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.card-info h3 {
+  margin: 0;
+  font-size: 20px;
+  color: #111;
+}
+
+.card-info p {
+  margin: 0;
+  color: #444;
+  font-size: 14px;
+}
+
+.card-info a {
+  color: #0073e6;
+  text-decoration: none;
+}
+
+.card-info a:hover {
+  text-decoration: underline;
+}
 
 

index.html

@@ -11,13 +11,14 @@
       <div class="header">
         <img src="assets/gabilogo.png" alt="Gabi School Logo"/>
         <p>❤️'s</p>
-        <img src="./assets/githublogo.png" alt="GitHub Logo" />
+        <img src="./assets/githublogo.jpg" alt="GitHub Logo" />
       </div>
       <div class="cards"></div>
     </div>
     <!-- This is the axios CDN -->
-    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-    <script src="./components/GithubCard.js"></script>
-  </body>
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<script src="./components/GithubCard.js"></script>
+<script src="./js/index.js"></script>
+</body>
 </html>
 <!-- Do NOT change anything here except TODO line -->

js/index.js

@@ -0,0 +1,42 @@
+// js/index.js
+const cards = document.querySelector(".cards");
+
+// A list of people (you can add more later)
+const people = [
+  {
+    name: "Duraan Ali",
+    login: "duraanali",
+    avatar_url: "./assets/duran.jpg",
+    location: "MN",
+    html_url: "https://github.com/duraanali",
+    followers: 25,
+    following: 50,
+    bio: "Frontend Developer & Teacher"
+  },
+  {
+    name: "Mohamed Jisow",
+    login: "Mjisow",
+    avatar_url: "./assets/personal 1.jpg",
+    location: "WA",
+    html_url: "https://github.com/mjisow",
+    followers: 10,
+    following: 35,
+    bio: "Web Developer"
+  },
+  {
+    name: "Gabi School",
+    login: "gabischool",
+    avatar_url: "./assets/gabilogo.png",
+    location: "MN",
+    html_url: "https://github.com/gabischool",
+    followers: 85,
+    following: 10,
+    bio: "School of Coding"
+  }
+];
+
+// Build a card for each person
+people.forEach(person => {
+  const card = GithubCard(person);
+  cards.appendChild(card);
+});