diff --git a/README.md b/README.md index 1613a3b0..308813a2 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 week's project was to build a GitHub Tracker where I keep track of all GitHub repos that I've used at Technigo. The tracker updates continuously via information from the GitHub API's, so that the projects for upcoming weeks are added to the tracker. ## 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? +The project was mostly built with JavaScript and fetched data from API's, but also styled with CSS so that it has a responsive design. +I worked a lot with my project team and figured out the logic to find the right dta from the API's, and how to display it in th right way. I practiced fetching and filtering data, creating a chart function and sorting function, and how to use dynamic id's to display information in the rigth place. +I created all the JavaScript functions first and then moved on to styling the website. +I thought the project was really hard at times, and now I am really satisfied with the result. If I had more time I would like to add a search function so that the tracker can display information from different GitHub accounts. ## 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://mj-github-tracker.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..978e7272 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/assets/gitimg.jpeg b/code/assets/gitimg.jpeg new file mode 100644 index 00000000..ba234daf Binary files /dev/null and b/code/assets/gitimg.jpeg differ diff --git a/code/assets/icon.png b/code/assets/icon.png new file mode 100644 index 00000000..ba460539 Binary files /dev/null and b/code/assets/icon.png differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..569a9130 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,21 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); +const allProjects = 19; -//"Draw" the chart here 👇 +const drawChart = (finishedProjects) => { + const config = { + type: "doughnut", + data: { + labels: ["Finished projects", "Projects left"], + datasets: [ + { + label: "Technigo projects", + data: [finishedProjects, allProjects - finishedProjects], + backgroundColor: ["rgb(204, 194, 193)", "rgb(140, 100, 114)"], + hoverOffset: 4, + }, + ], + }, + }; + + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..e44e48db 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,35 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Johanna MJ's GitHub Tracker + + + + + + + +
+

GitHub Tracker

+
+
+
+
+

Projects

+
+
- - - - - - - \ No newline at end of file +
+

Overview of projects

+ +
+ + + + diff --git a/code/script.js b/code/script.js index e69de29b..fde961dd 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,95 @@ +const userName = 'JohannaMJ'; +const REPOS_API_URL = `https://api.github.com/users/${userName}/repos`; +const USER_URL = `https://api.github.com/users/${userName}`; +const reposContainer = document.getElementById('projects'); +const profileContainer = document.getElementById('profileContainer'); + +const userProfile = () => { + fetch(USER_URL) + .then((response) => response.json()) + .then((data) => { + profileContainer.innerHTML = ` +
+ +
+
+

${data.name}

+

Located in ${data.location}

+

GitHub name: ${data.login}

+
+
+ +
+ `; + }); +}; + +const fetchRepos = () => { + fetch(REPOS_API_URL) + .then((response) => response.json()) + .then((data) => { + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith('project-') + ); + + // sort function (shows latest to oldest repo) + forkedRepos.sort((oldestRepo, newestRepo) => { + return new Date(newestRepo.pushed_at) - new Date(oldestRepo.pushed_at); + }); + + forkedRepos.forEach( + (repo) => + (reposContainer.innerHTML += ` +
+

${repo.name}

+

Branch: ${repo.default_branch}

+

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

+

Number of commits:

+

Go to repo: Click here!

+
+ `) + ); + drawChart(forkedRepos.length); + fetchPullRequests(forkedRepos); + }) + .catch(() => { + reposContainer.innerHTML = `

Sorry, we could not find the information

`; + }); +}; + +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) => { + const myPullRequests = data.find( + (pull) => pull.user.login === repo.owner.login + ); + if (myPullRequests) { + fetchCommits(myPullRequests.commits_url, repo.name); + } else { + document.getElementById(`commits-${repo.name}`).innerHTML = + 'No pull request yet'; + } + }); + }); +}; + +const fetchCommits = (url, myRepoName) => { + fetch(url) + .then((response) => response.json()) + .then((data) => { + document.getElementById(`commits-${myRepoName}`).innerHTML += data.length; + }); +}; + +userProfile(); +fetchRepos(); diff --git a/code/style.css b/code/style.css index 7c8ad447..35e3bfaa 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,232 @@ +* { + padding: 0; + margin: 0; +} + body { - background: #FFECE9; -} \ No newline at end of file + background-color: rgb(50, 50, 51); + font-family: "Montserrat", sans-serif; + margin: 0; + color: black; + height: 100%; + width: 100%; +} + +.hero-img { + background-image: url("./assets/gitimg.jpeg"); + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + height: 70vh; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + background-color: rgb(189, 194, 189); + z-index: -1; +} + +.welcome-message { + text-align: center; + position: absolute; + top: 25%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 40px; + color: rgb(189, 194, 189); + width: 90%; +} + +.wrapper { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0px; + width: 100%; +} + +.profile-container { + background-color: rgb(50, 50, 51); + color: rgb(204, 194, 193); + width: 95%; + height: 100%; + margin: 1vw; + padding: 5px; + display: flex; + flex-direction: column-reverse; + justify-content: center; + align-items: center; +} + +.profile-info-container { + text-align: center; +} + +.profile-img-container { + display: flex; + justify-content: center; + align-items: center; + padding-top: 15px; + padding-bottom: 15px; +} + +.profile-img { + border-radius: 50%; + width: 50%; + height: 50%; + margin-top: -14vh; + -webkit-filter: grayscale(60%); + filter: grayscale(60%); + border: 10px solid rgb(50, 50, 51); +} + +.profile-text { + font-size: 15px; + margin-bottom: 5px; +} + +.icon { + height: 2px; + width: 2px; +} + +hr { + border-top: 1px solid rgb(204, 194, 193); + border-radius: 50%; + width: 95%; + margin: auto; +} + +.projects { + display: flex; + flex-direction: column; +} + +h2 { + color: rgb(204, 194, 193); + padding: 20px; + text-align: center; +} + +.repo-card { + background-color: rgb(204, 194, 193); + margin: 10px 20px; + padding: 20px; + border-radius: 15px; +} + +h3 { + margin-bottom: 15px; + margin-left: 20px; +} + +.project-info { + margin-bottom: 5px; + margin-left: 20px; +} + +a:link { + text-decoration: none; + color: black; +} + +a:hover { + text-decoration: underline; +} + +a:visited { + color: black; +} + +.chart-container { + text-align: center; + font-size: 18px; + padding: 20px; + font-weight: bold; + color: rgb(204, 194, 193); +} + +.chart-text { + padding: 20px; +} + +.chart { + max-width: 300px; + max-height: 300px; + display: initial !important; +} + +@media (min-width: 768px) { + .welcome-message { + font-size: 60px; + background-position: 25% 40%; + } + + .profile-text { + font-size: 20px; + } + + h2 { + font-size: 35px; + } + + .projects { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .repo-card { + margin: 10px; + width: 40%; + } + + h3 { + font-size: 23px; + margin-left: 10px; + } + + .project-info { + margin-left: 10px; + font-size: 18px; + } +} + +@media (min-width: 992px) { + .welcome-message { + font-size: 60px; + top: 20%; + } + + .profile-container { + display: flex; + flex-direction: row-reverse; + } + + .profile-info-container { + text-align: left; + margin-top: -8vh; + width: 50%; + } + + .profile-img-container { + width: 50%; + } + + .profile-text { + margin-bottom: 7px; + } + + .icon-container { + margin-top: -15vh; + } + + .repo-card { + margin: 10px 5px; + width: 27%; + } + + .chart-container { + margin: 20px, 0px; + } +}