diff --git a/README.md b/README.md index 1613a3b0..952f5a32 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ -# GitHub Tracker +# 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 to create a GitHub tracker using JavaScript and GitHub API. ## 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 started the project by fetching the data and filtered the repositories I wanted to show on my site. My main struggle this week was JavaScript, I found it hard to create more structure of it. To solve my problem I discussed a lot with my team and asked questions in StackOverflow. If I had more time I would like to fetch more data to display on my page, and also make it even more responsive. ## 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://github-tracker-emmajosefina.netlify.app/ diff --git a/code/.gitignore b/code/.gitignore new file mode 100644 index 00000000..da320979 --- /dev/null +++ b/code/.gitignore @@ -0,0 +1,2 @@ +// .gitignore file +secret.js \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..b2b4020c 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,34 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('chart').getContext('2d') + +const renderChart = (completedProjects) => { + + + const labels = [ + 'Projects done', + 'Projects left to do' + ]; + + const data = { + labels: labels, + datasets: [{ + backgroundColor: 'rgb(217, 169, 165)', + label: 'Technigo Projects', + borderColor: 'rgb(192, 113, 106)', + data: [completedProjects, 19-completedProjects], + }] + }; + + const config = { + type: 'bar', + data: data, + options: { + responsive: true, + } + }; + + + new Chart( + document.getElementById('chart'), + config +)} -//"Draw" the chart here 👇 diff --git a/code/images/github-logo-extra-big.png b/code/images/github-logo-extra-big.png new file mode 100644 index 00000000..192846a1 Binary files /dev/null and b/code/images/github-logo-extra-big.png differ diff --git a/code/images/github-logo-small.png b/code/images/github-logo-small.png new file mode 100644 index 00000000..628da97c Binary files /dev/null and b/code/images/github-logo-small.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..c5af9a72 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,59 @@ - Project GitHub Tracker + Project GitHub Tracker – emmajosefina + + + + + + + + + + + + + + + -

GitHub Tracker

-

Projects:

-
+
+ + github-logo + +
+ + - - +
+
+
+ +
+
+ +
+ +
+

+ + +

+ +
+

Project 7 – Github Tracker

+

By Emma Lindell @ Technigo Bootcamp 2022

+
+ +
+ + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..0c11b21b 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,134 @@ +// Token +const options = { + method: 'GET', + headers: { + Authorization: `TOKEN ${API_TOKEN}` + } +} + +// DOM selectors +const projectInfo = document.getElementById('projectInfo') +const userInfo = document.getElementById('userInfo') +const aboutUser = document.getElementById('aboutUser') +const profilePicture = document.getElementById('profilePicture') +const mainContent = document.getElementById('mainContent') + + +// Github API +const username = 'emmajosefina' +const API_URL = `https://api.github.com/users/${username}/repos` +const API_USER = `https://api.github.com/users/${username}` + + + + //------------------ FIRST FETCH - USER PROFILE -----------------------// +const getProfile = () => { + fetch(API_USER, options) + .then((res) => res.json()) + .then((data) => { + mainContent.innerHTML += + ` +
+ +

${data.name}

+

${data.login}

+
+
+

${data.bio} 👩‍💻

+
+ `; + }); + }; + getProfile(); + + + //------------------ SECOND FETCH - ALL REPOS -----------------------// +const findingAllRepos = (repos) => { + fetch(API_URL, options) + .then((res) => res.json()) + .then((data) => { + + + + // Fetches only repositories from Technigo // + const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project-')) + + + forkedRepos.forEach((repo) => + projectInfo.innerHTML += + + ` +
+

+ + ${repo.name.replace('project-', '').replace('-', ' ')} + +

+

+ Updated: + ${new Date(repo.pushed_at).toLocaleDateString('en-SE', {year: 'numeric', month: 'short', day: 'numeric'})} +

+

+ + Default branch: + ${repo.default_branch} +

+

+ + Number of commits: + +

+

+ Pull requests: +

+

+ github-logo + + ${repo.name} + +

+
+ ` +) +getPullRequest(forkedRepos) +renderChart(forkedRepos.length) +}) +} +findingAllRepos() + + + +const getCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl, options) + .then((res) => { + return res.json() + }) + .then((data) => { + + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + }) + } + + //------------------ THIRD FETCH - PULL REQUESTS -----------------------// +const getPullRequest = (repos) => { + repos.forEach((repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) + .then((res) => res.json()) + .then((data) => { + + //Filter out pullrequests + const pulls = data.find((pull) => pull.user.login === repo.owner.login) + const myPullRequests = data.filter((pullRequest) => { + return pullRequest.user.login === username + }) + document.getElementById(`pull-request-${repo.name}`).innerHTML = `Pull Request: ${myPullRequests.length}` + if (pulls) { + getCommits(pulls.commits_url, repo.name) + } else { + document.getElementById( + `commit-${repo.name}`).innerHTML += `no commits visible, pull request unavailable.`; + } + }); + + }); + }; diff --git a/code/style.css b/code/style.css index 7c8ad447..294d566e 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,255 @@ +/* MOBILE */ + +:root { + box-sizing: border-box; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: #efefef30; + margin: 0; + width: 100% fixed; + font-family: "Heebo", sans-serif; +} + +.main-content, +.projectContainer { + margin: 0 16px 0 16px; +} + +.navbar { + background: #c0716a; + display: flex; + justify-content: center; + padding: 16px; +} + +.github-logo { + width: 32px; + display: flex; + justify-content: center; +} + +.profile-box { + display: flex; + flex-direction: column; + margin-bottom: 16px; + margin-top: 20px; + align-items: center; +} + +.full-name { + font-weight: 400; + font-size: 26px; + line-height: 1.25; + color: #1c1b1b; + margin-block-end: 0; + margin-block-start: 10px; +} + +.username { + font-weight: 200; + font-size: 20px; + color: #1c1b1b; + margin-block-start: 7px; +} + +.profile-picture { + border-radius: 50%; + height: 120px; + width: 120px; + margin-top: 15px; + border: solid 2px rgba(27, 31, 36, 0.15); +} + +.status-box { + padding: 4px 0 4px 0; + border: 1px solid #d0d7de; + border-radius: 6px; + display: block; + font-size: 16px; + color: #57606a; + padding: 8px; + margin-bottom: 20px; +} + +.status-text { + margin-block-start: 0; + margin-block-end: 0; +} + +.presentation-text { + color: #24292f; + margin-top: 22px; +} + +.header-project { + font-size: 20px; + color: #c0716a; + text-transform: capitalize; +} + +.chart-container { + margin: 16px; +} + +/* Footer styling */ +footer { + background: #c0716a; + padding: 0.15rem; + color: #24292f; + text-align: center; +} + +footer > p { + margin-block-end: 0; +} + +.footer-text { + color: #f2e3e1; + font-size: 18px; + font-weight: 200; + margin-block-end: 0; +} + +.fa { + width: 30px; + text-align: center; + text-decoration: none; + margin-top: 10px; + color: #f2e3e1; + padding: 0.3em; + margin-block-end: 0; +} + +.fa:hover { + color: #ffffff; +} + +.projectContainer { + border: 1px solid #d0d7de; + border-radius: 5px; + margin-bottom: 20px; + padding: 10px; + background: #c0716a24; +} + +.pullrequestStyle { + font-weight: 600; + color: #512d1eac; + font-size: 15px; +} + +.project-url { + color: #c0716a; + font-size: 15px; +} + +/* TABLET */ +@media only screen and (min-width: 768px) and (max-width: 1023px) { + .github-logo { + width: 42px; + } + + .profile-picture { + height: 200px; + width: 200px; + } + + .full-name { + font-size: 38px; + } + + .username { + font-size: 26px; + } + + .status-box { + font-size: 18px; + } + + .header-project { + font-size: 24px; + } + + .project-url { + font-size: 18px; + } + + .presentation-text { + font-size: 22px; + } + + /* FLEX */ + + .chart-parent { + text-align: -webkit-center; + } + + .chart-container { + max-width: 80%; + } + + .projectContainer { + width: 40%; + } + + .user-info { + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 100%; + } + + .status-text { + margin-block-start: 0; + margin-block-end: 0; + padding: 15px; + } +} + +/* DESKTOP */ +@media (min-width: 1025px) { + .profile-picture { + height: 250px; + width: 250px; + } + + .status-box { + font-size: 20px; + } + + .status-text { + padding: 15px; + } + + .header-project { + font-size: 24px; + } + + .project-url { + font-size: 18px; + } + + .presentation-text { + font-size: 22px; + } + + .chart-parent { + text-align: -webkit-center; + } + + .chart-container { + max-width: 60%; + } + + .user-info { + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 100%; + } + + .projectContainer { + width: 25%; + } +}