diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..3c779262 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..ac5d574e 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,18 @@ # 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 assignment was structued to create fetch functions to showcase data coming from Githubs API. +Part of the assigment was to design a page that would show fetched data. ## 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? +First of I started by creating all the main functions that I would need to fullfill the blue requirements. +I used HTML, CSS and Javascript languages to write my code in VS code and deployed my site through netlify. + +Secondly I decided on a simple HTML CSS styling that would focus on the fetched data. I made the site responsive through all viewports and added very few animations to make the site look and feel proffesional and to the point. + +If I had more time I would make my site Universal to any github account instead of Personal. ## 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. +Here is a link to my project. +https://githubtrace.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..7dca9c6d 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,21 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: ['Finished', 'Not finished'], + datasets: [ + { + label: 'Technigo projects rate ', + data: [amount, 19 - amount], + backgroundColor: ['#0f0c29', '#e6e6e6'], + hoverOffset: 50, + }, + ], + }, + } + + const myProjects = new Chart(ctx, config) +} diff --git a/code/github_icon.png b/code/github_icon.png new file mode 100644 index 00000000..a6de6a93 Binary files /dev/null and b/code/github_icon.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..98d8dde9 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,44 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + + + + + +
+

GitHub Tracker

+ +
+
+
+
+ Start the Github tracker +
+
- - +
+
- - - - \ No newline at end of file +
+ +
+
+ + + + + diff --git a/code/script.js b/code/script.js index e69de29b..4cc6d34f 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,110 @@ +const projects = document.getElementById('projects') +const personData = document.getElementById('personData') +const USER = 'jakobxlindstrom' +const USER_URL = `https://api.github.com/users/${USER}` +const tracerBtn = document.getElementById('tracerBtn') + +// This function simply fetches and presents my user data through innerhtml. +const getUserData = () => { + fetch(USER_URL) + .then((res) => res.json()) + .then((data) => { + personData.innerHTML = ` +
+ +

Full name: ${data.name}

+

Located in ${data.location}, Sweden

+

Github account: ${data.login}

+
+ ` + }) +} + +// Inside this function I fetch all the repositories connceted to my github account, presents fetched data and also invokes +// the chart and the next function getPR. +const getRepos = () => { + fetch(`https://api.github.com/users/${USER}/repos`) + .then((res) => res.json()) + .then((data) => { + // console.log(data) + const filtered = data.filter( + (repo) => repo.fork && repo.name.startsWith('project-') + ) + filtered.forEach((repo) => { + const pushedDate = new Date(repo.pushed_at).toLocaleDateString( + 'en-se', + { + hour: '2-digit', + minute: '2-digit', + weekday: 'short', + year: 'numeric', + month: 'short', + day: 'numeric', + } + ) + + projects.innerHTML += ` + +
+ +

+

Recent push ${pushedDate}

+

Branch ${repo.default_branch}

+

Repository ${repo.name}

+ +
+ + ` + }) + drawChart(filtered.length) + getPR(filtered) + }) +} +// The pull reguest function fetches all the pull requests where I have been repository owner on github, +//otherwise a else message will appear tell otherwise. +const getPR = (repos) => { + repos.forEach((repo) => { + fetch( + `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` + ) + .then((res) => res.json()) + .then((data) => { + const myPR = data.find((pull) => pull.user.login === repo.owner.login) + if (myPR) { + getCommits(myPR.commits_url, repo.name) + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No pull request yet done :(' + } + }) + }) +} + +// This function gets the commits of each pull request and presents it together with earlier fetched data in the "repo cards" +const getCommits = (url, myRepoName) => { + fetch(url) + .then((res) => res.json()) + .then((data) => { + let commitMessage = data[data.length - 1].commit.message + document.getElementById( + `commit-${myRepoName}` + ).innerHTML += `

Amount of commits ${data.length}

+

${commitMessage}

+ ` + }) +} + +// When launching the site this function is invoked directly, simultaing a "landing" feeling before pushing the tracker button +getUserData() + +{ +} + +// This addEventListener makes it possible to view the fetched data by a button click under the userdata +tracerBtn.addEventListener('click', (event) => { + event.preventDefault() + getRepos() +}) diff --git a/code/style.css b/code/style.css index 7c8ad447..7dfeb483 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,288 @@ body { - background: #FFECE9; -} \ No newline at end of file + color: white; + font-family: 'Ubuntu', sans-serif; + background: #0f0c29; /* fallback for old browsers */ + background: -webkit-linear-gradient( + to left, + #24243e, + #302b63, + #0f0c29 + ); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient( + to left, + #24243e, + #302b63, + #0f0c29 + ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ +} + +.hero { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; + border-bottom: solid; + height: 70%; + padding: 2em; + background: #0f0c29; /* fallback for old browsers */ + background: -webkit-linear-gradient( + to left, + #24243e, + #302b63, + #0f0c29 + ); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient( + to left, + #24243e, + #302b63, + #0f0c29 + ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ +} + +a.button1 { + display: inline-block; + padding: 0.35em 1.2em; + border: 0.1em solid #ffffff; + margin: 0 0.3em 0.3em 0; + border-radius: 0.12em; + box-sizing: border-box; + text-decoration: none; + font-family: 'Roboto', sans-serif; + font-weight: 300; + font-size: 2em; + color: #ffffff; + text-align: center; + transition: all 0.2s; +} +a.button1:hover { + color: #000000; + background-color: #ffffff; +} +@media all and (max-width: 30em) { +  a.button1 { + display: block; + margin: 0.4em auto; + } +} + +.grid { + margin-top: 2em; + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +.repo-cards { + height: 350px; + width: 250px; + color: #0f0c29; + font-family: 'Bebas Neue', cursive; + margin: 1em; + padding: 1em; + align-items: center; + justify-content: space-between; + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; + border-radius: 1em; + box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, + rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; + background-color: #afbfc0; +} + +.logo { + height: 30px; +} + +.small-logo { + display: flex; + width: 100%; +} + +.projects { + width: 100%; + display: flex; + grid-column: span 2; + flex-direction: row; + flex-wrap: wrap; + margin: 0 auto; +} + +.personal-info { + max-height: 60vh; + display: flex; + flex-direction: column; + align-items: center; + position: sticky; +} + +.btn-div { + display: flex; + justify-content: center; + align-items: center; +} + +.info { + margin: 12px; + letter-spacing: 5px; +} + +.img { + max-width: 20em; + border-radius: 50%; + margin-top: -4em; + align-items: center; + border-color: #cac4ce; + border-style: double; +} + +.chart-container { + display: grid; + grid-column: span 1; + height: 10vh; + width: 30vw; + margin-top: 2em; + margin-bottom: 4em; +} + +.chart { + display: grid; + margin-top: 1em; +} + +.spinner { + position: static; + border-style: solid; + height: 100px; + width: 100px; + border-radius: 50%; + border-bottom: none; + border-left: none; + animation: spin 4.5s infinite linear reverse; +} +.spinner2 { + margin: 25px auto; + height: 50px; + width: 50px; + animation: spin 2s infinite linear; +} + +.spinner3 { + margin: 25px auto; + height: 20px; + width: 20px; + animation: spin 1s infinite linear reverse; +} + +@keyframes spin { + 100% { + transform: rotate(360deg); + } +} + +@media screen and (max-width: 780px) { + .hero { + display: flex; + flex-direction: column; + align-items: center; + } + + a.button1 { + font-size: 20px; + } + + .info { + font-size: 25px; + letter-spacing: 0; + } + + .img { + margin-top: -2em; + max-width: 40vw; + } + + .grid { + display: flex; + flex-direction: column; + } + .projects { + align-items: center; + justify-content: center; + display: flex; + flex-wrap: nowrap; + flex-direction: column; + } + + .repo-cards { + display: flex; + align-items: center; + justify-content: space-evenly; + flex-direction: column-reverse; + background-color: #8d86c9; + width: 80%; + margin: 1em; + } + + .card-info { + margin: 10px; + font-size: 1em; + } + + .chart-container { + margin-bottom: 2em; + justify-content: center; + align-items: center; + width: 90%; + } + .chart { + padding-bottom: 2em; + } +} + +@media screen and (max-width: 480px) { + .hero { + display: flex; + flex-direction: column; + align-items: center; + } + + a.button1 { + font-size: 20px; + } + + .info { + font-size: 90%; + letter-spacing: 0; + } + + .img { + margin-top: -2em; + max-width: 40vw; + } + + .grid { + display: flex; + flex-direction: column; + } + + .projects { + align-items: center; + justify-content: center; + display: flex; + flex-direction: column; + } + + .repo-cards { + justify-content: space-between; + background-color: #8d86c9; + margin: 15px; + max-width: 90%; + } + + .card-info { + margin: 2px; + } + .chart { + margin-left: 2em; + max-width: 90%; + } +}