From 53fd0d6eb8da198efbe6becbc581ac646fe2382a Mon Sep 17 00:00:00 2001 From: svyatoslav-okshin Date: Fri, 17 Jan 2020 08:32:43 -0500 Subject: [PATCH] Met MVP --- .vscode/settings.json | 3 + GitHubCard/index.js | 164 +++++++++++++++++++++++++++++++++++++++++- index.html | 3 + 3 files changed, 168 insertions(+), 2 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 5c303ad69..ff5b84fea 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -1,8 +1,101 @@ /* Step 1: using axios, send a GET request to the following URL - (replacing the palceholder with your Github name): + (replacing the placeholder with your Github name): https://api.github.com/users/ */ + + +const cardsContainer = document.querySelector('.cards'); + +function cardCreator(obj) { + // Create Elements + const newCard = document.createElement('div'); + const newImg = document.createElement('img'); + const cardInfo = document.createElement('div'); + const name = document.createElement('h3'); + const userName = document.createElement('p'); + const location = document.createElement('p'); + const profile = document.createElement('p'); + const profileLink = document.createElement('a'); + const followers = document.createElement('p'); + const following = document.createElement('p'); + const bio = document.createElement('p'); + + // Create Class Name + newCard.classList.add('card'); + cardInfo.classList.add('card-info'); + name.classList.add('name'); + userName.classList.add('username'); + + // adding href to link + // const link = document.createAttribute('href'); + // profileLink.setAttributeNode(link); + + //Adding content to elements + // obj.forEach(cards => { + newImg.src = obj.avatar_url; + name.textContent = obj.name; + userName.textContent = obj.login; + location.textContent = obj.location; + profileLink.href = obj.html_url; + profileLink.textContent = obj.html_url; + followers.textContent = `Followers: ${obj.followers}`; + following.textContent = `Following: ${obj.following}`; + bio.textContent = obj.bio; + // }) + // Appending + newCard.appendChild(newImg); + newCard.appendChild(cardInfo); + cardInfo.appendChild(name); + cardInfo.appendChild(userName); + cardInfo.appendChild(location); + cardInfo.appendChild(profile); + cardInfo.appendChild(followers); + cardInfo.appendChild(following); + cardInfo.appendChild(bio); + profile.appendChild(profileLink); + + + + + // obj.forEach(cards => { + // newImg.src = obj.avatar_url; + // name.textContent = obj.name; + // userName.textContent = obj.login; + // location.textContent = obj.location; + // link.value = obj.html_url; + // profileLink.textContent = obj.html_url; + // followers.textContent = obj.followers; + // following.textContent = obj.following; + // bio.textContent = obj.bio; + // }) + + return newCard; + } + + const followersArray = [ + 'svyatokshin', + 'tetondan', + 'dustinmyers', + 'justsml', + 'luishrd', + 'bigknell', + 'steven-matos' + ]; + +followersArray.forEach(elem => { + axios.get(`https://api.github.com/users/${elem}`).then(response =>{ + console.log("Github Profile: ", response.data); + cardsContainer.appendChild(cardCreator(response.data)); + }) + .catch(err => { + console.log("The data was not returned", err); + }) +}) + + + + /* Step 2: Inspect and study the data coming back, this is YOUR github info! You will need to understand the structure of this data in order to use it to build your component function @@ -24,7 +117,19 @@ user, and adding that card to the DOM. */ -const followersArray = []; +// Create axios for followers + +axios.get("https://api.github.com/users/svyatokshin/following").then(response =>{ + console.log("Github Followers: ", response.data) + response.data.forEach(elem =>{ + followersArray.push(elem); + console.log("Followers Array: ", followersArray); + }) +}) +.catch(err => { + console.log("The data was not returned", err); +}) + /* Step 3: Create a function that accepts a single object as its only argument, Using DOM methods and properties, create a component that will return the following DOM element: @@ -46,6 +151,61 @@ const followersArray = []; */ + +// const cardsContainer = document.querySelector('.cards'); + +// function cardCreator(obj) { +// const newCard = document.createElement('div'); +// const newImg = document.createElement('img'); +// const cardInfo = document.createElement('div'); +// const name = document.createElement('h3'); +// const userName = document.createElement('p'); +// const location = document.createElement('p'); +// const profile = document.createElement('p'); +// const profileLink = document.createElement('a'); +// const followers = document.createElement('p'); +// const following = document.createElement('p'); +// const bio = document.createElement('p'); + +// newCard.classList.add('card'); +// cardInfo.classList.add('card-info'); +// name.classList.add('name'); +// userName.classList.add('username'); + + +// newCard.append(newImg); +// newCard.append(cardInfo); +// cardInfo.append(name); +// cardInfo.append(userName); +// cardInfo.append(location); +// cardInfo.append(profile); +// cardInfo.append(followers); +// cardInfo.append(following); +// cardInfo.append(bio); +// profile.append(profileLink); + + +// // adding href to link +// const link = document.createAttribute('href'); +// profileLink.setAttributeNode(link); + +// // obj.forEach(cards => { +// newImg.src = cards.avatar_url; +// name.textContent = cards.name; +// userName.textContent = cards.login; +// location.textContent = cards.location; +// link.value = cards.html_url; +// linkAddress.textContent = cards.html_url; +// followers.textContent = cards.followers; +// following.textContent = cards.following; +// bio.textContent = cards.bio; +// // }) + +// return newCard; +// } + +// cardsContainer.appendChild(cardCreator(followersArray)); + /* List of LS Instructors Github username's: tetondan dustinmyers diff --git a/index.html b/index.html index 9cf6e5c27..6f9538cc9 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,8 @@ + +
@@ -15,6 +17,7 @@
+