diff --git a/README.md b/README.md index 1613a3b0..efcab786 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,20 @@ # GitHub Tracker +Requirements: -Replace this readme with your own information about your project. +- A list of all repos that are forked from Technigo +- Your username and profile picture +- Most recent update (push) for each repo +- Name of your default branch for each repo +- URL to the actual GitHub repo +- Number of commits for each repo +- It should be responsive (mobile first) +- A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects 🥳) using [Chart.js](https://www.chartjs.org/). -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? +This project wasn't easy to get my head around. It took me a while to get all fetches to show. I also struggled a bit with the chart. ## 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://marianneardin-githubtracker.netlify.app/ 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..d1b6a82a 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,23 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +//DOM-selector for the canvas -//"Draw" the chart here 👇 +//Chart showing completed and remaining projects + +const drawChart = (numberOfProjects) => { + const ctx = document.getElementById('chart').getContext('2d'); + const config = { + type: 'pie', + data: { + labels: ['Projects completed', 'Projects remaining'], + datasets: [ + { + label: 'Technigo Projects', + data: [numberOfProjects, 19 - numberOfProjects], + backgroundColor: ['rgb(255,255,255)', 'rgb(102,153,153)'], + hoverOffset: 4, + }, + ], + }, + }; + + const chart = new Chart(document.getElementById('chart'), config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..b33709c2 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,46 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + + + + + +
+

GitHub Tracker

+

+
+
- - +
+
- - - - \ No newline at end of file + +
+ +
+ + + + + + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..25143f4f 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,92 @@ +//DOM selectors// +const userContainer = document.getElementById('userContainer') + +//APIs to fetch from +const username = 'MarianneArdin' +const API_URL = `https://api.github.com/users/${username}` +const REPOS_URL = `https://api.github.com/users/${username}/repos` +//const API_TOKEN = TOKEN || process.env.API_TOKEN +//const API_MY_PROFILE = 'https://api.github.com/users/MarianneArdin' + + +//option for authorization +const options = { + method: 'GET', + headers: { + Authorization: `token ${API_TOKEN}` + } + } +//FETCHES PROFILE FROM GITHUB// +const fetchProfile = () => { + fetch(API_URL, options) + .then((response) => response.json()) + .then((data) => { + console.log(data) + userContainer.innerHTML += ` +
+
+ + Avatar of ${data.login} + +
+

${data.login}

+

My projects

+
+
+

Public repositories: ${data.public_repos}

+
+ ` + }) +} +fetchProfile() + +//GET REPOS FROM GITHUB// +const getRepos = () => { + fetch(REPOS_URL, options) + .then((res) => res.json()) + .then((reposData) => { + console.log(reposData) + const forkedRepos = reposData.filter((repo) => repo.fork && repo.name.startsWith("project-")) + forkedRepos.forEach(repo => { + projectContainer.innerHTML += + ` + +
+

${repo.name}

+

Default branch: ${repo.default_branch}

+

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

+

Amount of commits:

+
` + }) + getPullRequests(forkedRepos) + + drawChart(forkedRepos.length) + }) +} +getRepos() + +//GETS REPOS FROM GITHUB// +const getPullRequests = (repos) => { + repos.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) + .then(res => res.json()) + .then((pullData) => { + let myPullRequest = pullData.find((pull) => pull.user.login === repo.owner.login) + if (myPullRequest) { + getCommits(myPullRequest.commits_url, repo.name) + } else { + document.getElementById(`commits-${repo.name}`).innerHTML += `No pulls yet.` + } + }) + }) +} + +//GET NUMBER OF COMMITS +const getCommits = (commitsUrl, repo) => { + fetch(commitsUrl, options) + .then(res => res.json()) + .then((data) => { + document.getElementById(`commits-${repo}`).innerHTML += `${data.length}` + console.log(data.length) + }) +} \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..259450c4 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,69 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: grey; + font-family: 'Bebas Neue', cursive; + margin: 1rem; +} + +header { + background-color: lightgrey; + border-radius: 180%; + color: black; + text-align: center; +} + +h1 { + font-size: 40px; + text-align: center; +} + +h2 { + font-size: 40px; + text-align: center; +} + +h3 { + font-size: 20px; + text-align: center; +} + +/*Image*/ +img { + width: 200px; + border-radius: 50%; + padding: 2rem; +} + +a { + color: black; +} + +.profile { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin-left: auto; + margin-right: auto; + width: 50%; +} +.forkedrepo-div { + border: black solid; + padding: 1rem; + margin: 2rem; +} +/* THE CHART SECTION */ + +#chart-wrapper { + width: 90%; + margin: 20px auto 40px; +} + +#chart { + padding: 20%; +} + +/* This is styling for the footer*/ +footer { + background-color: darkgrey; + text-align: center; +}