diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..bf6091ea --- /dev/null +++ b/.gitignore @@ -0,0 +1,26 @@ +// .gitignore file + +# 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..07499b30 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # 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. +Making a GitHub tracker over our repositories using API. ## 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 had a lot of problems with getting the API token to work, but managed to solve that with some help. It was a bit hard to know what fetch to put where and so on, but it is working, and I'm happy about the outcome. It was a fun project. If I had more time, I would fetch more information about my repos. ## 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://nervous-archimedes-33769b.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..2f10da87 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,37 @@ //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 config = { + type: "doughnut", + data: { + labels: ["Finished projects", "Projects to do"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 19 - amount], + backgroundColor: ["#ff95cf", "#a7c0b8"], + + hoverOffset: 4, + }, + ], + }, + options: { + layout: { + padding: 25, + }, + plugins: { + legend: { + labels: { + font: { + size: 15, + }, + }, + }, + }, + }, + }; + const myChart = new Chart(ctx, config); +}; diff --git a/code/images/background-img.jpg b/code/images/background-img.jpg new file mode 100644 index 00000000..726bcbaf Binary files /dev/null and b/code/images/background-img.jpg differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..c30c6ff6 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,45 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + - - + + + + + - - - - \ No newline at end of file + +
+

GitHub Tracker

+
+ +
+
+ +
+

Technigo Projects:

+
+
+ +
+ +
+
+ + + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..0a7dff70 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,84 @@ +const USER = "isabellwastfelt"; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const PROFILE_URL = `https://api.github.com/users/${USER}`; + +const projectContainer = document.getElementById("projects"); +const profileInfo = document.getElementById("profile"); + +const options = { + method: "GET", + headers: { + Authorization: `token ${API_TOKEN}`, + }, +}; + +const getProfile = () => { + fetch(PROFILE_URL, options) + .then((res) => res.json()) + .then((data) => { + console.log(data); + profileInfo.innerHTML += ` + image of isabellwastfelt at GitHub +

${data.login}

+ `; + }); +}; +getProfile(); //invoking + +const getRepos = () => { + fetch(REPOS_URL, options) + .then((res) => res.json()) + .then((data) => { + const forkedRepos = data.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()}

+

Number of commits:

+
+ `) + ); + + getPullRequests(forkedRepos); + drawChart(forkedRepos.length); + }); +}; + +getRepos(); + +// Pull requests for each project +const getPullRequests = (repos) => { + repos.forEach((repo) => { + const PULLREQUEST_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + fetch(PULLREQUEST_URL, options) + .then((res) => res.json()) + .then((pull) => { + const myPullRequest = pull.find( + (pull) => pull.user.login === repo.owner.login + ); + + // If pull request done by user, getCommits function is invoked + if (myPullRequest) { + getCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + "No pull request done by user"; + } + }); + }); +}; + +const getCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((commit) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += + commit.length; + }); +}; diff --git a/code/style.css b/code/style.css index 7c8ad447..08abde0e 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,121 @@ +* { + box-sizing: border-box; + text-align: center; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + body { - background: #FFECE9; -} \ No newline at end of file + background-image: url(./images/background-img.jpg); + font-family: "Open Sans Condensed", sans-serif; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + background-position: center; + max-height: 100vh; +} + +h1 { + font-family: "Oswald", sans-serif; + color: rgb(255, 149, 207); + font-size: 56px; + font-weight: bolder; + text-shadow: 1px 1px 2px rgb(0, 0, 0); +} + +h2 { + color: white; + letter-spacing: 1px; +} + +h3, +a { + color: rgb(255, 149, 207); + font-size: 20px; +} + +h5 { + color: #ffffff; + font-size: 15px; + font-style: italic; +} + +p { + color: black; +} + +img { + border: 1px solid; + border-color: rgb(255, 212, 253); + border-radius: 50%; + height: 200px; + width: 200px; +} + +.card { + background-color: #ffffff; + width: 275px; + padding-top: 25px; + padding-bottom: 20px; + margin: auto; + border-radius: 7px; + opacity: 90%; +} + +a:link { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +.chart { + width: 250px; + height: 250px; + margin: auto; + padding-top: 50px; +} + +.project-grid { + display: grid; + grid-template-columns: 1fr; + grid-gap: 1.5rem; +} + +footer { + padding: 10px; + margin-top: 20px; +} + +/* --- MEDIA QUERY --- */ + +/* Tablet */ + +@media (min-width: 768px) { + .project-grid { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .chart { + width: 300px; + height: 300px; + } +} + +/* Big screen */ + +@media (min-width: 769px) { + .project-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } + + .chart { + width: 350px; + height: 350px; + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..832728d9 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "chart.js": "^3.7.1" + } +}