diff --git a/components/GithubCard.js b/components/GithubCard.js index 4cc30e4..f2e70e4 100644 --- a/components/GithubCard.js +++ b/components/GithubCard.js @@ -5,6 +5,13 @@ // 4️⃣ Pass the data into a function to create a user card. // 5️⃣ Append the created card to the `.cards` container in the DOM. + const Api_url = "https://api.github.com/users/sawda-oomar" + + function fenchget () { + return axios.get ( Api_url).then((response) => 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. @@ -25,12 +32,65 @@ // // 3️⃣ Return the created card element. + function createCard(user) { + const maincards= document.querySelector(".cards") + // Elements + const card = document.createElement('div'); + card.className=('card'); + + const avatar = document.createElement('img'); + avatar.src = user.avatar_url; + + const cardInfo = document.createElement('div'); + cardInfo.className=('card-info'); + + const name = document.createElement('h3'); + name.className=('name'); + name.textContent = user.name; + + const username = document.createElement('p'); + username.className=('username'); + username.textContent = user.login; + + const location = document.createElement('p'); + location.textContent = `Location: ${user.location}`; + + const profile = document.createElement('p'); + profile.textcontent = "profile:" + const profilelink = document.createElement("a") + profilelink.textcontent = user.html_url + profilelink.href = user.html_url + + const followers = document.createElement('p'); + followers.textContent = `"Followers:" ${user.followers}`; + + const following = document.createElement('p'); + following.textContent = `"Following:" ${user.following}`; + + const bio = document.createElement('p'); + bio.textContent = `"Bio:" ${user.bio}`; + + // Append elements + cardInfo.append(name, username, location, profile, followers, following, bio); + card.append(avatar, cardInfo); + profile.append(profilelink) + maincards.append(card) + 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 displaycreatcard () { + + fenchget().then ((user) => { + createCard(user) + }) + } + + displaycreatcard() // 🛠️ STEP 4: Fetch Followers Data // 1️⃣ Use the `followers_url` from the GitHub user data or @@ -40,7 +100,26 @@ // 4️⃣ For each follower: // - Create a card using the function. // - Append the card to the `.cards` container. + + const followers_url = "https://api.github.com/users/sawda-oomar/followers" + + function fenchget2 () { + return axios.get ( followers_url).then((response) => response.data) + .catch((error) => console.log (error)) + } + + function displaycreatcard2 () { + + fenchget2 () .then((followers) => { + followers.forEach(follower => { + return axios.get ( follower.url).then((response) => createCard(response.data)) + .catch((error) => console.log (error)) + }); + }) + + } + displaycreatcard2 () // 🛠️ STRETCH: Add More GitHub Users // 1️⃣ Create an array `followersArray` with at least 5 GitHub usernames.