diff --git a/code/.gitignore b/code/.gitignore new file mode 100644 index 00000000..1c453411 --- /dev/null +++ b/code/.gitignore @@ -0,0 +1 @@ +token.js \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..259e973e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,29 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') +const technigoProjects = 19 + //"Draw" the chart here 👇 +const myChart = (repos) => { +new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['Projects I will do during bootcamp', 'Projects I have done during this bootcamp'], + datasets: [{ + label: '# of Votes', + data: [technigoProjects - repos.length, + repos.length,], + backgroundColor: [ + 'rgba(46, 204, 113, 0.2)', + 'rgba(34,139,34, 0.5)' + ], + borderColor: [ + 'rgba(38, 166, 91, 1)', + 'rgba(0,100,0, 1)' + ], + borderWidth: 1 + }] + }, + +}) +}; \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..4db2367f 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,41 @@ + - Project GitHub Tracker + + + Project GitHub Tracker + + -

GitHub Tracker

-

Projects:

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

My technigo projects in statistics

+ +
+ +
+ + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..f2987854 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,86 @@ +let USER = 'qwer-ctrl' + +const USER_URL = `https://api.github.com/users/${USER}` +const REPOS_URL = `https://api.github.com/users/${USER}/repos` + + +const options = { + method: "GET", + headers: { + Authorization: `token ${API_TOKEN}`, + } +} +console.log(API_TOKEN) +const profile = document.getElementById('profile-container') +const projects = document.getElementById('projects') + +const fetchProfile = () => { +fetch(USER_URL, options) + .then((response) => response.json()) + .then((data) => { + profile.innerHTML += ` +
+
+ + Avatar of ${data.login} + +
+

${data.login}

+

+
+

Public repositories: ${data.public_repos}

+
+ ` + }) +} +fetchProfile() + +const fetchRepos = () => { +fetch(REPOS_URL, options) + .then((response) => response.json()) + .then((data) => { + const technigoRepos = data.filter( + (repo) => repo.name.includes('project-') && repo.fork) + technigoRepos.forEach((repo) => { + projects.innerHTML += ` +
+

${repo.name}

+

Update: ${new Date(repo.pushed_at).toDateString()}

+

Branch: ${repo.default_branch}

+

Commits:

+

${repo.language}

+
+ ` + }) + myChart(technigoRepos) + fetchPullRequests(technigoRepos) + + }) +} + + const fetchPullRequests = (repositories) => { + repositories.forEach((repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) + .then((response) => response.json()) + .then((data) => { + const pullRequest = data.find((pull) => pull.user.login === repo.owner.login) + if (pullRequest) { + fetchCommits(pullRequest.commits_url, repo.name) + } else { + document.getElementById(`commit_${repo.name}`) + .innerHTML = 'No pullrequest available'; + } + }) + }) + } + + const fetchCommits = (commitsUrl, repoName) => { + fetch(commitsUrl, options) + .then((response) => response.json()) + .then((data) => { + document.getElementById(`commit_${repoName}`).innerHTML += data.length + }) + } + + +fetchRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..8ea4863f 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,129 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: white; + margin: 0; + font-family: Helvetica, sans-serif; + color: #6a727b; + font-weight: 100; +} + +header { + background-color: #24292f; + margin-bottom: 20px; + text-align: center; +} + +#hamburger-icon { + font-size: 30px; + color: white; + padding: 20px +} + +#github-icon { + font-size: 50px; + color: white; + padding: 20px; + margin-left: 120px; + margin-right: 120px; +} + +#bell-icon { + font-size: 30px; + color: white; + padding: 20px +} + +.input { + display:none; +} + +.profile-image > a > img { + border: 2px solid rgb(212, 210, 210); + border-radius: 50%; + width: 160px; + height: 160px; +} + +.username { + margin-left: 30px; + margin-top: 50px; + font-size: 25px; +} + +.profile { + display:flex; + justify-content: flex-start; + flex-direction: row; + margin: 10px; +} + +.public-repositories { + margin-left: 10px; +} + +.projects { + display: flex; + flex-flow: row wrap; +} + +.projects-card { + width: 100%; + background-color: white; + border: 1px solid #d3d7da; + border-radius: 6px; + padding: 16px; + margin: 0 10px 15px 10px; +} + +h2 { + text-align: center; + padding-bottom: 20px; + color: #4a4d52; +} + +#chart-container { + margin: 40px auto 20px auto; +} + +/*desktop*/ +@media (min-width: 1100px) and (max-width: 1280px) { + + .projects { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + + .projects .projects-card { + flex-basis: 45%; + } + + .profile-image > a > img { + width: 270px; + height: 270px; + } + + .public-repositories { + margin-left: 20px; + } + + #chart-container { + width: 50%; + height: 50%; + } + + header { + text-align:start; + } + + #hamburger-icon { + display: none; + } + + #github-icon { + margin-left: 0; + } + + #bell-icon { + display: none; + } +}