diff --git a/README.md b/README.md index 1613a3b0..3b2ef6fd 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 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. +This weeks project was about deepening our knowledge of API and also some unit testing. ## 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? +I've had huge issues with getting my personal token to work and I must say that it has defeted me, I never managed to solve it (this time). I have never spent so much time on a single problem, but I still like the fact that I never gave in, I kept trying. + +If I had more time, I would make the token work :D ## 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://w7-project-github-tracker.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..e65d771c 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,21 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') -//"Draw" the chart here 👇 +//Draws the chart and displays progress in projects finished vs left +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: ['Finished projects', 'Projects left'], + datasets: [ + { + label: 'Technigo projects', + data: [amount, 19 - amount], + backgroundColor: ['rgb(63, 114, 175)', 'rgb(17, 45, 78)'], + }, + ], + }, + } + + const myChart = new Chart(ctx, config) +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..a67669c2 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,25 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + - - + +
+
+
+
+ +
+ +
- - - + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..cdea67a2 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,78 @@ +// USERNAME +let username = 'rijad90' +// API +const GITHUB_USER_API = `https://api.github.com/users/${username}` +const GITHUB_REPOS_API = `https://api.github.com/users/${username}/repos` + +//FETCH API TO PROFILE. INJECTS PIC,USERNAME,BIO +const getProfile = () => { + fetch(GITHUB_USER_API) + .then((res) => res.json()) + .then((data) => { + profile.innerHTML += ` +
+

Github Tracker

+ +

${username}

+

${data.bio}

+
+ ` + }) +} +getProfile() + +//DOM SELECTOR +const projects = document.getElementById('projects-container') +//FETCH API AND FILTERS REPO. INJECTS REPO URL, NAME, DEF BRANCH, PUSHED DATE AND COMMIT +const fetchRepo = () => { + fetch(GITHUB_REPOS_API) + .then((res) => res.json()) + .then((data) => { + const technigoRepo = data.filter( + // FILTERS MY FORKED REPOS ONLY TO DESPLAY THE ONES NAMNED "project-" + (repo) => repo.name.includes('project-') && repo.fork + ) + + technigoRepo.forEach((repo) => { + projects.innerHTML += ` +
+ ${repo.name.toUpperCase()} +

Default branch: ${repo.default_branch}

+

Most recent push: ${new Date(repo.pushed_at).toISOString().substring(0, 10)}

+

Number of commits:

+
+ ` + }) + fetchPull(technigoRepo) + drawChart(technigoRepo.length) + }) +} + +// FETCH ALL REPO PULLS +const fetchPull = (allRepo) => { + allRepo.forEach((repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`) + .then((res) => res.json()) + .then((data) => { + const myPullRequests = data.find( + (pull) => pull.user.login === repo.owner.login + ) + if (myPullRequests) { + fetchCommits(myPullRequests.commits_url, repo.name) + } else { + document.getElementById(`commit-${repo.name}`).innerHTML += + 'No pull request' + } + }) + }) +} + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((response) => response.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + }) +} + +fetchRepo() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..4b1eed44 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,62 @@ +* { + box-sizing: border-box; +} + +html { + font-family: "Montserrat", sans-serif; + border: 0; + padding: 0; + margin: 0; +} + body { - background: #FFECE9; -} \ No newline at end of file + display: grid; + justify-content: center; + background-color: #3F72AF; +} + +.main { + display: grid; + height: auto; + text-align: center; + justify-content: center; + row-gap: 1em; + +} + +.projects-container { + display: grid; + gap: 1rem; +} + +.projects, .profile, .chart { + background-color: whitesmoke; + border-radius: 3%; + align-items: center; + + margin: 10px; + padding: 10%; +} + +.profile_picture { + border-radius: 50%; + width: 50%; +} + +a, a:visited, a:hover, a:active { + color: #3F72AF; +} + +p, h1, a { + color: #3F72AF; +} + +@media (min-width: 668px) { + .projects-container { + grid-template-columns: repeat(2, 1fr); + } + + @media (min-width: 1080px) { + .projects-container { + grid-template-columns: repeat(3, 1fr); + } \ No newline at end of file