diff --git a/README.md b/README.md index 1613a3b0..1f481a1e 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. +This Github tracker project was made on week 7 for Technigo bootcamp. +This week's goal was to deepen the knowledge about APIs and fetch some data using GitHub REST API documentation. So this Github tracker keeps track of the GitHub repos that we create during studies in Technigo. ## 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 really enjoyed fetching required information from API to my project and did not have any problems on the way. But it was a bit challenging to work with Chart.js and try some other types of chart, in my case I tried bar chart for repo sizes. This task required good JavaScript skills and understanding of local and global scopes as well as good uinderstanding of the documentation on configuration of charts. I'm very proud that I've tried some of requirements for red level and if I had more time I would add a modal popup for commit messages or comments for each repo. ## 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-julianiki.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..2e6bb5c2 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,73 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') +const cty = document.getElementById('chartTwo').getContext('2d') //"Draw" the chart here 👇 + +const drawChart = (amount) => { + const config = { + type: 'doughnut', //what type of chart it is + data: { + labels: [ + 'Finished projects', + 'Projects left', + ], + datasets: [{ + label: 'Technigo projects', + data: [amount, 19 - amount], + backgroundColor: [ + '#1e7898', + '#a8d5e5' + ], + hoverOffset: 4 + }] + } + } + const myChart = new Chart(ctx, config); + // to inject it and put it in the browser (important part, needs to be here, where to put it, what to put) +} + +const drawChartTwo = (repo) => { + + const labels = repo.map((repo) => repo.name); + const data = repo.map((repo) => repo.size); + + const config = { + type: 'bar', + data: { + labels, + datasets: [{ + label: 'Repositories size (KB)', + data, + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(255, 159, 64, 0.2)', + 'rgba(255, 205, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(201, 203, 207, 0.2)' + ], + borderColor: [ + 'rgb(255, 99, 132)', + 'rgb(255, 159, 64)', + 'rgb(255, 205, 86)', + 'rgb(75, 192, 192)', + 'rgb(54, 162, 235)', + 'rgb(153, 102, 255)', + 'rgb(201, 203, 207)' + ], + borderWidth: 1 + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + }, + } + + const myChartTwo = new Chart(cty, config) +} diff --git a/code/images/chain.png b/code/images/chain.png new file mode 100644 index 00000000..2737d4d0 Binary files /dev/null and b/code/images/chain.png differ diff --git a/code/images/github-icon.png b/code/images/github-icon.png new file mode 100644 index 00000000..5eb5bc2d Binary files /dev/null and b/code/images/github-icon.png differ diff --git a/code/images/location.png b/code/images/location.png new file mode 100644 index 00000000..578aa906 Binary files /dev/null and b/code/images/location.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..d6c3c995 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,38 @@ + Project GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
+
+ + github-logo + +

GitHub Tracker

+
+
+
+ +
+
- +

Progress and repositories data

+
+ + +
+ + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..33febb03 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,118 @@ +// define DOM selectors +const projectsContainer = document.getElementById('projects'); +const generalInfoContainer = document.getElementById('generalInfo') + + +// URLs defined in variables +const USERNAME = 'JuliaNiki' +const REPOS_URL = `https://api.github.com/users/${USERNAME}/repos` +const GENERAL_URL = `https://api.github.com/users/${USERNAME}` + + +const getRepos = () => { + fetch(REPOS_URL) + .then(response => response.json()) + .then(data => { + console.log(data) + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + console.log('forked Repos', forkedRepos) + //sorted repos by creation date + forkedRepos.sort((a, b) => new Date(a.created_at) - new Date(b.created_at)) + forkedRepos.forEach(repo => { + console.log(repo) + //console.log('owner login', repo.owner.login) + projectsContainer.innerHTML += `
+

${repo.name}

 + + ${repo.language} +
Updated: ${new Date(repo.pushed_at).toDateString()}
+
${repo.default_branch}
+
` + const repoLanguage = document.querySelectorAll('.repo-language') + //Nodelist is like an array, only forEach method + repoLanguage.forEach(span => { + if (span.nextElementSibling.innerText === 'JavaScript') { + span.style.backgroundColor = "#f1e05a" + } else if (span.nextElementSibling.innerText === 'HTML') { + span.style.backgroundColor = "#e34c26" + } + }) + }) + getPullRequests(forkedRepos) + drawChart(forkedRepos.length) + drawChartTwo(forkedRepos) + }) +} +getRepos() + +const getGeneralInfo = () => { + fetch(GENERAL_URL) + .then(response => response.json()) + .then(data => { + console.log(data) + generalInfoContainer.innerHTML += ` + + +
+

${data.login}

+

${data.bio}

+
location

${data.location}

+
+ locationhttps://www.linkedin.com/in/julia-nikitinashlm/ +
+ ` + }) +} +getGeneralInfo() + +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach((repo) => { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`) + .then(response => response.json()) + .then(data => { + const myPulls = data.find(pulls => pulls.user.login === repo.owner.login) + console.log(myPulls) + //display pull request name + // document.getElementById(`${repo.name}`).innerHTML += `Pull request: ${myPulls.title}` + const commitsURL = myPulls.commits_url + const commentsURL = myPulls.review_comments_url + console.log('Comments', commentsURL) + console.log(commitsURL) + getCommits(commitsURL, repo) + getComments(commentsURL, repo) + }) + }) +} +// display Number of commit messages for each repo +getCommits = (commitsURL, repo) => { + fetch(commitsURL) + .then(res => res.json()) + .then(data => { + console.log(data) + console.log(data.length) + document.getElementById(`${repo.name}`).innerHTML += `
This repo has been committed ${data.length} times
+
Latest commit message: "${data[data.length - 1].commit.message}"
` + + }) +} + +/*------Tried to do accordion, but did not have time to style it----*/ +// here is the function to display commit messages +// getComments = (commentsURL, repo) => { +// fetch(commentsURL) +// .then(res => res.json()) +// .then(data => { +// console.log(data) +// document.getElementById(`${repo.name}-container-comments`).innerHTML += ` +//
+// +//
` + +// const unorderedList = document.getElementById(`${repo.name}-commentsList`) + +// data.forEach((comment) => { +// unorderedList.innerHTML += `
  • ${comment.body}
    • ` +// }) +// }) +// } +// getComments() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..0750266d 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,286 @@ + body { - background: #FFECE9; + background:#181a1b; + margin:0; + box-sizing: border-box; +} +/*----------------- Phone view --------------- */ +.header { + background-color: #2d333b; + color: #adbac7; + height: 80px; + text-align: center; + font-family: Arial, Helvetica, sans-serif; +} + +.profile-image { + width: 200px; + border-radius: 300px; + border: #adb4b6; + margin-bottom: 20px; +} + +.main-section { + display: flex; + flex-direction: column; + justify-content: space-around; + margin: 20px; + color: #768390; +} + +.my-divs { + border: 1px solid #444c56; + margin: 20px 15px; + border-radius: 15px; + text-align: center; + background-color:#242728; +} + + +.my-divs:hover { + opacity: 0.8; + transform: scale(1.1); + cursor: pointer; +} +.my-divs h5 { + margin: 2px; +} + +.github-image { + width: 30px; + filter: invert(); + margin-top: 5px; +} +.github-image:hover { + opacity: 0.8; + transform: scale(1.5); +} +.repo-name { + color: #539bf5; + margin-bottom: 0; +} +.links { + color: #539bf5; + font-size: 15px; + text-decoration: none; + cursor: pointer; +} +.statistics { + color: #768390; + text-align: center; +} +.link-github { + text-decoration: none; + color: #768390; + cursor: pointer; +} +.names h1 { + margin-top: 0; + margin-bottom: 0; +} + +.name { + font-size: 26px; +} +.username { + font-size: 26px; + font-weight: 300; +} +.location-info { + display: flex; + justify-content: row; + font-family: Arial, Helvetica, sans-serif; +} +.location-icon { + width: 20px; + height: 20px; + filter: invert(); + margin-right:10px; + margin-top: 10px; +} +.bio { + margin-top:0; + font-family: Arial, Helvetica, sans-serif; +} +.linkedin-info { + display: none; + font-family: Arial, Helvetica, sans-serif; +} +.repo-language { + position: relative; + top: 2px; + right: 8px; + display: inline-block; + width: 12px; + height: 12px; + border-radius: 50%; + border: 1px solid; +} +.btn-primary { + width: 200px; + margin-left: 120px; + border: none; + display: block; +} +.chart { + max-width: 90%; + margin-left: 20px; +} + +.general { + margin-left: 10px; +} +/*----------------- IPAD view --------------- */ +@media (min-width:768px) { + .chart { + max-width: 80%; + margin-left: 75px; + } + .my-divs { + margin: 20px 50px; + } + + .general { + margin-left: 50px; + } + .repo-language { + top: 3px; + right: 10px; + } + .statistics { + font-size: 35px; + font-family: Arial, Helvetica, sans-serif; + } +} + +/*----------------- Small desktop view --------------- */ +@media (min-width:992px) { + .projects-section { + display: grid; + grid-template-columns:repeat(2,1fr); + } + .my-divs { + margin-left: 20px; + display: grid; + font-size: 15px; + min-width: 300px; + max-width: 450px; + height: 150px; + } + .repo-language { + top: 17px; + right: -160px; + } + .charts { + max-width: 450px; + display: flex; + flex-direction: row; + } + .general { + text-align: center; + } + .location-info { + display: none; + } + +} + +/*----------------- Big desktop view --------------- */ +@media (min-width:1200px) { + .projects-section { + display: grid; + grid-template-columns:repeat(2,1fr); + } + .my-divs h5 { + margin: 0px; + margin-top:0; + } + .linkedin-info { + display: inline; + } + .linkedin-icon { + width: 20px; + height: 20px; + margin-right: 10px; + } + .my-divs { + display: grid; + margin:10px; + font-size: 15px; + min-width: 380px; + max-width: 450px; + height: 150px; + } + .chart { + max-width: 300px; + max-height: 300px; + } + .main-section { + display: flex; + flex-direction: row; + overflow-x: hidden; + } + .repo-language { + top: 20px; + right: -140px; + + } + .profile-image { + margin-right: 50px; + width: 300px; + } + .language-name { + margin-left: 10px; + } + .charts { + display: flex; + flex-direction: row; + margin-left: 300px; + } + .link-linkedin { + text-decoration: none; + color: #539bf5; + cursor: pointer; + font-size: 15px; + } + .link-linkedin:link{ + color:#539bf5 + } + .link-linkedin:hover { + color: blue; + } + .general { + text-align: left; + animation-name: moveFromTheLeft; + animation-duration: 4s; + animation-timing-function: ease-out; + } + @keyframes moveFromTheLeft { + 0% { + transform: translateX(-100px); + } + 50% { + transform: translate(0); + } + 100% { + transform: translate(0); + } + } + .projects-section { + animation-name: moveFromTheRight; + animation-duration: 4s; + animation-timing-function: ease-out; + } + @keyframes moveFromTheRight { + 0% { + transform: translateY(-100px); + } + 50% { + transform: translate(0); + } + 100% { + transform: translate(0px); + } + } + } \ No newline at end of file