diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..afb61c74 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..a76fd6e1 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +code./secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..7442a16e 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,21 @@ # GitHub Tracker -Replace this readme with your own information about your project. +In this project we were suppose to build a tracker of all our projects related to Technigo using GitHub API. The site should include: + + +- A list of all repos forked from Technigo +- Username and profile picture +- Most recent push for each repo +- Default branch for each repo +- URL to the actual GitHub repo +- Number of commits per repo +- Chart showing completed projects/total. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. ## 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? +In order to solve the problem I've worked with API's and a personal token. A challening project where there still are things needed to be fixed (when the chart is showing only 2 out of 5 projects are visible). ## 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://jolly-hopper-ee7c71.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..fbb0037e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,28 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') -//"Draw" the chart here 👇 + +//CHART + +const drawChart = (number) => { + const config = { + type: "doughnut", + data: { + labels: ["DONE", "LEFT TO DO"], + datasets: [ + {label: "PROJECT CHART", + data: [number, 19 - number], + backgroundColor: ["#ff874e", "#db738e"], + hoverOffset: 4, + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(255, 206, 86, 1)', + ], + borderWidth: 4 + }, + ], + }, + }; + const myChart = new Chart(ctx, config); + }; + \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..4183d251 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,43 @@ - Project GitHub Tracker + ⏱ My GitHub Tracker + + + + + + + + -

GitHub Tracker

-

Projects:

-
- - +

My GitHub Tracker

+ +
+ +

+ +
+ +

PROJECTS

+ +
+ +
+ + +
+ + +
+ + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..27e479cd 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,97 @@ +const username = 'JenFi72' +let reponame = ' ' + +const profileBox= document.getElementById('profileBox'); +const profileImage = document.getElementById('profileImage') +const projectBox = document.getElementById('projects') +const repoName = document.getElementById('reponame') + +const API_URL = `https://api.github.com/users/${username}/repos`; +const PULL_URL = `https://api.github.com/repos/Technigo/${reponame}/pulls`; +const PROFILE_URL = `https://api.github.com/users/${username}` + + +//TOKEN + +const options = { + method: 'GET', + headers: { + Authorization: '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' // my TOKEN + } + } + +//FETCH PROFILE + const fetchProfile = () =>{ + fetch(PROFILE_URL) + .then(res => res.json()) + .then(profileData => { + + profileBox.innerHTML +=` + +

NAME: ${profileData.name}

+

USERNAME: ${profileData.login}

` + }); + } + + fetchProfile(); + +//FETCH REPOS + +const getRepos = () => { +fetch (API_URL, options) +.then(res => res.json()) +.then(data => { + const technigoRepos =data.filter( + (repo) => repo && repo.name.startsWith ('project-') + ); + +technigoRepos.forEach((repo) => { + projectBox.innerHTML += ` +
+

${repo.name}

+

Branch: ${repo.default_branch}

+

URL: ${repo.html_url}

+

Main Language: ${repo.language}

+

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

+

Number of commits:

+
+ `; + getPullRequests(technigoRepos); + drawChart(technigoRepos.length); //* if this one is commented out, more projects will appear. Do not know why. + }); + +}); +}; + +//FETCH THE PULL REQUESTS +const getPullRequests = (allRepos) => { + allRepos.forEach((repo) => { + fetch (`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=150`) + .then((res) => res.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ); + + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No pull requests or closed'; + } + }); + }); + }; + +//FETCH COMMITS +const fetchCommits = (urlMyCommits, myRepoName) => { + fetch(urlMyCommits) + .then((res) => res.json ()) + .then ((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + + }) +}; + +getRepos(); + diff --git a/code/secret.js b/code/secret.js new file mode 100644 index 00000000..9bef5b73 --- /dev/null +++ b/code/secret.js @@ -0,0 +1,2 @@ +// secret.js file +const API_TOKEN = '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'; \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..c9bdea7d 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,78 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #11130d; + font-family: 'Zilla Slab', serif; + display: flexbox; +} + +h1{ + font-family: 'Galada', cursive; + font-size: 65pt; + text-align: center; + text-shadow: 6px 5px rgb(151, 31, 71); + margin-bottom: -2rem; + color: rgb(216, 83, 128); +} + +h3{ + font-size: 35pt; + text-align: center; + color: rgb(216, 83, 128); +} + +.profile-box { + display: flex; + align-items: center; + flex-direction: column; + width: 90%; + margin: 0 auto; + color: rgb(216, 83, 128); +} + +.profile-image { + border-radius: 50%; + width: 290px; + align-content: center; + border: 6px solid rgb(216, 83, 128); + } + + + .projects { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .repo-card { + display: flexbox; + margin: 2rem; + border-radius: 1rem; + padding: 1rem; + background-color:rgb(216, 83, 128) + } + + .chart-size{ + height: 500px; + width: 500px; +padding: 3rem; +justify-content: space-evenly; + } + + @media (max-width: 624px) { + h1{ + font-size: 30pt; + } + .profile-image { + width: 190px; + } +.h3 { + font-size: 20pt + } + .repo-card { + margin-left: 5rem; + margin-right: 5rem; + } + .chart-size{ + height: 250px; + width: 250px; +} + } \ No newline at end of file