diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..d9320da6 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..c091f403 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,17 @@ # GitHub Tracker -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. +The assignment was to make a github-tracker, a page which shows your profile picture, username and information about your projects, pullrequests and commits. We also learned how to incorporate charts in our work. ## 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? +Fortunately I have a couple of people I study with, who help me a lot when I'm stuck. I started by watching the videos by our teachers, and then the recordings of our classes. This helped since I could rewind and watch again if something was unclear. I've also used StackOverflow for some guidance. + +This week I've used a page to help me with the colorschemes for my page and this is the link: https://coolors.co/ +I've also learned how to do shading in css which was cool. Hopefully my javascript aha-moment is just a couple of weeks away! + + ## 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://githubtracker-ninaalejandra.netlify.app/ \ No newline at end of file diff --git a/code/TODO-list: b/code/TODO-list: new file mode 100644 index 00000000..3a90c866 --- /dev/null +++ b/code/TODO-list: @@ -0,0 +1,10 @@ +TODO-list: + +1) fetch the repos and console log them x +2) get them in the browser x +3) filter out the technigo repos x +4) test chart library x +5) add pullrequests x +6) add profile pic x +7) add commits x +8) style x \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..d7949f90 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,25 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished Projects', + 'Projects Left' + ], + datasets: [{ + label: 'My First Dataset', + data: [amount, 20-amount], + backgroundColor: [ + '#AD5D4E', + '#218380' + ], + hoverOffset: 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..2f531942 100644 --- a/code/index.html +++ b/code/index.html @@ -6,14 +6,28 @@ Project GitHub Tracker + + + + + -

GitHub Tracker

-

Projects:

-
+
+

GitHub Tracker

+
+ +
+
+ +
+

+ +
- - +
+ +
diff --git a/code/script.js b/code/script.js index e69de29b..0bf94c4f 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,70 @@ +//DOM-selectors +const profileInfo = document.getElementById("profile") +const list = document.getElementById("list") + +//Github +const USER = 'NinaAlejandra' +const REPOS_URL = `https://api.github.com/users/${USER}/repos` +const API_MY_PROFILE = 'https://api.github.com/users/NinaAlejandra' + +//User +const getUser = () => { + fetch(API_MY_PROFILE) + .then((response) => response.json()) + .then((data) => { + profileInfo.innerHTML = + `Profile picture +

${data.name}

+

${data.login}

` + }) +} + + //Fetches +const getRepos = () => { + fetch(REPOS_URL) + .then(response => response.json()) + .then(data => { + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + const forkedSortedRepos = forkedRepos.sort(sortingFunctionFromStackOverflow) + forkedSortedRepos.forEach(repo => list.innerHTML += ` +
+

${repo.name} + with default branch ${repo.default_branch}

+

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

+

+

+
`) + drawChart(forkedSortedRepos.length) + fetchPullRequest(forkedSortedRepos) + addCommits(forkedSortedRepos) + }) +} + +const fetchPullRequest = (allRepos) => { + allRepos.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then((res) => res.json()) + .then((data) => { + const myPullRequests = data.filter((pullRequest) => pullRequest.user.login === USER) + document.getElementById(`pull-request-${repo.name}`).innerHTML = `Pull Requests: ${myPullRequests.length}` + }) + }) +} + +const addCommits = (allRepos) => { + allRepos.forEach(repo => { + fetch(`https://api.github.com/repos/${USER}/${repo.name}/commits`) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commits-${repo.name}`).innerHTML = `Commits: ${data.length}` + }) + }) +} + +function sortingFunctionFromStackOverflow(a, b) { + return new Date(a.created_at) - new Date(b.created_at) +} + +//invoking functions +getUser() +getRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..9a622b60 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,84 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #F7D4BC; + font-family: 'Gemunu Libre', sans-serif; +} + +header { + text-align: center; + font-size: 30px; +} + +.profile { + align-items: center; + justify-content: center; + display: flex; + text-align:center; + color: #218380; + margin:auto; + width: 100%; + flex-direction: column; +} + +img { + border-radius: 50%; + width: 200px; + margin: 15px; + box-shadow: -30px 30px 30px rgba(0, 0, 0, 0.3); +} + +p { + color: #AD5D4E; +} + +.projects { + flex-direction: column; + display: block; + border-style: solid; + color: #AD5D4E; + margin: 5px; + text-align: center; +} + +.chart-class { + width: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: auto; + cursor: pointer; +} + +h4 { + font-size: 25px; + margin: 5px; + font-weight: bolder; +} + +a { + font-size: 18px; + color: #218380; +} + +a:hover { + color:#74a09f; +} + +@media (min-width: 668px){ + main { + text-align: center; + flex-direction: row; + } + + .projects { + display: inline-block; + text-align: center; + padding: 5px; + width: 33%; + height: 50%; + } + + .chart-class { + width: 40%; + margin-top: 20px; + } +} \ No newline at end of file