diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..8a3064b9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ + +code/token.js diff --git a/.vscode/settings.json b/.vscode/settings.json index e8783bfe..ca5de4ce 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { "liveServer.settings.port": 5505 -} \ No newline at end of file +} diff --git a/README.md b/README.md index 1613a3b0..66f697ed 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,10 @@ # 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 week 7 project was creating a github tracker to keep track of the GitHub repos using GitHub API. The pie chart shows the number of projects that I have done at technigo and number of projects left to be done using 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 project was roller-coaster ride and I could learn a lot about how to fetch from Api and invoking the functions. I solved my problems by googling, stack overflow and town-hall sessions. If I had more time, I would like to add some more data to display and added bit more styling. ## 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. +Check it out here https://sherin-github-tracker.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..b0d0ea32 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,27 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 +const fetchChart = (amount) => { + const labels = ["Completed Projects", "Remaining Projects"]; + + const data = { + labels: labels, + datasets: [ + { + label: "Technigo projects", + backgroundColor: ["rgb(57, 91, 100)", "rgb(148, 180, 159)"], + borderColor: "#f7e9e7", + data: [amount, 19 - amount], + hoverOffset: 4, + }, + ], + }; + + const config = { + type: "pie", + data: data, + }; + + const myChart = new Chart(ctx, config); +}; diff --git a/code/image/github.png b/code/image/github.png new file mode 100644 index 00000000..5eb5bc2d Binary files /dev/null and b/code/image/github.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..dc055844 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,26 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
- - - - - - - - \ No newline at end of file + + + + + Project GitHub Tracker + + + + +
+
+
+ +
+ + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..4faec238 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,86 @@ +const projects = document.getElementById("projects"); +const userProfile = document.getElementById("userProfile"); +const chart = document.getElementById("chart"); +const user_URL = "https://api.github.com/users/Sherin-Susan-Thomas"; +const repo_URL = "https://api.github.com/users/Sherin-Susan-Thomas/repos"; + +const options = { + method: "GET", +}; + +//To fetch profile data +const user = () => { + fetch(user_URL, options) + .then((res) => res.json()) + .then((data) => { + console.log("data", data); + userProfile.innerHTML += ` +

GitHub Tracker

+ +

${data.name}

+

${data.bio}


+

Follow

+ + `; + }); +}; +user(); + +// To fetch repositories +const userRepo = () => { + fetch(repo_URL, options) + .then((res) => res.json()) + .then((userData) => { + console.log("userData", userData); + const filteredRepos = userData.filter( + (item) => item.fork == true && item.name.includes("project-") // to filter technigo projects + ); + filteredRepos.forEach((repo) => { + const date = new Date(repo.pushed_at).toDateString(); + projects.innerHTML += `
+

${repo.name}

+

(${repo.default_branch})

+

Latest update: Pushed on ${date}

+

Commits Done:

+
+ `; + }); + fetchChart(filteredRepos.length); + console.log("filteredRepos", filteredRepos); + pullRequests(filteredRepos); + }); + const pullRequests = (repos) => { + repos.forEach((repo) => { + console.log("repo", repo); + fetch( + `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, + options + ) // to filter pull requests + .then((res) => res.json()) + .then((data) => { + console.log("data", data); + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ); // pullrequests fetches the entire pullrequest specfic to the project, filtering out pull requests made by me. + console.log("myPullRequest", myPullRequest); + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + "Commits Done: 0 (Pull request unavailable/Group project) "; + } + }); + }); + }; +}; +const fetchCommits = (commitsURL, reponame) => { + fetch(commitsURL, options) + .then((res) => { + return res.json(); + }) + .then((data) => { + console.log("data", data); + document.getElementById(`commit-${reponame}`).innerHTML += data.length; + }); +}; +userRepo(); diff --git a/code/style.css b/code/style.css index 7c8ad447..f695daa6 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,78 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + body { - background: #FFECE9; -} \ No newline at end of file + background-color: #d3e4cd; +} +.user-profile { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10px; +} +.user-profile img { + border-radius: 50%; + height: 50vh; + width: 50vh; + padding: 20px; +} +.user-name { + padding: 20px; +} +h4 { + font-size: 20px; +} +a { + color: black; + text-transform: uppercase; + text-decoration: none; +} +a:hover { + color: white; +} +.projects { + display: flex; + flex-flow: row wrap; + justify-content: center; + gap: 1rem; + margin: 1rem; +} +h3 { + padding: 10px; +} +.repo { + padding: 5px; + text-transform: capitalize; +} +.repos { + width: 350px; + background-color: #10251042; + border: 1px solid black; + border-radius: 10px; + padding: 1rem; +} + +.chart-container { + display: grid; + + margin: 0 auto; + width: 20rem; +} + +@media only screen and (min-width: 768px) { + .chart-container { + width: 25rem; + } +} +@media only screen and (min-width: 1024px) { + .projects { + margin: 2rem 5rem; + } + .chart-container { + width: 30rem; + } +}