diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..6947b93e --- /dev/null +++ b/.gitignore @@ -0,0 +1,18 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +# Ignore Mac system files +.DS_store +# Ignore node_modules folder +node_modules +# Ignore all text files +*.txt +# Ignore files related to API keys +.env +# misc +/.pnp +.pnp.js +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# other +code/token.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..e173a428 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # GitHub Tracker -Replace this readme with your own information about your project. +Week 7 @ Technigo Bootcamp -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +This week I made a Github tracker, were you can scroll through my Technigo repositories. It also includes a chart of compleated and remaining projects 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? +Made with JS, using API and authorization keys. ## 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://project-github-tracker-linnea-frisk.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..68c2dc68 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,33 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (repos) => { + + +const labels = [ + 'Compleated Projects', + 'Remaining Projects', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My First dataset', + backgroundColor: ['#B6766D', '#F8E8DE'], + borderColor: '#f7e9e7', + data: [repos, 18-repos], + }] + }; + + const config = { + type: 'doughnut', + data: data, + options: {} + }; + + const myChart = new Chart( + document.getElementById('chart'), + config + ); + +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..47923492 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,41 @@ - Project GitHub Tracker + + + + + + + + + + + + + + + + + Project GitHub Tracker Neaa99 + -

GitHub Tracker

-

Projects:

-
+
- - +
+
- + + +
+ +
+ + + - \ No newline at end of file + + diff --git a/code/script.js b/code/script.js index e69de29b..64d52dff 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,100 @@ +// DOM SELECTORS +const USER = 'Neaa99' +const technigoRepos = document.getElementById('technigoRepos') +const container = document.getElementById('container') +const header = document.getElementById('header') + +const API_TOKEN = TOKEN || process.env.API_KEY; + +// API +const API_USER = `https://api.github.com/users/${USER}` +const API_REPOS = `https://api.github.com/users/${USER}/repos` + +// Authorization +const options = { + method: 'GET', + headers: { + Authorization: `token ${API_TOKEN}` + } + } + + +fetch(API_USER, options) + .then ((res) => { + return res.json() + }) + .then ((data) => { + console.log(data) + header.innerHTML = ` + User image +
+

${data.name}

+

${data.login}

+

GitHub Tracker

+

${data.bio}

+
` + }) + + fetch(API_REPOS, options) + .then ((res) => { + return res.json() + }) + .then((data) => { + console.log(data) + const technigoRepositories = data.filter(repo => + repo.name.includes('project-') && repo.fork === true) + + technigoRepositories.forEach((repo) => { + container.innerHTML += ` +
+

${repo.name}

 +

${repo.description}

+
+

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

+

• Branch: ${repo.default_branch}

+

• Main language: ${repo.language}

+

• Number of commits:

+
+

Link to Repo

+
+ ` + }) + drawChart(technigoRepositories.length) // Calling the chart + getPullRequests(technigoRepositories) // Calling the pull req and commits function + }) + + +const getPullRequests = (repos) => { + //Get all the PRs for each project. + repos.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) + .then(res => res.json()) + .then(data => { + const commits = document.getElementById(`commit-${repo.name}`) + + const pulls = data.find((pull) => pull.user.login === repo.owner.login); + + fetchCommits(pulls.commits_url, repo.name) + console.log(pulls.commits_url) + + }) + }) + } + + const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl, options) + .then((res) => { + return res.json() + }) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + + }) + } + + // Center canvas/chart + window.onload = window.onresize = function() { + const canvas = document.getElementById('canvas'); + canvas.width = window.innerWidth * 0.8; + canvas.height = window.innerHeight * 0.8; +} \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..f7ca9bde 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,255 @@ body { - background: #FFECE9; + width: 100vh; + height: 100%; + background: linear-gradient(to left, #B6766D, #EBC8C4); + font-family: poppins; + font-weight: 300; +} + +.myDiv { + position: absolute; + top: 500px; + left: 100px; + /* padding: 600px 800px; Utöka första vid fler reops */ + width: 90vw; + height: 230rem; + background: linear-gradient(100deg, #f7e9e7, #B6766D); + z-index: -1; +} + +.header { + width: 100vw; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 50px; + margin-top: 100px; +} + +.header-text { + display: flex; + flex-direction: column; + line-height: 10px; + font-size: x-large; + color: #3d1611; +} + +.header-text span { + color: white; + text-shadow: 4px 5px 8px rgba(0, 0, 0, 0.308); +} + +.header img { + border-radius: 50%; + width: 300px; + border: solid .5em #BE847C; + padding: .5em; + +} + +.header img:hover { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + animation-name: colorChange; + animation-duration: 4s; + cursor: pointer; +} + +.container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; + grid-gap: 5px; + padding: 20px; + margin: 150px; + width: 80vw; +} + +.technigo-repos { + display: flex; + flex-direction: column; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + margin-top: 10px; + margin-bottom: 10px; + padding: 20px; + align-items: center; + background-color: #E0B8B3; + min-width: 200px; + max-width: 400px; + width: 80%; + color: black; + gap: 1px; +} + + .info { + line-height: 20px; + margin: 20px; + } + + .info span { + font-weight: 400; + } + + #description, #repoName { + color: #3d1611; + } + + .netlify-link { + padding: 0 10px; + background-color: rgba(255, 255, 255, 0.192); + border-radius: 30px; + } + + .netlify-link:hover { + box-shadow: 6px 6px 20px rgba(122,122,122,0.212); + animation-name: colorChange; + animation-duration: 5s; + } + + .repo-link { + padding: 20px; + border-radius: 50px; + background-color: rgba(255, 255, 255, 0.37); + + } + + .repo-link:hover { + + box-shadow: 6px 6px 20px rgba(122,122,122,0.212); + animation-name: colorChange; + animation-duration: 5s; +} + +a:visited, a:link { + color: #3d1611; + text-decoration: none; +} + +.chart-container { + position: absolute; + left: 0; + right: 0; + margin:auto; + width: 600px; + +} + +/* ANIMATIONS */ + +@keyframes colorChange { + 0% {background-color: #f7f1f0;} + 25% {background-color: #e1c8c4;} + 50% {background-color: #cb9f98;} + 100% {background-color: #BE847C;} +} + +/* MOBILE LANDSCAPE */ + +@media (max-width:667px) { + body { + background-repeat: no-repeat; + width: 100vw; + height: 100%; + margin: 0; + } + + .myDiv { + left: 0; + width: 100vw; + } + + .container { + width: 90vw; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 110px 0; + } + + .header { + flex-direction: column; + } + + .header img { + width: 200px; + margin-top: -80px; + } + + .header-text { + line-height: 30px; + margin-top: -60px; + font-size: 120%; + text-align: center; + } + + .header-text h1 { + line-height: 10px; + margin: 20px; + } + + .header p { + margin: 10px; + } + + .chart-container { + width: 400px; + } +} + +/* TABLET LANDSCAPE */ +@media (min-width:668px) and (max-width:1024px) { + body { + background-repeat: no-repeat; + width: 100vw; + height: 100%; + margin: 0; + } + + .myDiv { + left: 0; + width: 100vw;; + } + + .container { + width: 95vw; + align-items: center; + justify-content: center; + margin: 110px 0; + gap: 20px; + } + + .technigo-repos { + width: 90vw; + } + + .header { + flex-direction: column; + } + + .header img { + width: 200px; + margin-top: -80px; + } + + .header-text { + line-height: 30px; + margin-top: -60px; + font-size: 120%; + text-align: center; + } + + .header-text h1 { + line-height: 10px; + margin: 20px; + } + + .header p { + margin: 10px; + } + + .chart-container { + width: 600px; + } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..670014a8 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "project-github-tracker", + "lockfileVersion": 2, + "requires": true, + "packages": {} +}