diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..7f18d07f Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..8c916a81 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +// .gitignore file +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..7bb4494a 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,27 @@ # GitHub Tracker -Replace this readme with your own information about your project. +The assignment was to build a website that holds all Technigo-projects on Github. We should fetch these by API, and using filter to display the correct ones. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +Furthermore the website should include some information from each repository, such as default branch and number of commit messages. + +The website should also include a chart that showed how many projects was done in the Bootcamp. ## 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 with fetching the Github API for my user and my repositories. Then I could display my username and profile pic as well as filter out the repositories so only the forked ones marked as "project-" was displayed. + +I continued with building up info about push date, default branch etc in innerHTML. Then I fetched all pullrequests and filtered out so only my own was left by comparing "pull.user.login" with "repo.owner.login". I used a dynamic ID for the innerHTML-element to display the number of commits in the panel. + +Then I created a chart using chart.js and called the function for it in script-file. To be able to style the chart I put it in a div-element in the HTML-file. + +For this project I used a personal API token from Github, and making it secret by using secret.js and gitignore. + +Lastly I styled the webpage and made it responsive. I'm happy with the accordion and the way the flex/grid is responsive, but the headers in the user-section doesn't look quite right in desktop-size. I think it is because of the position: absolute and how the headers are positioned in relation to the profile pic and the chart. + +If I had more time I would give the styling of the website a little more love. I would also make another chart. + + ## 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://confident-brattain-b7ba85.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..4493502e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,32 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') -//"Draw" the chart here 👇 +//DOM-selector for the canvas +const ctx = document.getElementById('chart').getContext("2d"); + +//drawing the chart +const drawChart = (projects) => { +const labels = [ + 'Finished projects', + 'Upcoming projects', +]; + +const data = { + labels: labels, + datasets: [{ + data: [projects, 19-projects], + label: 'Bootcamp progress', + backgroundColor: ['rgb(255, 99, 132)', 'rgb(104, 131, 180)'], + }] +}; + +const config = { + type: 'doughnut', + data: data, + options: {} +}; + +// new Chart(document.getElementById('chart'),config); +const myChart = new Chart( + document.getElementById('chart'), + config + ); +} diff --git a/code/images/GitHub-Mark-32px.png b/code/images/GitHub-Mark-32px.png new file mode 100644 index 00000000..8b25551a Binary files /dev/null and b/code/images/GitHub-Mark-32px.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..436414ea 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,39 @@ - Project GitHub Tracker + GitHub Tracker + + + + + -

GitHub Tracker

-

Projects:

-
- - +
+
+

GitHub Tracker

+

USER

+
+

PROJECTS

+
+

PROGRESS

+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..0b7d01b0 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,102 @@ +// DOM-selectors stored as variables +const userContainer = document.getElementById('user-container') +const projectsContainer = document.getElementById('projects-container') + +// global variables + storing API +const username = 'mathildakarlsson' +const API_USER = `https://api.github.com/users/${username}` +const API_REPOS = `https://api.github.com/users/${username}/repos` + +//personal token +const options = { + method: 'GET', + headers: { + Authorization: `token ${GITHUBTOKEN}` + } + } + +// step 1 - fetch user +const getUser = () => { + fetch(API_USER, options) + .then(res => res.json()) + .then(data => { + userContainer.innerHTML += ` + +
+ + ${data.login} +
+ ` + }) +} +getUser() + +//step 2 - fetch repos and filter + open/closing accordion +const getRepos = () => { + fetch(API_REPOS, options) + .then(res => res.json()) + .then((data) => { + const filteredRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project')) + filteredRepos.forEach((repo) => { + projectsContainer.innerHTML += ` +
+ +
+ +

Link to repo

 +

Branch: ${repo.default_branch}

+

Main language: ${repo.language}

+

Number of commits:

+

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

+
+
+ ` + + //open and close accordion with project info + const acc = document.getElementsByClassName("project-name") + let i + for (i = 0; i < acc.length; i++) { + acc[i].addEventListener("click", function() { + this.classList.toggle("active") + const panel = this.nextElementSibling + if (panel.style.maxHeight) { + panel.style.maxHeight = null + } else { + panel.style.maxHeight = panel.scrollHeight + "px" + } + }) + } + }) + getPullRequests(filteredRepos) + drawChart(filteredRepos.length) + }) +} + +getRepos() + +// step 3 - fetch pull requests +const getPullRequests = (filteredRepos) => { + filteredRepos.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) + .then(res => res.json()) + .then(data => { + const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login) + if (myPullRequests) { + getCommits(myPullRequests.commits_url, `${repo.name}`) + } else { + document.getElementById(`commit-${repo.name}`).innerHTML += + `commits made by group partner` + } + }) + +//step 4 - fetch commits and display number +const getCommits = (URL, repoName) => { + fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`, options) + .then(res => res.json()) + .then(data => { + document.getElementById(`commit-${repo.name}`).innerHTML += data.length + }) + } + }) +} + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..bb216dc9 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,257 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + body { - background: #FFECE9; + font-family: 'PT Sans', sans-serif; +} + +a { + text-decoration: none; + font-weight: 600; +} + +.user-container { + height: 100vh; + display: flex; + flex-direction: column; +} + +.github-tracker { + margin-top: 3.5em; + padding: 2em; + font-size: 30px; + font-weight: 400; + letter-spacing: .1em; + align-self: center; +} + +.user-header { + display: none; +} + +.github-user { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.github-logo { + background-color: white; + border-radius: 1em; + height: 1.7em; +} + +.user-name { + padding-left: .5em; + font-weight: 600; + font-size: 20px; + color: black; +} + +.user-img { + height: 11em; + align-self: center; + border-radius: 8em; + margin-bottom: 3.5em; +} + +.projects-container { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; +} + +.projects-header { + margin-bottom: 2em; + font-size: 28px; + letter-spacing: .5em; + font-weight: 100; + text-align: center; +} + +.project-name { + font-size: 25px; + color: white; + cursor: pointer; + padding: .8em .5em; + margin-top: 1em; + width: 90vw; + border: none; + outline: none; + transition: 1s; + overflow: visible; + text-align: center; + background-color: rgb(104, 131, 180); +} + +.project-name:hover { + font-weight: 800; + background-color: rgb(59, 83, 129); +} + +.panel { + max-height: 0; + overflow: hidden; + transition: max-heigth 1s ease-out; + font-size: 20px; + transition: max-heigth 1s ease-out; + color: rgb(104, 131, 180); + text-align: center; + margin-bottom: 1em; +} + +.panel a { + color: rgb(104, 131, 180); +} + +.active + .panel { + display: block; + transition: 1s; + margin: 1em 0; +} + +.active { + font-weight: bold; + border-radius: 1em; + background-color: rgb(59, 83, 129); +} + +.chart-header { + margin: 2.5em 0 2em 0; + font-size: 28px; + letter-spacing: .5em; + font-weight: 100; + text-align: center; +} + +.chart { + height: 300px; + width: 300px; + margin-left: 2.5em; +} + +.chart-container { + display: flex; + justify-content: center; +} + +footer { + height: 15vh; + width: 100vw; + text-align: center; + padding-top: 4em; + margin-top: 4em; +} + + +/* TABLET */ +@media screen and (min-width: 667px) and (max-width: 1024px) { + .projects-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + align-items: center; + justify-items: center; + + } + + .project-name { + width: 40vw; + } + + .chart { + height: 300px; + width: 300px; + display: flex; + justify-content: center; + align-items: center; + } +} + +/* DESKTOP */ +@media (min-width: 1024px) { + + .user-container { + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-around; + } + + .github-tracker { + position: absolute; + top: -30%; + left: 35%; + font-size: 50px; + } + + .github-logo { + position: absolute; + top: 11%; + left: 37%; + border-radius: 1em; + height: 3em; + } + + .user-header { + display: block; + position: absolute; + top: 29%; + right: 67%; + font-size: 25px; + letter-spacing: .5em; + font-weight: 100; + } + + .user-img { + position: absolute; + top: 40%; + left: 20%; + height: 250px; + border-radius: 5%; + } + + .user-name { + position: absolute; + top: 80%; + right: 65%; + font-size: 25px; + } + + .chart-header { + font-size: 25px; + position: absolute; + top: 20%; + right: 18%; + } + + .chart { + position: absolute; + top: 35%; + left: 60%; + height: 320px; + width: 320px; + } + + .projects-container { + display: grid; + grid-template-columns: auto auto auto; + align-items: center; + justify-content: center; + } + + .projects-header { + font-size: 40px; + } + + .project-name { + width: 25vw; + margin: 1em .5em 2em .5em; + } } \ No newline at end of file