diff --git a/README.md b/README.md index 1613a3b0..3d7c9d79 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. +This weeks project was creating a git hub tracker with a list of all my Technigo Repositories as well as amount of commits for each repo. ## 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 used javascript, CSS and some html. I encountered most problem in the beginning when trying to fetch my data from github. I followed Jennies and Maks videos and constantly ran out of fetches. Eventually I managed. For styling I looked at my teammate Maria Sjögrens Code and implemented it step by step, by doing that I learned a lot of things that I didn't know before. + +What technologies did you use? If you had more time, what would be next? +If I had more time I would work more on the links, because I want them to open in a new window but I didnt manage to do it. I would also try to put the chart in the profile-section and add som red level stuff. ## 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://infallible-bassi-7672f0.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..a7c4380e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,27 @@ 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: [ + 'rgba(192, 253, 196, 0.48)', + 'rgba(255, 159, 209, 0.8)', + ], + hoverOffset: 4 + }], + }, + }; + + const projectsChart = new Chart(ctx, config); +} + + diff --git a/code/index.html b/code/index.html index 2fb5e0ae..daaa3660 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,31 @@ 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..e7f50e07 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,89 @@ +const USER = 'pcruzem'; +const PROFILE_URL = `https://api.github.com/users/${USER}`; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; + +const profileContainer = document.getElementById('profile-container'); +const projectsContainer = document.getElementById('projects'); + + +// fetch Profile function +const fetchProfile = () => { + fetch(PROFILE_URL) + .then((res) => res.json()) + .then((profileData) => { + profileContainer.innerHTML += ` + +

${profileData.name}

+ + `; + }); + }; + +const fetchRepositories = () => { + fetch (REPOS_URL) + .then((res)=> res.json()) + .then((data) => { + const technigoRepositories = data.filter( + (repo) => repo.name.includes('project-') && repo.fork + ); + + technigoRepositories.forEach((repo) => { + projectsContainer.innerHTML += ` +
+ +

${repo.name}

+

Default branch: ${repo.default_branch}

+

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

+

Amount of commits:

+ +
+ `; + + }); + + + fetchPullRequestsArray(technigoRepositories); + + //Draw chart with technigoRepos data + drawChart(technigoRepositories.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) + .then((res) => res.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ); + console.log(myPullRequest); + + // Detect if we have pull request or not. + // If yes - call fetchCommits function + // If no - inform user that no pull request was yet done + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No pull requests made by pcruzem'; + } + }); + }); +}; + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); +}; + +fetchProfile(); +fetchRepositories(); \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..520d21ad 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,108 @@ body { - background: #FFECE9; + background: rgb(163, 211, 198); +} + +.title { + font-family: 'Archivo Black', sans-serif; + font-size: 1.6rem; + text-align: center; +} + +h2, p, button { + font-family: 'Roboto', sans-serif; +} + +.profile-img { + border-radius: 50%; + max-width: 200px; +} + +button { + font-size: 1.3rem; + border: 1px solid #95dcbe; + border-radius: 8px; + padding: 14px; + box-shadow: 0 0.2rem 1.2rem rgba(22, 23, 23, 0.2); + transition-duration: 0.4s; +} + +button:hover { + background-color: #f5cbe6; + color: white; +} + +.main-container .title { + margin: 0 auto; + display: grid; + grid-template-columns: repeat(6, 1fr); + align-items: center; +} + +.profile-container { + display: grid; + grid-column: span 6; + justify-items: center; + padding-bottom: 2rem; +} + +.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; +} + + +.card { + background: #fff; + text-align:center; + padding: 1.5rem; + box-shadow: 0 0.2rem 1.2rem rgba(22, 23, 23, 0.2); + transform: translateY(0); + position: relative; + +} + +.card 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); + } + } \ No newline at end of file