completed mvp

GitHubCard/index.js

@@ -1,9 +1,26 @@
+import axios from 'axios';  
 /*
   STEP 1: using axios, send a GET request to the following URL
     (replacing the placeholder with your Github name):
-    https://api.github.com/users/<your name>
+    https://api.github.com/users/anaizalfonso
 */
 
+const followersArray = ['tetondan', 'dustinmyers', 'justsml', 'luishrd', 'bigknell', 'anaizalfonso'];
+
+for (let i = 0; i < followersArray.length; i++) {
+  getGitCard(followersArray[i]);
+}
+
+function getGitCard(username) {
+
+  axios.get(`https://api.github.com/users/${username}`)
+.then(resp => {
+  document.querySelector('.cards').appenChild(githubCard(resp.data));
+})
+.catch(err => console.error(err))
+
+}
+
 /*
   STEP 2: Inspect and study the data coming back, this is YOUR
     github info! You will need to understand the structure of this
@@ -28,26 +45,70 @@
     user, and adding that card to the DOM.
 */
 
-const followersArray = [];
 
+
+function githubCard(gitInfo) {
+  const card = document.createElement('div');
+  const img = 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');
+
+  // <div class="card">
+  // <img src={image url of user} />
+  // <div class="card-info">
+  //   <h3 class="name">{users name}</h3>
+  //   <p class="username">{users user name}</p>
+  //   <p>Location: {users location}</p>
+  //   <p>Profile:
+  //     <a href={address to users github page}>{address to users github page}</a>
+  //   </p>
+  //   <p>Followers: {users followers count}</p>
+  //   <p>Following: {users following count}</p>
+  //   <p>Bio: {users bio}</p>
+  // </div>
+
+card.classList.add('card');
+cardInfo.classList.add('card-info');
+name.classList.add('name');
+login.classList.add('username');
+
+  img.src = gitInfo.avatar_url;
+  img.alt = "github user";
+  name.textContent = gitInfo.name;
+  login.textContent = gitInfo.login;
+  location.textContent = gitInfo.location;
+  profile.textContent = "Profile";
+  profileLink.textContent = "Link to profile";
+  profileLink.href = gitInfo.html_url;
+  followers.textContent = `Followers: ${gitInfo.followers}`;
+  following.textContent = `Following: ${gitInfo.following}`;
+  bio.textContent = gitInfo.bio;
+
+  card.appendChild(img);
+  card.appendChild(cardInfo);
+  cardInfo.appendChild(name);
+  cardInfo.appendChild(login);
+  cardInfo.appendChild(location);
+  cardInfo.appendChild(profile);
+  profile.appendChild(profileLink);
+  cardInfo.appendChild(followers);
+  cardInfo.appendChild(following);
+  cardInfo.appendChild(bio);
+
+  return card;
+}
 /*
   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">
-        <h3 class="name">{users name}</h3>
-        <p class="username">{users user name}</p>
-        <p>Location: {users location}</p>
-        <p>Profile:
-          <a href={address to users github page}>{address to users github page}</a>
-        </p>
-        <p>Followers: {users followers count}</p>
-        <p>Following: {users following count}</p>
-        <p>Bio: {users bio}</p>
-      </div>
-    </div>
+
 */
 
 /*

README.md

@@ -22,27 +22,27 @@ 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).
+* [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).
 * [ ] At the top of the `GitHubCard/index.js` file, type `import axios from 'axios';`
 
 ### Part 1: Requesting Data from the GitHub API