done with proj, come back for stretch :D

GitHubCard/index.js

@@ -3,7 +3,30 @@
     (replacing the placeholder with your Github name):
     https://api.github.com/users/<your name>
 */
+import axios from "axios";
 
+const followersArray = ['tetondan',
+'dustinmyers',
+'justsml',
+'luishrd',
+'bigknell'];
+
+followersArray.forEach(e =>{
+  addMoreCards(e)
+})
+
+  function addMoreCards(name){
+    axios.get(`https://api.github.com/users/${name}`)
+    .then(response =>{
+        container.appendChild(gHubCard(response.data))
+    })
+    .catch(err => {
+      debugger
+    })
+  }
+
+
+
 /*
   STEP 2: Inspect and study the data coming back, this is YOUR
     github info! You will need to understand the structure of this
@@ -28,12 +51,18 @@
     user, and adding that card to the DOM.
 */
 
-const followersArray = [];
+// const followersArray = [
+//   'https://api.github.com/users/dustinmyers',
+//   'https://api.github.com/users/JordonP123',
+//   'https://api.github.com/users/justsml',
+//   'https://api.github.com/users/luishrd',
+//   'https://api.github.com/users/bigknell',
+// ]
 
 /*
   STEP 3: Create a function that accepts a single object as its only argument.
     Using DOM methods and properties, create and return the following markup:
-
+  
     <div class="card">
       <img src={image url of user} />
       <div class="card-info">
@@ -50,11 +79,66 @@ const followersArray = [];
     </div>
 */
 
+function gHubCard(obj){
+  //elements apart of gHub card;
+const containerDiv = document.createElement('div');
+const img = document.createElement('img');
+const secondContainerDiv = document.createElement('div');
+const h3 = document.createElement('h3');
+const pUser = document.createElement('p');
+const pLoc = document.createElement('p');
+const pProfile = document.createElement('p');
+const pFollowers = document.createElement('p');
+const pFollowing = document.createElement('p');
+const pBio = document.createElement('p');
+const anchor = document.createElement('a')
+
+//appending children
+containerDiv.appendChild(img);
+containerDiv.appendChild(secondContainerDiv);
+secondContainerDiv.appendChild(h3);
+secondContainerDiv.appendChild(pUser);
+secondContainerDiv.appendChild(pLoc);
+secondContainerDiv.appendChild(pProfile);
+secondContainerDiv.appendChild(pFollowers);
+secondContainerDiv.appendChild(pFollowing);
+secondContainerDiv.appendChild(pBio);
+pProfile.appendChild(anchor)
+
+
+//adding classes
+containerDiv.classList.add('card');
+secondContainerDiv.classList.add('card-info');
+h3.classList.add('name');
+pUser.classList.add('username');
+
+//adding textContent
+img.src = obj.avatar_url;
+h3.textContent = obj.name;
+pUser.textContent = obj.login;
+pLoc.textContent = 'Location';
+pLoc.textContent = obj.location;
+pProfile.textContent = 'Profile';
+anchor.href = obj.html_url;
+pFollowers.textContent = `Followers: ${obj.followers}`
+pFollowing.textContent = `Following: ${obj.following}`
+pBio.textContent = `Bio: ${obj.bio}`
+
+return containerDiv
+
+}
+//testing appends
+const container = document.querySelector('.cards');
+// console.log(container.appendChild(gHubCard()))
+
+
+
+
 /*
   List of LS Instructors Github username's:
-    tetondan
-    dustinmyers
-    justsml
-    luishrd
-    bigknell
+    'tetondan',
+    'dustinmyers',
+    'justsml',
+    'luishrd',
+    'bigknell'
 */

README.md

@@ -22,32 +22,32 @@ In this project we are going to be accessing the GitHub API and building a socia
 
 **Follow these steps to set up and work on your project:**
 
-* [ ] Create a forked copy of this project.
-* [ ] Clone your OWN version of the repository (Not Bloomtech's by mistake!).
-* [ ] Implement the project on your main branch, committing changes regularly.
-* [ ] Push commits: git push origin main.
+* [x] Create a forked copy of this project.
+* [x] Clone your OWN version of the repository (Not Bloomtech's by mistake!).
+* [x] Implement the project on your main branch, committing changes regularly.
+* [x] Push commits: git push origin main.
 
 **Follow these steps for completing your project.**
 
-* [ ] Copy link to canvas
+* [x] Copy link to canvas
 
 ### Project Setup
 
-* [ ] Navigate to the root of the project with your command line.
-* [ ] Run `npm install` to download any dependencies listed in the `package.json` file.
-* [ ] Run `npm start` to compile your project and launch a development server.
+* [x] Navigate to the root of the project with your command line.
+* [x] Run `npm install` to download any dependencies listed in the `package.json` file.
+* [x] Run `npm start` to compile your project and launch a development server.
 
 ### Axios Setup
 
 #### Installing Axios with npm
 
-* [ ] Navigate to the root of the project with your command line.
-* [ ] Run `npm install axios` to download the dependency (it will be added to the `package.json` file).
-* [ ] At the top of the `GitHubCard/index.js` file, type `import axios from 'axios';`
+* [x] Navigate to the root of the project with your command line.
+* [x] Run `npm install axios` to download the dependency (it will be added to the `package.json` file).
+* [x] At the top of the `GitHubCard/index.js` file, type `import axios from 'axios';`
 
 ### Part 1: Requesting Data from the GitHub API
 
-* [ ] Follow the instructions found in the `GitHubCard/index.js` file to request data from the GitHub API.
+* [x] Follow the instructions found in the `GitHubCard/index.js` file to request data from the GitHub API.
 
 ### Part 2: Create the component function
 

index.html

@@ -14,7 +14,7 @@
       </div>
       <div class="cards"></div>
     </div>
-    <script src="./GitHubCard/index.js"></script>
+        <script src="./GitHubCard/index.js"></script>
   </body>
 </html>
 <!-- Do NOT change anything here except TODO line -->

package.json

@@ -19,5 +19,7 @@
     "eslint": "^8.10.0",
     "parcel-bundler": "^1.12.4"
   },
-  "dependencies": {}
+  "dependencies": {
+    "axios": "^0.27.2"
+  }
 }