From 7964a31131fffed3d7626e521454caeba5add2fe Mon Sep 17 00:00:00 2001 From: abelmore33 Date: Sun, 8 Jan 2023 20:48:10 -0500 Subject: [PATCH 1/5] Page elements created --- GitHubCard/index.js | 6 +++ package-lock.json | 100 +++++++++++++++++++++++++++++++++++++------- package.json | 4 +- 3 files changed, 95 insertions(+), 15 deletions(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 9423d23af..5dc9d65d1 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -1,8 +1,14 @@ +const { default: axios } = require("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/ */ +axios.get("https://api.github.com/users/abelmore33") +.then(res => { + console.log(res) +}) /* STEP 2: Inspect and study the data coming back, this is YOUR diff --git a/package-lock.json b/package-lock.json index 09ae31ca5..123ccf201 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "github-usercard", "version": "1.0.0", "license": "ISC", + "dependencies": { + "axios": "^1.2.2" + }, "devDependencies": { "eslint": "^8.10.0", "parcel-bundler": "^1.12.4" @@ -2343,8 +2346,7 @@ "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", - "dev": true + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" }, "node_modules/atob": { "version": "2.1.2", @@ -2373,6 +2375,29 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "node_modules/axios": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.2.tgz", + "integrity": "sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/babel-plugin-dynamic-import-node": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz", @@ -3238,7 +3263,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, "dependencies": { "delayed-stream": "~1.0.0" }, @@ -3969,7 +3993,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true, "engines": { "node": ">=0.4.0" } @@ -4886,6 +4909,25 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -6667,7 +6709,6 @@ "version": "1.51.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==", - "dev": true, "engines": { "node": ">= 0.6" } @@ -6676,7 +6717,6 @@ "version": "2.1.34", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz", "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==", - "dev": true, "dependencies": { "mime-db": "1.51.0" }, @@ -8565,6 +8605,11 @@ "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", "dev": true }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", @@ -12597,8 +12642,7 @@ "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", - "dev": true + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" }, "atob": { "version": "2.1.2", @@ -12618,6 +12662,28 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==", "dev": true }, + "axios": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.2.tgz", + "integrity": "sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==", + "requires": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + }, + "dependencies": { + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } + } + }, "babel-plugin-dynamic-import-node": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz", @@ -13348,7 +13414,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, "requires": { "delayed-stream": "~1.0.0" } @@ -13947,8 +14012,7 @@ "delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" }, "depd": { "version": "1.1.2", @@ -14692,6 +14756,11 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==", "dev": true }, + "follow-redirects": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -16065,14 +16134,12 @@ "mime-db": { "version": "1.51.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz", - "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==", - "dev": true + "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==" }, "mime-types": { "version": "2.1.34", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz", "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==", - "dev": true, "requires": { "mime-db": "1.51.0" } @@ -17613,6 +17680,11 @@ "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", "dev": true }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", diff --git a/package.json b/package.json index d85e259b0..47ec40fe1 100644 --- a/package.json +++ b/package.json @@ -19,5 +19,7 @@ "eslint": "^8.10.0", "parcel-bundler": "^1.12.4" }, - "dependencies": {} + "dependencies": { + "axios": "^1.2.2" + } } From 865537b287b36dc77288e1cd7794d8a7658ee3e7 Mon Sep 17 00:00:00 2001 From: abelmore33 Date: Sun, 8 Jan 2023 21:12:22 -0500 Subject: [PATCH 2/5] Completed text content of elements and classes --- GitHubCard/index.js | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 5dc9d65d1..c8068d664 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -55,7 +55,37 @@ const followersArray = []; */ - +const userCard = (obj) => { + //Elements + const cardWrapper = document.createElement('div'); + const imageUrl = document.createElement('img'); + const cardInfoDiv = document.createElement('div'); + const name = document.createElement('h3'); + const username = document.createElement('p'); + const userLocation = document.createElement('p'); + const profileText = document.createElement('p'); + const userAddress = document.createElement('a'); + const userFollowers = document.createElement('p'); + const userFollowing = document.createElement('p'); + const userBio = document.createElement('p'); + //Classes + cardWrapper.classList.add('card'); + cardInfoDiv.classList.add('card-info'); + name.classList.add('name'); + username.classList.add('username'); + //Text Content + imageUrl.src = obj.avatar_url; + name.textContent = obj.name; + username.textContent = obj.login; + userLocation.textContent = obj.location; + profileText.textContent = "Profile:"; + userAddress.textContent = obj.html_url; + userFollowers.textContent = `Followers: ${obj.followers}`; + userFollowing.textContent = `Following: ${obj.following}`; +console.log() +return cardWrapper; +} +userCard(); /* List of LS Instructors Github username's: tetondan From c83a53494a82cdece7849cb74f59011d8f8343f0 Mon Sep 17 00:00:00 2001 From: abelmore33 Date: Sun, 8 Jan 2023 21:21:13 -0500 Subject: [PATCH 3/5] Appended all elements --- GitHubCard/index.js | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index c8068d664..f95e3e979 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -74,16 +74,27 @@ const userCard = (obj) => { name.classList.add('name'); username.classList.add('username'); //Text Content - imageUrl.src = obj.avatar_url; - name.textContent = obj.name; - username.textContent = obj.login; - userLocation.textContent = obj.location; - profileText.textContent = "Profile:"; - userAddress.textContent = obj.html_url; - userFollowers.textContent = `Followers: ${obj.followers}`; - userFollowing.textContent = `Following: ${obj.following}`; -console.log() -return cardWrapper; + // imageUrl.src = obj.avatar_url; + // name.textContent = obj.name; + // username.textContent = obj.login; + // userLocation.textContent = obj.location; + // profileText.textContent = "Profile:"; + // userAddress.textContent = obj.html_url; + // userFollowers.textContent = `Followers: ${obj.followers}`; + // userFollowing.textContent = `Following: ${obj.following}`; + //Append + cardWrapper.appendChild(imageUrl); + cardWrapper.appendChild(cardInfoDiv); + cardInfoDiv.appendChild(name); + cardInfoDiv.appendChild(username); + cardInfoDiv.appendChild(userLocation); + cardInfoDiv.appendChild(profileText); + profileText.appendChild(userAddress); + cardInfoDiv.appendChild(userFollowers); + cardInfoDiv.appendChild(userFollowing); + cardInfoDiv.appendChild(userBio); + console.log(cardWrapper) + } userCard(); /* From 63848901e7db00cded93c40871c0bc63e3103a30 Mon Sep 17 00:00:00 2001 From: abelmore33 Date: Mon, 9 Jan 2023 19:55:05 -0500 Subject: [PATCH 4/5] Completed step 4 --- GitHubCard/index.js | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index f95e3e979..94f0c2c70 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -7,7 +7,10 @@ const { default: axios } = require("axios"); */ axios.get("https://api.github.com/users/abelmore33") .then(res => { - console.log(res) + cardClass.appendChild(userCard(res.data)); +}) +.catch(err => { + console.log("Error"); }) /* @@ -55,6 +58,8 @@ const followersArray = []; */ +const cardClass = document.querySelector('.cards'); + const userCard = (obj) => { //Elements const cardWrapper = document.createElement('div'); @@ -74,14 +79,14 @@ const userCard = (obj) => { name.classList.add('name'); username.classList.add('username'); //Text Content - // imageUrl.src = obj.avatar_url; - // name.textContent = obj.name; - // username.textContent = obj.login; - // userLocation.textContent = obj.location; - // profileText.textContent = "Profile:"; - // userAddress.textContent = obj.html_url; - // userFollowers.textContent = `Followers: ${obj.followers}`; - // userFollowing.textContent = `Following: ${obj.following}`; + imageUrl.src = obj.avatar_url; + name.textContent = obj.name; + username.textContent = obj.login; + userLocation.textContent = obj.location; + profileText.textContent = "Profile:"; + userAddress.textContent = obj.html_url; + userFollowers.textContent = `Followers: ${obj.followers}`; + userFollowing.textContent = `Following: ${obj.following}`; //Append cardWrapper.appendChild(imageUrl); cardWrapper.appendChild(cardInfoDiv); @@ -93,7 +98,11 @@ const userCard = (obj) => { cardInfoDiv.appendChild(userFollowers); cardInfoDiv.appendChild(userFollowing); cardInfoDiv.appendChild(userBio); - console.log(cardWrapper) +//appending to cards class + + + return cardWrapper + } userCard(); From 222890f0346668211ef3f7f3851e7fdd6c38ece7 Mon Sep 17 00:00:00 2001 From: abelmore33 Date: Mon, 9 Jan 2023 19:59:49 -0500 Subject: [PATCH 5/5] Completed step 5 --- GitHubCard/index.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/GitHubCard/index.js b/GitHubCard/index.js index 94f0c2c70..1e2120f9c 100644 --- a/GitHubCard/index.js +++ b/GitHubCard/index.js @@ -37,7 +37,22 @@ axios.get("https://api.github.com/users/abelmore33") user, and adding that card to the DOM. */ -const followersArray = []; +const followersArray = ['tetondan', + 'dustinmyers', + 'justsml', + 'luishrd', + 'bigknell']; + + followersArray.forEach(user => { + axios.get(`https://api.github.com/users/${user}`) +.then(res => { + cardClass.appendChild(userCard(res.data)); +}) +.catch(err => { + console.log("Error"); +}) + + }) /* STEP 3: Create a function that accepts a single object as its only argument.