done

components/GithubCard.js

@@ -5,6 +5,47 @@
 // 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/sawda-oomar')
+  .then(response => {
+    const userData = response.data;
+    console.log(userData);
+
+    const Card = createUserCard(userData);
+
+    document.querySelector('.cards').appendChild(Card);
+  })
+  .catch(error => {
+    console.error('Error The Personal data:', error);
+  });
+
+  axios.get('https://api.github.com/users/mohamed-Abdalle')
+  .then(response => {
+    const userData = response.data;
+    console.log(userData);
+
+    const Card = createUserCard(userData);
+
+    document.querySelector('.cards').appendChild(Card);
+  })
+  .catch(error => {
+    console.error('Error The Personal data:', error);
+  });
+
+  axios.get('https://api.github.com/users/saidmahad')
+  .then(response => {
+    const userData = response.data;
+    console.log(userData);
+
+    const Card = createUserCard(userData);
+
+    document.querySelector('.cards').appendChild(Card);
+  })
+  .catch(error => {
+    console.error('Error The Personal data:', error);
+  });
+
+
+
 
 // 🛠️ STEP 2: Create a Function to Build the Card
 // 1️⃣ Write a function that takes a **user object** as a parameter.
@@ -25,12 +66,41 @@
 //
 // 3️⃣ Return the created card element.
 
+
+    function createUserCard(user) {
+      const card = document.createElement('div');
+      card.classList.add('card');
+
+      card.innerHTML = `
+        <img src="${user.avatar_url}" alt="${user.name}" />
+        <div class="card-info">
+          <h3>${user.name || "Magac la'aan"}</h3>
+          <p><em>${user.login}</em></p>
+          <p>Location: ${user.location || "Lama hayo"}</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 || "  emty"}</p>
+        </div>
+      `;
+
+      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.
 
+function appendCardToDOM(card) {
+  const cardsContainer = document.querySelector('.cards');
+  cardsContainer.appendChild(card);
+}
+
 
 // 🛠️ STEP 4: Fetch Followers Data
 // 1️⃣ Use the `followers_url` from the GitHub user data or 
@@ -41,6 +111,20 @@
 //     - Create a card using the function.
 //     - Append the card to the `.cards` container.
 
+axios.get('https://api.github.com/users/sawda-oomar/followers')
+  .then(response => {
+    const followers = response.data;
+    console.log(followers);
+
+    followers.forEach(follower => {
+      const followerCard = createUserCard(follower);
+      appendCardToDOM(followerCard);
+    });
+  })
+  .catch(error => {
+    console.error('Error followers:', error);
+  });
+
 
 // 🛠️ STRETCH: Add More GitHub Users
 // 1️⃣ Create an array `followersArray` with at least 5 GitHub usernames.
@@ -51,3 +135,54 @@
 // 🌟 BONUS TIP:
 // 🎨 Style your cards using CSS to make them look polished!
 // 🤖 Try experimenting with different GitHub profiles!
+
+
+const followersArray = [
+  "Moha-Bozka",
+  "mohamed-Abdalle",
+  "saidmahad",
+  "sawda-oomar",
+  "duraanali"
+];
+
+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 data for ${username}:`, error);
+    });
+});
+
+
+document.getElementById('theme-toggle').addEventListener('click', () => {
+  document.body.classList.toggle('dark');
+});
+
+document.getElementById('searchBtn').addEventListener('click', () => {
+  const username = document.getElementById('searchInput').value.trim();
+  if (username) {
+    document.querySelector('.cards').innerHTML = ''; // clean cards
+    showLoading();
+    axios.get(`https://api.github.com/users/${username}`)
+      .then(response => {
+        const card = createUserCard(response.data);
+        document.querySelector('.cards').appendChild(card);
+      })
+      .catch(error => {
+        alert("User not found!");
+        console.error(error);
+      })
+      .finally(hideLoading);
+  }
+});
+
+function showLoading() {
+  document.getElementById('loading-spinner').classList.remove('hidden');
+}
+function hideLoading() {
+  document.getElementById('loading-spinner').classList.add('hidden');
+}
+

index.css

@@ -89,6 +89,12 @@ body {
 
 .cards {
   width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  padding: 20px;
+
 }
 
 .card {
@@ -101,6 +107,10 @@ body {
   margin-bottom: 30px;
 }
 
+.card:hover{
+  transform: translateY(-8px);
+}
+
 .card img {
   width: 150px;
   height: 150px;
@@ -123,4 +133,60 @@ body {
   margin: 3px 0 10px;
 }
 
+.card a {
+  color: #1e90ff;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.card a:hover {
+  text-decoration: underline;
+}
+
+body.dark {
+  background-color: #121212;
+  color: #eee;
+}
+
+body.dark .card {
+  background-color: #1e1e1e;
+  color: #ddd;
+}
+
+#theme-toggle {
+  margin: 20px auto;
+  display: block;
+  padding: 10px 20px;
+  background: #1e90ff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+#searchInput, #searchBtn {
+  margin: 10px;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+}
+
+#searchBtn {
+  background-color: #28a745;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+#loading-spinner {
+  text-align: center;
+  font-weight: bold;
+  padding: 10px;
+  color: #1e90ff;
+}
+.hidden {
+  display: none;
+}
+
+
 

index.html

@@ -7,17 +7,25 @@
 
   </head>
   <body>
+    <input type="text" id="searchInput" placeholder="Enter GitHub username" />
+<button id="searchBtn">Search</button>
+
+<div id="loading-spinner" class="hidden">Loading...</div>
+
     <div class="container">
       <div class="header">
         <img src="assets/gabilogo.png" alt="Gabi School Logo"/>
         <p>❤️'s</p>
         <img src="./assets/githublogo.png" alt="GitHub Logo" />
       </div>
-      <div class="cards"></div>
+      <div class="cards"><button id="theme-toggle">🌓 Toggle Theme</button>
+</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>
 </html>
 <!-- Do NOT change anything here except TODO line -->