diff --git a/README.md b/README.md index 1613a3b0..e595bb71 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,14 @@ # 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 project is to build a GitHub tracker to gather my Technigo repositories in order to practice JavaScript and API skills through GitHub API. +It contains some data about the repositories like commits, lastest push and so on. ## 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 struggeled a lot this week to get the API part. I had to watch other project to understand how to handle the commit part. +When I finally was done I hade a bug that I couln´t find the solution for. I wrote the question at Stackowerflow. +The issue was ONE simple linebreak. ## 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://lb-githubtracker.netlify.app/ diff --git a/code/.gitignore b/code/.gitignore new file mode 100644 index 00000000..e767442b --- /dev/null +++ b/code/.gitignore @@ -0,0 +1 @@ +code/secret.js \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..84f6940b 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,22 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 +const drawChart = (amount) => { + const config = { + type: "doughnut", + data: { + labels: ["Completed projects", "Projects left to build"], + datasets: [ + { + label: "My Technigo projects", + data: [amount, 19 - amount], + backgroundColor: ["rgb(153,153,138)", "rgba(90, 112, 55, 0.1)"], + hoverOffset: 4, + }, + ], + }, + }; + + const projectsChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..ed37652d 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,38 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

GITHUB TRACKER

+
- - +
+
+
- - - - \ No newline at end of file +
+ + +
+ +
+
+ + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..bf91a03f 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,92 @@ +const username = "lisabergstrom"; +const API_REPOS = `https://api.github.com/users/${username}/repos`; +const API_PROFILE = `https://api.github.com/users/${username}`; + +// T O K E N +const options = { + method: "GET", + headers: { + Authorization: "API_KEY", + }, +}; +// D O M - S E L E C T O R S +const userProfile = document.getElementById("userProfile"); +const projects = document.getElementById("projects"); + +// P R O F I L E +const fetchProfile = () => { + fetch(API_PROFILE, options) + .then((res) => res.json()) + .then((data) => { + userProfile.innerHTML += ` + +

${data.name}

+

${data.login}

+ +`; + }); +}; + +// R E P O S +const fetchRepositories = () => { + fetch(API_REPOS, options) + .then((res) => res.json()) + .then((data) => { + console.log(data); + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith("project-") + ); + + forkedRepos.forEach((repo) => { + projects.innerHTML += ` +
+ +

${repo.name}

+

Latest push: ${new Date(repo.pushed_at).toLocaleString("sv-SE", { + dateStyle: "short", + })}

+

Deafult branch: ${repo.default_branch}

+

Commits:

+ +
+ `; + }); + + fetchPullRequestsArray(forkedRepos); + + drawChart(forkedRepos.length); + }); +}; + +const fetchPullRequestsArray = (allRepositories) => { + allRepositories.forEach((repo) => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + + fetch(PULL_URL, options) + .then((res) => res.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ); + console.log(myPullRequest); + + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + "No pull requests made"; + } + }); + }); +}; + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl, options) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); +}; + +fetchProfile(); +fetchRepositories(); diff --git a/code/secret.js b/code/secret.js new file mode 100644 index 00000000..6c6759e0 --- /dev/null +++ b/code/secret.js @@ -0,0 +1 @@ +const API_KEY = "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"; diff --git a/code/style.css b/code/style.css index 7c8ad447..7f124011 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,94 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: lightgray; + font-family: "Open Sans Condensed", sans-serif; + background-image: url("https://images.pexels.com/photos/2512386/pexels-photo-2512386.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"); + background-repeat: no-repeat; + background-size: cover; + color: #716d6a; +} +.title { + font-size: 1.6rem; + text-align: center; +} +img { + border-radius: 50%; + max-width: 20vw; + filter: grayscale(100%); +} +h2 { + font-size: 2rem; + margin: 0; + padding-top: 10px; +} + +h3 { + margin: 0%; +} +.user-profile { + display: grid; + justify-items: center; +} + +.main-container .title { + margin: 0 auto; + display: grid; + grid-template-columns: repeat(6, 1fr); + align-items: center; +} + +.projects-container { + display: grid; + grid-column: span 6; + grid-gap: 2rem; + margin: 50px auto; +} + +.chart-container { + display: grid; + grid-column: span 6; + justify-items: center; + margin: 5% auto; + width: 300px; +} + +.repos { + text-align: center; + padding: 1rem; + box-shadow: 0 0.2rem 1.2rem rgba(22, 23, 23, 0.2); + transform: translateY(0); + position: relative; +} + +.repos a, +a { + text-decoration: none; + color: inherit; +} + +.card:hover, +.card:focus, +.card:active { + filter: none; + box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); + color: #95dcbe; +} + +@media (min-width: 768px) { + .profile-container { + grid-column: span 3; + } + + .chart-container { + grid-column: span 3; + } + + .projects-container { + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 992px) { + .projects-container { + grid-template-columns: repeat(3, 1fr); + } +}