diff --git a/README.md b/README.md index 1613a3b0..4be6db68 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,10 @@ # GitHub Tracker -Replace this readme with your own information about your project. +The aim of the project was to build a personal github tracker that would show my technigo-projects. This was done by fetching and displaying data from API's, using forEach, filter and find methods. A doughnut chart was also implemented to give a visual display of the amount of projects done. In terms of styling, a CSS grid and a hero header was used. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. - -## 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? +It was a fun and challenging project in terms of understanding the javascript flow, but I am happy with the result. If I had more time, I would like to make a search function and sort the repositories based on dates. ## 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://mt-dotsegithubtracker.netlify.app/ + diff --git a/TODO b/TODO new file mode 100644 index 00000000..656f1058 --- /dev/null +++ b/TODO @@ -0,0 +1,11 @@ +// 1) fetch the repos and console log them +// 2) get them in the browser +// 3) filter out the technigo repos +// 4) test chart library + +//1. Find only the PR that you made by comparing pull.user.login // with repo.owner.login +//2. Now you're able to get the commits for each repo by using the commits_url as an argument to call another function +//3. You can also get the comments for each PR by calling +// another function with the review_comments_url as argume +//Remember to pass along your filtered repos as an argument when +//you are calling this function diff --git a/code/assets/plant.jpg b/code/assets/plant.jpg new file mode 100644 index 00000000..cdebad6f Binary files /dev/null and b/code/assets/plant.jpg differ diff --git a/code/assets/texture.jpg b/code/assets/texture.jpg new file mode 100644 index 00000000..d079bf98 Binary files /dev/null and b/code/assets/texture.jpg differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..178b7133 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', 'Remaining'], + datasets: [ + { + label: 'My First Dataset', + data: [amount, 20 - amount], // 6 finished projects and 14 projects remaining + backgroundColor: ['#52734D', '#AAAAAA'], + hoverOffset: 4, + }, + ], + }, + }; + const myProjects = new Chart(ctx, config); //Taking two arguments: 1) where to put 'ctx' and 2) what to put 'config' +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..61fa820d 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,38 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

GitHub Tracker

+
+ +
+
- - - - \ No newline at end of file + + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..ffd4d3e7 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,83 @@ +// THE DOM SELECTORS +const projectContainer = document.getElementById('projects'); +const profileSection = document.getElementById('profileSection'); + +// URLS STORED IN VARIABLES +const USER = 'MT-dotse'; //my github name stored in the variable USER +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; // a variable that stores the URL that fetching the repositories +const MY_PROFILE = `https://api.github.com/users/MT-dotse`; //my github profile + +//FETCHING THE GITHUB PROFILE, NAME AND USERNAME + +fetch(MY_PROFILE) + .then((response) => response.json()) + .then((data) => { + profileSection.innerHTML = ` +
+ profile picture +

Hi world, I'm ${data.name}

+

${data.bio}

+

${data.location}

+

${data.login}

+
+ `; + }); + +// FETCHING THE REPOS +const getRepositories = () => { + fetch(REPOS_URL) + .then((response) => response.json()) + .then((data) => { + const technigoRepositories = data.filter( + (repo) => repo && repo.name.startsWith('project-') + ); + + technigoRepositories.forEach((repo) => { + projectContainer.innerHTML += ` +
+

${repo.name}

+

Branch: ${repo.default_branch}

+

Main Language: ${repo.language}

+

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

+

Number of commits:

+

To repo...

+ +
+ `; + }); + getPullRequestsArray(technigoRepositories); + drawChart(technigoRepositories.length); + }); +}; + +//FETCHING THE PULL REQUESTS +const getPullRequestsArray = (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 + ); + + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No pull request yet'; + } + }); + }); +}; + +//FETCHING THE COMMITS +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); +}; + +getRepositories(); diff --git a/code/style.css b/code/style.css index 7c8ad447..e5fce1c3 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,129 @@ +*, +*::before, +*::after { + box-sizing: inherit; +} + +h1 { + font-family: 'Bebas Neue', cursive; + justify-content: center; + align-items: center; + display: flex; + max-width: 100%; + font-size: 30px; +} + +h2 { + font-family: 'Bebas Neue'; + font-size: 18px; +} + +p { + font-family: 'Bebas Neue', cursive; + color: black; +} + +/* Hero-Header */ + +.header { + background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)), + url(./assets/plant.jpg); + background-repeat: no-repeat; + background-size: cover; + padding: 100px 0; + height: 60vh; + position: relative; + line-height: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.picture { + width: 120px; + justify-content: center; + border-radius: 50%; + -webkit-filter: grayscale(10%); + margin-bottom: 15px; +} + +.profile-section { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 20px; +} + +.profile-section p { + color: antiquewhite; + letter-spacing: 2px; + font-weight: 400; + text-shadow: 1px 1px black; + font-size: 20px; + line-height: none; +} + +.profile-section p a { + color: antiquewhite; + text-decoration: none; + line-height: 0; +} + +.profile-section p a:hover { + color: #aaaaaa; +} + +/* Main section */ + body { - background: #FFECE9; -} \ No newline at end of file + background-image: url(./assets/texture.jpg); + background-repeat: no-repeat; + background-size: cover; + line-height: 1.5; +} +#projects { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + margin-right: 27px; + flex-wrap: wrap; +} + +.repo-card { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 10px 10px; + padding: 15px 0; + border-radius: 20px; + line-height: 0; + background-color: antiquewhite; +} + +.repo-card a { + color: black; + text-decoration: none; +} + +.repo-card a:hover { + color: #aaaaaa; +} + +.chart { + width: 300px; + height: 300px; + margin-left: 20px; +} +/*********Media Queries*********/ + +/* Desk-topview */ +@media (min-width: 931px) { + .profile-section { + position: relative; + right: 120px; + top: 51px; + } +}