diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..72a188b1 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..2c46cc7c 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ # 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 assignment this week was to create a place to keep track of the GitHub repositories that we are using during the Technigo Boot Camp. For this we were instructed to fetch data using the GitHub API:s and then style the page to be responsive. ## 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 challenge this week was to adapt to the fact that the GitHub API has a rate limit of 60 requests per hour. This means that when you are fetching all the requested data in the minimum requirements, you can only reload the page a few times before you reach the API limits... + +When I had added the minimum requirements, I therefore inserted dummmy code to the html to be able to style the page according to my likings without running into the 403 issues and the content not being displayed. I also noticed that the API request limit is applied at the network level and that I was able to work around the limitations by connecting to the mobile network on the different cell phones available in my household. + +This week I only had time to work on the blue levels requirements. If I had more time, I would like to also add some of the red level requirements, for example make it possible to sort my list of repos in different ways and to disply the comments I got from each pull request. ## 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://molbimien-week-7-project-github-tracker.netlify.app diff --git a/code/chart.js b/code/chart.js index 92e85a30..3c7e8eaa 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,27 @@ //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(219,57,141)', + 'rgb(0,255,255)', + ], + hoverOffset: 4 + }], + }, + }; + + const projectsChart = new Chart(ctx, config); +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..0194f8a0 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,32 @@ - Project GitHub Tracker + Technigo Boot Camp GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
+
+

Technigo Boot Camp GitHub Tracker

+
+
+ +
+ +
+ +
- - +
+
+
+ + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..e618544e 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,87 @@ +const USER = 'molbimien'; +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'); + +// fetchProfile function +const fetchProfile = () => { + fetch(PROFILE_URL) + .then(res => res.json()) + .then(profileData => { + profileContainer.innerHTML += ` + +

${profileData.name}

+

${profileData.login}

+ ` + }); + } + + // fetchRepositories function +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).toLocaleDateString()}

+

Number 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 + ); + + // 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 = + 'This was a group project. No pull requests made by molbimien.'; + } + + }); + }); +}; + +// fetchCommits function +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + + }); +}; + +fetchProfile(); +fetchRepositories(); diff --git a/code/style.css b/code/style.css index 7c8ad447..cd209bc6 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,152 @@ body { - background: #FFECE9; + background: #f7f7f7; + font-size: 1rem; + font-family: 'Open Sans', sans-serif; +} + +h1 h2 h3 { + font-family: 'Merriweather', serif; +} + +header { + text-align: center; + font-size: 1.6em; +} + +.page-container { + margin: 0 auto; + display: grid; + grid-template-columns: repeat(6, 1fr); + align-items: center; + width: 95%; +} + +.profile-container { + font-size: 1.1rem; + display: grid; + grid-column: span 6; + justify-items: center; + text-align: center; +} + +.profile-img { + border-radius: 50%; + max-width: 250px; + align-content: center; +} + +.profile-container h2 { + margin-top: 1rem; + margin-bottom: 0; +} + +.canvas-container { + display: grid; + grid-column: span 6; + justify-items: center; + margin: 5% auto; + width: 300px; +} + +.projects-container { + display: grid; + grid-column: span 6; + grid-gap: 20px; + margin: 50px auto; +} + +.card { + background: #fff; + text-align:left; + padding: 2rem; + box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2); + transform: translateY(0); + position: relative; +} + +.card a { + text-decoration: none; + color: inherit; +} + +.card h3 { + font-size: 1.8rem; +} + +.card:hover, +.card:focus, +.card:active { + filter: none; + top: -0.25rem; + box-shadow: 0 4px 5px rgba(0,0,0,0.2); + color: #DB398D; +} + +footer { + display: flex; + flex-direction: column; + text-align: center; + height: 64px; + padding-top: 16px; + border-top: 1px dotted #DB398D; + text-transform: uppercase; + font-size: 0.8rem; +} + +a, a > span { + position: relative; + color: inherit; + text-decoration: none; +} +a:before, a:after, a > span:before, a > span:after { + content: ''; + position: absolute; + transition: transform .5s ease; +} + +.hover:before { + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background: #DB398D; + transform: scaleX(0); +} + +.hover:hover:before { + transform: scaleX(1); +} + +footer a:link { + color: #DB398D; +} + +footer a:visited { + color: grey; +} + +footer a:active { + background-color: cyan; +} + +/* styling for tablet and desktop */ + +@media only screen and (min-width: 768px) { + .profile-container { + grid-column: span 3; + } + + .canvas-container { + grid-column: span 3; + } + + .projects-container { + grid-template-columns: 1fr 1fr; + } +} + +@media only screen and (min-width: 992px) { + .projects-container { + grid-template-columns: repeat(3, 1fr); + } } \ No newline at end of file