diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..2f3ca25c --- /dev/null +++ b/.gitignore @@ -0,0 +1,26 @@ +// .gitignore file code/secret.js + +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +​ +​ +# Ignore Mac system files +.DS_store +​ +# Ignore node_modules folder +node_modules +​ +# Ignore all text files +*.txt +​ +# Ignore files related to API keys +.env +​ +# misc +/.pnp +.pnp.js +npm-debug.log* +yarn-debug.log* +yarn-error.log* +​ +# other +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..ec617caf 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,12 @@ # 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. +Create a tracker for my progress as a student at Technigo bootcamp. ## 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 started with getting the fetches, trying to remember everything from last weeks project. Had some trouble with (a lot) but "small things" like remembering to pass along the filtered repos and calling functions. This project was intense but I pulled through (pun intended). +With more time I would try harder to get the token to work. And as always more time on styling. ## View it live +https://id4h4lling.netlify.app/ -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. diff --git a/code/chart.js b/code/chart.js index 92e85a30..9b5d38a0 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') +const ctx = document.getElementById('myChart').getContext('2d') -//"Draw" the chart here 👇 + +const drawChart = (amount) => { +const labels = [ +'Completet projects', +'Projects left' +]; + +const data = { + labels: labels, + datasets: [{ + label: 'My First dataset', + backgroundColor: ['rgb(105, 137, 175)','rgb(250, 245, 205)'], + borderColor: 'rgb(238, 226, 185)', + data: [amount, 19 - amount], + }] +}; + +const config = { + type: 'doughnut', + data: data, + options: {} +}; + +const myChart = new Chart( + ctx,config) +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..cb4085b0 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,33 @@ Project GitHub Tracker + + + -

GitHub Tracker

-

Projects:

-
+
+

GitHub Tracker

+
+ - - - +
+ +
+
+ +
+
+
+ + +
+ +
+ + + - \ No newline at end of file + diff --git a/code/script.js b/code/script.js index e69de29b..7ec11268 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,99 @@ +const username = 'id4h4lling' +let reponame = '' + +const API_GIT_URL = `https://api.github.com/users/${username}/repos` +const API_GIT_USER = `https://api.github.com/users/${username}` //to get a hold of profilepicture + +const userInfo = document.getElementById('userInfo') +const projects = document.getElementById('projects') + + +// paus for now, try token another time. +const options = { + method: 'GET', + headers: { + // Authorization: `token ${API_TOKEN}` + } +} + +//User info +fetch (API_GIT_USER, options) + .then(res => res.json()) + .then(user => { + console.log(user) + userInfo.innerHTML += ` +
+ +

${username}

+

${user.bio}

+
+ ` + }) + + +//fetch repos +const getRepos = () =>{ + +fetch (API_GIT_URL, options) + .then(res => res.json()) + .then(data => { + console.log(data) + + //filter out and only show the forked ones, filter out Technigo projects + const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-")) + console.log(forkedRepos) + + forkedRepos.forEach((repo) => { + projects.innerHTML+= + `
+

${repo.name}

+

Default branch: ${repo.default_branch}

+

Commits Done:

+

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

+
` + }) + + fetchPullRequests(forkedRepos) + + drawChart(forkedRepos.length) + }) +} + getRepos() + + +const fetchPullRequests = (repos) => { + + repos.forEach((repo => { + fetch (`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then(res => res.json()) + .then(data => + { + //filter out pr + const pulls = data.find((pull) => pull.user.login === repo.owner.login); + + if (pulls) { + fetchCommits(pulls.commits_url, repo.name) + } + else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'Commits Done: (Pull request unavailable)' + } + }) + }) + )} + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl, options) + .then((res) => { + return res.json() + }) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + console.log("data", data) + }) +} + + + + + diff --git a/code/style.css b/code/style.css index 7c8ad447..676c19f8 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,111 @@ body { - background: #FFECE9; + background: rgb(238, 226, 185); + font-family: Roboto; +} + +.title { + font-size: 20px; + text-align: center; + padding: 30px 0px 0px 0px; + color: rgb(255, 255, 255); +} + +h2 { + font-size: 30px; +} + +p { + font-size: 20px; +} + +.header{ + display: flex; + justify-content: center; +} + +.profile-img { + width: 300px; + height: 300px; + border-radius: 50%; + align-self: center; + +} + +.main-container { + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 2px; + +} + +.user-info { + display: flex; + flex-direction: column; + text-align: center; + margin: 0px; + padding-top: 20px; + color: white; +} + +.projects{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + column-gap: 1rem; + row-gap: 1rem; + margin: 30px 0px 50px 0px; +} + +.card { + background: rgb(240, 240, 240); + text-align:left; + padding: 1.5rem; + box-shadow: 0 0.1rem 1.2rem rgba(22, 23, 23, 0.2); + transform: translateY(0); + position: relative; + padding: 5px, 10px, 5px, 30px; + margin: 10px; + /* border: solid 2px rgb(187, 206, 241); */ + border-radius: 5px; +} + +a { + color: rgb(105, 137, 175); +} + +a:hover { + color: pink; +} + +.my-chart{ + display: grid; + grid-column: span 6; + justify-items: center; + margin: 5% auto; + width: 500px; +} + +/* ---------- media queries desktop ---------- */ + +@media (min-width: 1025px) { + .user-info { + display: flex; + flex-direction: column; + justify-content: center; + } + + .projects { + grid-template-columns: repeat(auto-fit, minmax(400px, 2fr)); + max-width: 80%; + align-self: center; + margin-top: 60px; + } + + .my-chart{ + margin: 5% auto; + width: 700px; + } + } \ No newline at end of file