diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..01625912 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..143f9792 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +code/secret.js diff --git a/README.md b/README.md index 1613a3b0..b78841a4 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,12 @@ # 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. +A really tricky project, happy that everything is working! With more time I would have worked +more with the styling and added some more fetched information, maybe a different kind of chart. ## 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? +Create a github tracker fetching information from my GitHub-profile. ## 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://thereese-githubtracker.netlify.app diff --git a/code/bakgrund.jpeg b/code/bakgrund.jpeg new file mode 100644 index 00000000..65a6467e Binary files /dev/null and b/code/bakgrund.jpeg differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..217ae8a9 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,24 @@ 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(7,145,96)", "rgba(90, 112, 55, 0.1)"], + borderColor: ["rgb(0,0,0)"], + borderWidth: 0.3, + hoverOffset: 4, + }, + ], + }, + }; + +const projectsChart = new Chart(ctx, config); +} + \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..1823957b 100644 --- a/code/index.html +++ b/code/index.html @@ -6,15 +6,28 @@ Project GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
- - - +
+

| github tracker

+
+
+
+
+ +
+ +
+
+
+ +
+
+
+ diff --git a/code/script.js b/code/script.js index e69de29b..d4e46101 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,85 @@ +//DOM SELECTORS + +const projectsContainer = document.getElementById('projects') +const userContainer = document.getElementById('user-container') +const userInfo = document.getElementById('user-info') +const userImg = document.getElementById('user-img') + +//APIS TO FETCH FROM +const username = 'Thereese' +let reponame +const API_URL = `https://api.github.com/users/${username}/repos` +const API_URL_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls` + + +const options = { + method: 'GET', + headers: { + Authorization: 'API_TOKEN' + } +} + + +//FETCH USERNAME AND PROFILEPIC +const getUser = () => { + fetch (`https://api.github.com/users/${username}`, options) + .then((res) => res.json()) + .then((data) => { + userImg.innerHTML= + `` + userInfo.innerHTML= + `

${data.name}

+

| ${data.login}

` + }) +} + + +//FETCH REPOS AND FILTER TECHNIGOPROJECTS. DATA TO PROJECTCONTAINER. +const getRepos = () => { + fetch (API_URL, options) + .then((res) => res.json()) + .then((data) => { + const filterTechnigoProjects = data.filter((repo) => repo.fork && repo.name.startsWith("project")) + filterTechnigoProjects.forEach(repo => { + let projectID = repo.id + projectsContainer.innerHTML+= + `
+

${repo.name}

 +

Default branch: ${repo.default_branch}

+

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

+

Commits:

+
` + + }) + getPullRequests(filterTechnigoProjects) + drawChart(filterTechnigoProjects.length) + }) +} + +getRepos() +//FETCH PULLREQUESTS, SORT AND RETURN DATA OR COMMENT +const getPullRequests = (filterTechnigoProjects) => { + filterTechnigoProjects.forEach(repo => { + fetch (`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) + .then((res) => res.json()) + .then((data) => { + const filterMyPull = data.find((pull) => pull.user.login === repo.owner.login) + if (filterMyPull) { + getCommits(filterMyPull.commits_url, repo.name) + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + '

No pull requests made

' + } + }) + }) +} + +const getCommits = (URL, repoName) => { + fetch(URL, options) + .then ((res) => res.json()) + .then (data => { + document.getElementById(`commit-${repoName}`).innerHTML += data.length; + }) +} +getUser() + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..cd55e085 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,110 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} body { - background: #FFECE9; + background: #e2e7e8; + font-family: "Oxygen", sans-serif; +} + +.title { + background-image: url(./bakgrund.jpeg) ; + background-position: left bottom; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + position: relative; + height: 220px; + width: 100%; + display: grid; + justify-content: center; + align-items: center; + padding: 5%; + font-size: 1.4rem; + text-align: center; +} + +main { + display: flex; + flex-direction: column; + justify-content: center; +} + +.user-container { + display: grid; + grid-template-columns: 1fr; + justify-content: center; + background-color: rgba(148,182,165,0.8); +} + +.user-image { + max-width: 20vw; + border-radius: 100%; + padding-top: 20px; +} + +.user-img { + display: flex; + justify-content: center; + padding-top: 10px; +} + +.user-info { + display: grid; + padding-bottom: 40px; + justify-items: center; +} + +.projects { + color: black; + display: inline-grid; + grid-template-columns: 1fr; + justify-items: center; + padding: 5%; +} + +.repocard { + display: block; + align-items: center; + text-align: center; + padding: 20px; + margin: 10px; + width: 100%; + background-color: rgba(148,182,165,0.1); +} + +.repocard a { + text-decoration: none; + color: gray +} + +a:hover { + color: darkgreen; +} + +.chart-wrapper { + display: grid; + justify-items: center; + width: 100%; + background-color: rgba(148,182,165,0.5); +} + +.chart-container { + display: grid; + justify-items: center; + padding: 5%; + max-width: 450px; +} + + +@media (min-width: 769px) { +.projects { + grid-template-columns: 1fr 1fr; + column-gap: 25px; +} + +.title { +font-size: 1.9rem; +} } \ No newline at end of file