diff --git a/components/GithubCard.js b/components/GithubCard.js index 4cc30e4..653d16e 100644 --- a/components/GithubCard.js +++ b/components/GithubCard.js @@ -5,6 +5,15 @@ // 4️⃣ Pass the data into a function to create a user card. // 5️⃣ Append the created card to the `.cards` container in the DOM. +// answers step 1 +axios.get('https://api.github.com/users/mohamed-Abdalle') + .then(response => { + console.log(response.data); + createGithubCard(response.data); + }) + .catch(error => { + console.error('Error fetching GitHub 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 +34,49 @@ // // 3️⃣ Return the created card element. +function createUserCard(user) { + const card = document.createElement('div'); + card.classList.add('card'); + + card.innerHTML = ` + ${user.name} +
+

${user.name || "Magac la'aan"}

+

${user.login}

+

Location: ${user.location || "Lama hayo"}

+

Profile: ${user.html_url}

+

Followers: ${user.followers}

+

Following: ${user.following}

+

Bio: ${user.bio || "Ma jiro bio"}

+
+ `; + + 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. +axios.get('https://api.github.com/users/mohamed-Abdalle/followers') + .then(response => { + response.data.forEach(follower => { + axios.get(`https://api.github.com/users/${follower.login}`) + .then(res => { + const followerCard = createUserCard(res.data); + document.querySelector('.cards').appendChild(followerCard); + }) + .catch(err => { + console.error("Follower xog lama helin:", err); + }); + }); + }) + .catch(error => { + console.error("Xogta followers lama helin:", error); + }); + // 🛠️ STEP 4: Fetch Followers Data // 1️⃣ Use the `followers_url` from the GitHub user data or @@ -47,6 +93,26 @@ // 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 = [ + 'mohadaahir', + 'mohamed-Moha-Bozka', + 'm-salah19', + 's-hariri', + 'u-mar' +]; + +followersArray.forEach(username => { + axios.get(`https://api.github.com/users/${username}`) + .then(response => { + const userCard = createUserCard(response.data); + document.querySelector('.cards').appendChild(userCard); + }) + .catch(error => { + console.error(`Xog lama helin: ${username}`, error); + }); +}); + + // 🌟 BONUS TIP: // 🎨 Style your cards using CSS to make them look polished! diff --git a/index.css b/index.css index d97bce9..7c34ca2 100644 --- a/index.css +++ b/index.css @@ -124,3 +124,4 @@ body { } +