From 58dfaf3fdea6e7af122f56bb3f901d58060f3f7c Mon Sep 17 00:00:00 2001 From: StepbyStepp <91485842+SteppbySteph@users.noreply.github.com> Date: Mon, 21 Feb 2022 16:31:18 +0100 Subject: [PATCH 01/12] fetching repos --- code/script.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/code/script.js b/code/script.js index e69de29b..b448402a 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,19 @@ +const projects = document.getElementById('projects') + +const username = 'SteppbySteph' +const USER_URL = `https://api.github.com/users/${username}/repos` + +//const USER_URL =('https://api.github.com/users/SteppbySteph/repos') +// const REPOS_URL = + + +//----FETCHING ALL REPOS----// +const fetchUserRepos = () => { + fetch(USER_URL) + .then(res => res.json()) + .then(data => { + console.log('repos', data) + }) +} + +fetchUserRepos() \ No newline at end of file From ca37893d29b6def6f33397fc8f93b04058852245 Mon Sep 17 00:00:00 2001 From: StepbyStepp <91485842+SteppbySteph@users.noreply.github.com> Date: Mon, 21 Feb 2022 17:15:30 +0100 Subject: [PATCH 02/12] fetching userProfile and avatar --- code/script.js | 34 ++++++++++++++++++++++++++++++++-- code/style.css | 5 +++++ 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/code/script.js b/code/script.js index b448402a..4c28c5b2 100644 --- a/code/script.js +++ b/code/script.js @@ -1,19 +1,49 @@ const projects = document.getElementById('projects') const username = 'SteppbySteph' -const USER_URL = `https://api.github.com/users/${username}/repos` +const USER_PROFILE = `https://api.github.com/users/${username}` +const USER_REPO = `https://api.github.com/users/${username}/repos` //const USER_URL =('https://api.github.com/users/SteppbySteph/repos') // const REPOS_URL = +//----USER NAME & PROFILE----// + +const getProfile = () =>{ + fetch(USER_PROFILE) + .then(res => res.json()) + .then(data => { + console.log('user', data) + + const user = data.login + const avatar = data.avatar_url + projects.innerHTML += ` +

Username: ${user}

+ + ` + + + }) +} + +getProfile() + + + + //----FETCHING ALL REPOS----// const fetchUserRepos = () => { - fetch(USER_URL) + fetch(USER_REPO) .then(res => res.json()) .then(data => { console.log('repos', data) + + const allRepos = data.length + projects.innerHTML += `${allRepos}` }) + + } fetchUserRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..c93943b3 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,8 @@ body { background: #FFECE9; +} + +.avatar { + width: 3rem; + border-radius: 50%; } \ No newline at end of file From df1ffb2f39912a044bf7a62fb3238e8d3874a5a1 Mon Sep 17 00:00:00 2001 From: StepbyStepp <91485842+SteppbySteph@users.noreply.github.com> Date: Mon, 21 Feb 2022 20:45:28 +0100 Subject: [PATCH 03/12] added list of repos --- code/script.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/code/script.js b/code/script.js index 4c28c5b2..f79cfa57 100644 --- a/code/script.js +++ b/code/script.js @@ -3,6 +3,7 @@ const projects = document.getElementById('projects') const username = 'SteppbySteph' const USER_PROFILE = `https://api.github.com/users/${username}` const USER_REPO = `https://api.github.com/users/${username}/repos` +//let repoName //const USER_URL =('https://api.github.com/users/SteppbySteph/repos') // const REPOS_URL = @@ -33,17 +34,22 @@ getProfile() //----FETCHING ALL REPOS----// -const fetchUserRepos = () => { +const getRepos = () => { fetch(USER_REPO) .then(res => res.json()) .then(data => { - console.log('repos', data) - - const allRepos = data.length - projects.innerHTML += `${allRepos}` + //console.log('repos', data) + + data.forEach((item) => { + console.log('repo', item.name) + + const repoName = item.name + projects.innerHTML += `${repoName}` + }) + }) } -fetchUserRepos() \ No newline at end of file +getRepos() \ No newline at end of file From 793881ac035b6b09f42f21712884860ac3da7e62 Mon Sep 17 00:00:00 2001 From: StepbyStepp <91485842+SteppbySteph@users.noreply.github.com> Date: Tue, 22 Feb 2022 21:12:00 +0100 Subject: [PATCH 04/12] extracted API data for pull requests and commits --- code/index.html | 13 ++- code/script.js | 243 ++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 223 insertions(+), 33 deletions(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..23310e61 100644 --- a/code/index.html +++ b/code/index.html @@ -8,9 +8,16 @@ -

GitHub Tracker

-

Projects:

-
+

GitHub Tracker

+ +
+
+ + + +
+ diff --git a/code/script.js b/code/script.js index f79cfa57..21b61484 100644 --- a/code/script.js +++ b/code/script.js @@ -1,55 +1,238 @@ const projects = document.getElementById('projects') +const profile = document.getElementById('profile') +const repos = document.getElementById('repos') -const username = 'SteppbySteph' -const USER_PROFILE = `https://api.github.com/users/${username}` -const USER_REPO = `https://api.github.com/users/${username}/repos` -//let repoName +const username = 'StephannieMedenilla' +const USER_PROFILE = `https://api.github.com/users/SteppbySteph` +const USER_REPO = `https://api.github.com/users/SteppbySteph/repos` -//const USER_URL =('https://api.github.com/users/SteppbySteph/repos') -// const REPOS_URL = + + +const GITHUB_TOKEN = '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' +const options = { + method: 'GET', + headers: { + Authorization: `token ${GITHUB_TOKEN}` + } +} //----USER NAME & PROFILE----// const getProfile = () =>{ - fetch(USER_PROFILE) + fetch(USER_PROFILE, options) .then(res => res.json()) .then(data => { - console.log('user', data) + //console.log('user', data) - const user = data.login + const user = data.name const avatar = data.avatar_url - projects.innerHTML += ` -

Username: ${user}

- - ` - + profile.innerHTML += ` +

Username: ${user}

+ + ` - }) -} + }) + } getProfile() + //----FETCHING ALL REPOS----// +// const getRepos = () => { +// fetch(USER_REPO, options) +// .then(res => res.json()) +// .then(data => { +// console.log('repos', data) + +// forkedRepos = data.filter((repo) => repo.name.startsWith('project-')) +// forkedRepos.forEach((repo) => { + +// const repoName = repo.name +// projects.innerHTML += ` +//

Forked repo:${repoName}

+//

description

+// ` +// }) +// getPullRequests(forkedRepos) +// const getPullRequests = (repos) => { +// const USER_PR = `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100` +// forkedRepos.forEach(repo => { +// fetch(USER_PR, options) +// .then(res => res.json()) +// .then(data => { +// console.log('PR', data) + +// }) + +// }) +// } - -//----FETCHING ALL REPOS----// const getRepos = () => { - fetch(USER_REPO) + fetch(USER_REPO, options) .then(res => res.json()) .then(data => { - //console.log('repos', data) - - data.forEach((item) => { - console.log('repo', item.name) + console.log('repos', data) + + // Creating constsant for my filtered repos + forkedRepos = data.filter((repo) => repo.name.startsWith('project-')) + + // forEach function to create HTML elements & pull requests + forkedRepos.forEach((repo) => { + + // Getting Repo Name + repoName = repo.name; + + + // Getting Most Recent Push Date + pushDate = repo.pushed_at.substr(0, 10) + + //Getting the Default Branch + defaultBranch = repo.default_branch + + //Getting the URL of the repo + urlRepo = repo.html_url + + // Step: Find the necessary info and add it to your innerHTML section below: + + // Creating Project InnerHTML + projects.innerHTML += ` +

Forked repo:${repoName}

+

Most recent push date: ${pushDate}

+

Name of default branch: ${defaultBranch}

+

URL to the Github repo: ${urlRepo}

+

Number of commits:

+ ` + + // Fetch for all pull requests + const USER_NAME = repo.owner.login + const USER_PR = `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`; + fetch(USER_PR, options) + .then(res => res.json()) + .then(pullRequests => { + //console.log('PR', data) + const myPR = pullRequests.find((pull) => + pull.user.login === repo.owner.login + ) + console.log(myPR) + + if(myPR) { + getCommitNr(myPR, repo.name) + } else { + document.getElementById(`commit-${repo.name}`).innerHTML += '0' + } + + // pull.forEach((pull) => { + // if (pull.user.login === repo.owner.login) { + // console.log('step pull', pull) + // } + // }) + + }) + //console.log('PR user', ) + //console.log('My pull requests', myPR) + + }) - const repoName = item.name - projects.innerHTML += `${repoName}` - }) - }) - -} + } + + const getCommitNr = (myPull, myRepoName) =>{ + fetch(myPull.commits_url) + .then(res => res.json()) + .then((commit) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += commit.length + }) + + + } + + // Here you need to filter your data to only include your own pull requests + // After you have a filtered list of your pull requests, you need to add them to your innerHTML section above + + // Correct - you don't need to make a new fetch for every thing you need. Some of these fetches will include multiple data + + // I have one function which builds the header which includes my username and avatar, just like you. + // It makes sense to make it as one function because it doesn't need to iterate + + // For the project sections, where you need to add information from mulitple fetches into the same "individual project block" (i don't know what to call it) + // It makes better sense to keep it inside the same function / or inside the same "forEach" or "for" loop + + + + // const commitURL = repo.commits_url + // console.log('commitURL', commitURL) + // fetch(commitURL, options) + // .then(res => res.json()) + // .then(data => { + // console.log('commits', data) + // }) + + + + + +getRepos() + + //----FETCHING ALL PULL REQUESTS----// + + +// These are the requirements for the project: + +// A list of all repos that are forked from Technigo (You completed this! Yay) +// Your username and profile picture (You completed this! Yay) +// Most recent update (push) for each repo (I understood this as the date of the last push) (You completed this! Yay) +// Name of your default branch for each repo (I understood this as the name of the repo) (You completed this! Yay) + + +// URL to the actual github repo. You can find that in your USER_REPO fetch (repoLink = repo.html_url), insert in e.g. line 84 +// Yes. for every repo which is why it should be inside the forEach loop. + +// Number of commits for each repo. You need to do a fetch for this one inside your forEach loop. The url for this is repo.git_commits_url +// ---- This will return an array with all of your commits for each repo. To get the number of commits, you can use array.length (replace array with the name of your json data) + +// Last steps: Chart.js (I don't know anything about this, just started) + +// Media Queries in CSS + +// Before I leave: + +// I'm going for blue too. No more haha. + +// If you want to see the information I included in mine, click here: +// https://github-tracker-week7.netlify.app/ +// The only thing I'm missing is the chart & media queries - so we're almost just as far as each other + +// The link to my github repo is here, if you want to read the code (if you get stuck) +// https://github.com/michaelchangdk/project-github-tracker + + + + + + + + + + + + + + + + + + +// pushDate = repo.pushed_at.substr(0, 10) + +// This section is for fun :) >>>>>> +// pushYear = pushDate.substr(0, 4) +// pushMonthRaw = pushDate.substr(5, 2) +// pushDay = pushDate.substr(8, 2) +// console.log(pushYear) +// console.log(pushDate) -getRepos() \ No newline at end of file +// if (pushDay < 10) { +// pushDay = pushDay.replace("0", "") +// } \ No newline at end of file From 58de0f3cbc6921f15f80a1299f4dc559dc4e4738 Mon Sep 17 00:00:00 2001 From: StepbyStepp <91485842+SteppbySteph@users.noreply.github.com> Date: Thu, 24 Feb 2022 16:20:47 +0100 Subject: [PATCH 05/12] changed styling all files, added chart.js, made responsive --- code/chart.js | 35 +++++++- code/index.html | 26 +++--- code/script.js | 218 ++++++++++-------------------------------------- code/style.css | 131 ++++++++++++++++++++++++++++- 4 files changed, 219 insertions(+), 191 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..e43e8646 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,37 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') -//"Draw" the chart here 👇 +// Creating a function which is invoked in js.file. +const showChart = (repos) => { + Chart.defaults.font.size = 18; + + const data = { + labels: ['Completed projects', 'Remaining projects'], + datasets: [{ + data: [repos, 19-repos], + backgroundColor: ['rgb(27, 20, 100)', 'rgb(255, 255, 0)'], + borderWidth: 2, + borderColor: 'rgb(27, 20, 100)', + hoverBorderWidth:3, + hoverBorderColor: 'rgb(27, 20, 100)', + }] + }; + + const config = { + type: 'doughnut', + data: data, + options: { + plugins: { + legend: { + display: true, + position: 'bottom', + labels: { + color: 'rgb(27, 20, 100)', + } + } + } + } + }; + + const myChart = new Chart(ctx, config); +} diff --git a/code/index.html b/code/index.html index 23310e61..55da654d 100644 --- a/code/index.html +++ b/code/index.html @@ -6,23 +6,23 @@ Project GitHub Tracker + +

GitHub Tracker

- -
-
- - - -
- - - - - +
+
+
+
+
+

Technigo projects

+ +
+
+ + \ No newline at end of file diff --git a/code/script.js b/code/script.js index 21b61484..2ff412ef 100644 --- a/code/script.js +++ b/code/script.js @@ -8,7 +8,7 @@ const USER_REPO = `https://api.github.com/users/SteppbySteph/repos` -const GITHUB_TOKEN = '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' +const GITHUB_TOKEN = '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' const options = { method: 'GET', headers: { @@ -23,216 +23,86 @@ const getProfile = () =>{ fetch(USER_PROFILE, options) .then(res => res.json()) .then(data => { - //console.log('user', data) - const user = data.name const avatar = data.avatar_url profile.innerHTML += ` -

Username: ${user}

- +
+ +

${user}

+
` - }) } getProfile() - - //----FETCHING ALL REPOS----// -// const getRepos = () => { -// fetch(USER_REPO, options) -// .then(res => res.json()) -// .then(data => { -// console.log('repos', data) - -// forkedRepos = data.filter((repo) => repo.name.startsWith('project-')) -// forkedRepos.forEach((repo) => { - -// const repoName = repo.name -// projects.innerHTML += ` -//

Forked repo:${repoName}

-//

description

-// ` -// }) -// getPullRequests(forkedRepos) -// const getPullRequests = (repos) => { -// const USER_PR = `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100` -// forkedRepos.forEach(repo => { -// fetch(USER_PR, options) -// .then(res => res.json()) -// .then(data => { -// console.log('PR', data) - -// }) - -// }) -// } +//----REPOSITORIES WITH DATA OF NAME, PUSH DATE, DEFAULT BRANCH, URL, PULL REQUESTS AND getCommitNr ()----// const getRepos = () => { fetch(USER_REPO, options) .then(res => res.json()) .then(data => { - console.log('repos', data) - // Creating constsant for my filtered repos forkedRepos = data.filter((repo) => repo.name.startsWith('project-')) + // Creating variable to pass on to showChart(). + allMyRepos = forkedRepos.length + // forEach function to create HTML elements & pull requests forkedRepos.forEach((repo) => { - + // Getting Repo Name repoName = repo.name; - - // Getting Most Recent Push Date + // Getting Most Recent Push Date which will be formated according to 'substr' method. pushDate = repo.pushed_at.substr(0, 10) - //Getting the Default Branch + // Getting the Default Branch defaultBranch = repo.default_branch - //Getting the URL of the repo + // Getting the URL of the repo urlRepo = repo.html_url - // Step: Find the necessary info and add it to your innerHTML section below: - - // Creating Project InnerHTML + // Creating innerHTML to insert above info projects.innerHTML += ` -

Forked repo:${repoName}

-

Most recent push date: ${pushDate}

-

Name of default branch: ${defaultBranch}

-

URL to the Github repo: ${urlRepo}

-

Number of commits:

- ` - - // Fetch for all pull requests - const USER_NAME = repo.owner.login +
+

Repository name:
${repoName}

+

Most recent push date: ${pushDate}

+

Name of default branch: ${defaultBranch}

+

Github repo URL

+

+
+ ` + // Fetch for all pull requests. const USER_PR = `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`; fetch(USER_PR, options) .then(res => res.json()) - .then(pullRequests => { - //console.log('PR', data) - const myPR = pullRequests.find((pull) => - pull.user.login === repo.owner.login - ) - console.log(myPR) - + .then(AllpullRequests => { + const myPR = AllpullRequests.find((pull) => pull.user.login === repo.owner.login) + + // My pull requests are saved in the variable myPR which is passed on and invokes the function getCommit. + // If there are no commits it should return 'No pull requests made'. if(myPR) { getCommitNr(myPR, repo.name) } else { - document.getElementById(`commit-${repo.name}`).innerHTML += '0' + document.getElementById(`commit-${repo.name}`).innerHTML += 'No pull request made' } - - // pull.forEach((pull) => { - // if (pull.user.login === repo.owner.login) { - // console.log('step pull', pull) - // } - // }) - }) - //console.log('PR user', ) - //console.log('My pull requests', myPR) - }) - + showChart(allMyRepos) + }) +} + +// After extracting the pull requests done by owner(see above) we now fetch data from each of the pull request (myPR ---> myPull) from the API URL commit_url. +//This is displayed in the innerHTML with the value from commit.length. +const getCommitNr = (myPull, myRepoName) => { + fetch(myPull.commits_url) + .then(res => res.json()) + .then((commit) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += ` +

Number of commits: ${commit.length}

+ ` }) - - } - - const getCommitNr = (myPull, myRepoName) =>{ - fetch(myPull.commits_url) - .then(res => res.json()) - .then((commit) => { - document.getElementById(`commit-${myRepoName}`).innerHTML += commit.length - }) - - } - - // Here you need to filter your data to only include your own pull requests - // After you have a filtered list of your pull requests, you need to add them to your innerHTML section above - - // Correct - you don't need to make a new fetch for every thing you need. Some of these fetches will include multiple data - - // I have one function which builds the header which includes my username and avatar, just like you. - // It makes sense to make it as one function because it doesn't need to iterate - - // For the project sections, where you need to add information from mulitple fetches into the same "individual project block" (i don't know what to call it) - // It makes better sense to keep it inside the same function / or inside the same "forEach" or "for" loop - - - - // const commitURL = repo.commits_url - // console.log('commitURL', commitURL) - // fetch(commitURL, options) - // .then(res => res.json()) - // .then(data => { - // console.log('commits', data) - // }) - - - - - -getRepos() - - //----FETCHING ALL PULL REQUESTS----// - - -// These are the requirements for the project: - -// A list of all repos that are forked from Technigo (You completed this! Yay) -// Your username and profile picture (You completed this! Yay) -// Most recent update (push) for each repo (I understood this as the date of the last push) (You completed this! Yay) -// Name of your default branch for each repo (I understood this as the name of the repo) (You completed this! Yay) - - -// URL to the actual github repo. You can find that in your USER_REPO fetch (repoLink = repo.html_url), insert in e.g. line 84 -// Yes. for every repo which is why it should be inside the forEach loop. - -// Number of commits for each repo. You need to do a fetch for this one inside your forEach loop. The url for this is repo.git_commits_url -// ---- This will return an array with all of your commits for each repo. To get the number of commits, you can use array.length (replace array with the name of your json data) - -// Last steps: Chart.js (I don't know anything about this, just started) - -// Media Queries in CSS - -// Before I leave: - -// I'm going for blue too. No more haha. - -// If you want to see the information I included in mine, click here: -// https://github-tracker-week7.netlify.app/ -// The only thing I'm missing is the chart & media queries - so we're almost just as far as each other - -// The link to my github repo is here, if you want to read the code (if you get stuck) -// https://github.com/michaelchangdk/project-github-tracker - - - - - - - - - - - - - - - - - - -// pushDate = repo.pushed_at.substr(0, 10) - -// This section is for fun :) >>>>>> -// pushYear = pushDate.substr(0, 4) -// pushMonthRaw = pushDate.substr(5, 2) -// pushDay = pushDate.substr(8, 2) -// console.log(pushYear) -// console.log(pushDate) - -// if (pushDay < 10) { -// pushDay = pushDay.replace("0", "") -// } \ No newline at end of file +// Invoking function. +getRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index c93943b3..a8530861 100644 --- a/code/style.css +++ b/code/style.css @@ -1,8 +1,133 @@ + +* { + box-sizing: border-box; + margin: 0; +} + body { - background: #FFECE9; + background: rgb(253, 146, 166); + font-family: 'Montserrat', sans-serif; + font-weight: bold; + color: rgb(27, 20, 100); +} + +h1 { + text-transform: uppercase; + display: inline; + display: flex; + justify-content: center; + font-size: 30px; + margin-top: 10px; +} + +h3 { + border-bottom: solid 1px black; + margin-bottom: 0.5em; + font-size: 18px; +} + +.profile-info { + padding-left: 1em; + display: flex; + font-size: 20px; + width: 100vw; + align-items: center; + padding-left: 5vw; + margin-top: 5px; + margin-bottom: 10px; +} + +.project-container { + display: grid; + grid-template-columns: 90vw; + border-top: double 3px rgb(27, 20, 100); + padding-left: 5vw; + padding-right: 5vw; + padding-top: 1vh; + padding-bottom: 5vh; +} + +.projects-main { + margin-bottom: 1vh; +} + +.projectblock { + background-color: #f267a0; + border-radius: 5px; + box-shadow: 5px 10px; + margin-bottom: 3vh; + padding: 1em; + font-size: 14px; + line-height: 1.5em; } .avatar { - width: 3rem; + width: 2em; border-radius: 50%; -} \ No newline at end of file + margin-right: 10px; +} + +.chartCSS h1 { + margin-bottom: 1em; + font-size: 24px; +} + +@media (min-width: 667px) and (max-width: 1024px) { + + .project-container { + grid-template-columns: 90vw; + grid-template-rows: 1fr auto; + } + + .projects-main { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .projectblock { + font-size: 1em; + margin-left: 10px; + margin-right: 10px; + } + + .chartCSS { + width: 40vw; + justify-self: center; + } +} + +@media (min-width: 1025px) { + + .project-container { + grid-template-columns: 90vw; + grid-template-rows: 1fr auto; + } + + .projects-main { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } + + .projectblock { + font-size: 18px; + margin-left: 10px; + margin-right: 10px; + } + + .chartCSS { + width: 40vw; + justify-self: center; + } + + .chartCSS h1 { + margin-bottom: 1em; + font-size: 25px; + } + + h3 { + border-bottom: solid 1px black; + margin-bottom: 0.5em; + font-size: 25px; + } +} + From ad2015e83c43b5e686e12b537fb526a85d1a38e4 Mon Sep 17 00:00:00 2001 From: StepbyStepp <91485842+SteppbySteph@users.noreply.github.com> Date: Thu, 24 Feb 2022 19:40:16 +0100 Subject: [PATCH 06/12] regenerated new token --- code/script.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/code/script.js b/code/script.js index 2ff412ef..2780086a 100644 --- a/code/script.js +++ b/code/script.js @@ -8,7 +8,7 @@ const USER_REPO = `https://api.github.com/users/SteppbySteph/repos` -const GITHUB_TOKEN = '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' +const GITHUB_TOKEN = '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' const options = { method: 'GET', headers: { @@ -19,10 +19,11 @@ const options = { //----USER NAME & PROFILE----// -const getProfile = () =>{ +const getProfile = () => { fetch(USER_PROFILE, options) .then(res => res.json()) .then(data => { + console.log('repos', data) const user = data.name const avatar = data.avatar_url profile.innerHTML += ` @@ -32,7 +33,7 @@ const getProfile = () =>{ ` }) - } +} getProfile() @@ -103,6 +104,6 @@ const getCommitNr = (myPull, myRepoName) => {

Number of commits: ${commit.length}

` }) - } +} // Invoking function. getRepos() \ No newline at end of file From fc426486f05c3edc603ae2bbe24cabbb824e6d3b Mon Sep 17 00:00:00 2001 From: StepbyStepp <91485842+SteppbySteph@users.noreply.github.com> Date: Thu, 24 Feb 2022 20:12:19 +0100 Subject: [PATCH 07/12] added .gitignore --- .gitignore | 2 ++ code/index.html | 1 + code/script.js | 1 - 3 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..58702a2e --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +// .gitignore file +code/secret.js \ No newline at end of file diff --git a/code/index.html b/code/index.html index 55da654d..36b66316 100644 --- a/code/index.html +++ b/code/index.html @@ -21,6 +21,7 @@

Technigo projects

+ diff --git a/code/script.js b/code/script.js index 2780086a..18f332f5 100644 --- a/code/script.js +++ b/code/script.js @@ -8,7 +8,6 @@ const USER_REPO = `https://api.github.com/users/SteppbySteph/repos` -const GITHUB_TOKEN = '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' const options = { method: 'GET', headers: { From 2c3bc3c44cc585a81ce1804b69851249325bbe96 Mon Sep 17 00:00:00 2001 From: Stephannie Medenilla <91485842+SteppbySteph@users.noreply.github.com> Date: Fri, 25 Feb 2022 12:13:17 +0100 Subject: [PATCH 08/12] Updated README file --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1613a3b0..a3ce743c 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,19 @@ Replace this readme with your own information about your project. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +This week we practiced on fetching API from github by extracting data from our forked Technigo repos. +We also learned how to use tokens and adding a chart with chart.js. ## The problem Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +This time I learned to ask for help sooner than later since I got stuck with fetching pull requests inside a function. +The problem was solved by nesting the fetch of API for pull requests inside the first fetch. Another problem I encountered was not knowing how to use the tokens correctly and how to make Netlify show my index.html site. But after some added information in the notion page the problem was easily fixed! +If I had more time I would try to play around with API:s more and presenting the data with another chart. + ## View it live Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. + +https://app.netlify.com/sites/dazzling-edison-30e09d/overview From 754da46c189b8649688d1715b72703ece9bfc6bb Mon Sep 17 00:00:00 2001 From: StepbyStepp <91485842+SteppbySteph@users.noreply.github.com> Date: Fri, 25 Feb 2022 12:25:01 +0100 Subject: [PATCH 09/12] testing username --- code/script.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/code/script.js b/code/script.js index 18f332f5..ac6f948d 100644 --- a/code/script.js +++ b/code/script.js @@ -2,7 +2,7 @@ const projects = document.getElementById('projects') const profile = document.getElementById('profile') const repos = document.getElementById('repos') -const username = 'StephannieMedenilla' +const username = 'SteppbySteph' const USER_PROFILE = `https://api.github.com/users/SteppbySteph` const USER_REPO = `https://api.github.com/users/SteppbySteph/repos` @@ -22,7 +22,6 @@ const getProfile = () => { fetch(USER_PROFILE, options) .then(res => res.json()) .then(data => { - console.log('repos', data) const user = data.name const avatar = data.avatar_url profile.innerHTML += ` @@ -96,7 +95,7 @@ const getRepos = () => { // After extracting the pull requests done by owner(see above) we now fetch data from each of the pull request (myPR ---> myPull) from the API URL commit_url. //This is displayed in the innerHTML with the value from commit.length. const getCommitNr = (myPull, myRepoName) => { - fetch(myPull.commits_url) + fetch(myPull.commits_url, options) .then(res => res.json()) .then((commit) => { document.getElementById(`commit-${myRepoName}`).innerHTML += ` @@ -105,4 +104,4 @@ const getCommitNr = (myPull, myRepoName) => { }) } // Invoking function. -getRepos() \ No newline at end of file +getRepos() From da3a3fb7810d88e5f6857932faeb8347da5be567 Mon Sep 17 00:00:00 2001 From: StepbyStepp <91485842+SteppbySteph@users.noreply.github.com> Date: Fri, 25 Feb 2022 12:27:45 +0100 Subject: [PATCH 10/12] changed back to original username and added options to last fetch --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index ac6f948d..72349195 100644 --- a/code/script.js +++ b/code/script.js @@ -2,7 +2,7 @@ const projects = document.getElementById('projects') const profile = document.getElementById('profile') const repos = document.getElementById('repos') -const username = 'SteppbySteph' +const username = 'StephannieMedenilla' const USER_PROFILE = `https://api.github.com/users/SteppbySteph` const USER_REPO = `https://api.github.com/users/SteppbySteph/repos` From a0d1600dff1d039a05d0bdb05d9a2d14b11b43cb Mon Sep 17 00:00:00 2001 From: Stephannie Medenilla <91485842+SteppbySteph@users.noreply.github.com> Date: Fri, 25 Feb 2022 12:32:27 +0100 Subject: [PATCH 11/12] changed to correct url site for netlify. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a3ce743c..18e0a55c 100644 --- a/README.md +++ b/README.md @@ -17,4 +17,4 @@ If I had more time I would try to play around with API:s more and presenting the Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. -https://app.netlify.com/sites/dazzling-edison-30e09d/overview +https://dazzling-edison-30e09d.netlify.app/ From f114345627ed9b36944680ec448a1b8fba7007c4 Mon Sep 17 00:00:00 2001 From: StepbyStepp <91485842+SteppbySteph@users.noreply.github.com> Date: Sat, 25 Jun 2022 21:15:12 +0200 Subject: [PATCH 12/12] removed temporary token in fetch --- code/script.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/code/script.js b/code/script.js index 72349195..b606f3a4 100644 --- a/code/script.js +++ b/code/script.js @@ -8,18 +8,18 @@ const USER_REPO = `https://api.github.com/users/SteppbySteph/repos` -const options = { - method: 'GET', - headers: { - Authorization: `token ${GITHUB_TOKEN}` - } -} +// const options = { +// method: 'GET', +// headers: { +// Authorization: `token ${GITHUB_TOKEN}` +// } +// } //----USER NAME & PROFILE----// const getProfile = () => { - fetch(USER_PROFILE, options) + fetch(USER_PROFILE) .then(res => res.json()) .then(data => { const user = data.name @@ -38,7 +38,7 @@ getProfile() //----REPOSITORIES WITH DATA OF NAME, PUSH DATE, DEFAULT BRANCH, URL, PULL REQUESTS AND getCommitNr ()----// const getRepos = () => { - fetch(USER_REPO, options) + fetch(USER_REPO) .then(res => res.json()) .then(data => { // Creating constsant for my filtered repos @@ -74,7 +74,7 @@ const getRepos = () => { ` // Fetch for all pull requests. const USER_PR = `https://api.github.com/repos/Technigo/${repoName}/pulls?per_page=100`; - fetch(USER_PR, options) + fetch(USER_PR) .then(res => res.json()) .then(AllpullRequests => { const myPR = AllpullRequests.find((pull) => pull.user.login === repo.owner.login) @@ -95,7 +95,7 @@ const getRepos = () => { // After extracting the pull requests done by owner(see above) we now fetch data from each of the pull request (myPR ---> myPull) from the API URL commit_url. //This is displayed in the innerHTML with the value from commit.length. const getCommitNr = (myPull, myRepoName) => { - fetch(myPull.commits_url, options) + fetch(myPull.commits_url) .then(res => res.json()) .then((commit) => { document.getElementById(`commit-${myRepoName}`).innerHTML += `