diff --git a/README.md b/README.md index 1613a3b0..0c4d63f7 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,24 @@ -# GitHub Tracker +# Project: GitHub-tracker -Replace this readme with your own information about your project. +This week, we want you to create a place to keep track of the GitHub repos that you're using here at Technigo. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +## How did I do it? +I started the project by going through the material and videos. I really struggled mentally this week. So I decided early on that I will focus on blue level. -## The problem +What I learned: +* This week it was a lot of JS and API requests. I have learned about fetch, API:S, finding info in an API and filtering. And how to add a gitHub token so you have limitless requests.👩‍💻 -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? +* This week I had a problem to understand the connection between the code. I really had to narrow in all down to small small small pieces. BUT after Maks Wednesday live session I got more of a hang of it, the cheese sandwich comparison really made it more clear to me. + +## When I hit a dead end or a problem +When a problem arose, I either googled, used stack-overflow or Chrome dev-tools. And I have talked a lot to my fellow Zebra colleagues. And I also had a 1:1 call support with Maks 🙌🏻 + +My own reflection +This week was really intense and I had a really big problem mentally. But in the end I solved everything and my page turned out alright 🙂 ## View it live +Here it is: https://rosanna-github-tracker.netlify.app/ -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. +## Sources and inspiration +https://developer.chrome.com/docs/devtools/javascript/ +https://stackoverflow.com/c/technigo/questions/2917 diff --git a/code/assets/github_tracker_icon.png b/code/assets/github_tracker_icon.png new file mode 100644 index 00000000..58fdf191 Binary files /dev/null and b/code/assets/github_tracker_icon.png differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..3c4a4809 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,43 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + + + +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished projects', + 'Projects left', + ], + datasets: [{ + label: 'My First Dataset', + data: [amount, 20 - amount], + backgroundColor: [ + '#a07a99', + '#a7c0b8', + ], + + + hoverOffset: 4 + }] + }, + options: { + layout: { + padding: 25 + }, + plugins: { + legend: { + labels: { + font: { + size: 15 + } + } + } + } + } + }; + const myChart = new Chart(ctx, config); +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..e004ccc1 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,42 @@ + - Project GitHub Tracker + Rosanna GitHub Tracker + + + + + - -

GitHub Tracker

-

Projects:

-
+ +
+

GitHub Tracker

+
+
+ + +
+
+
+ +
+
+ + +
- +
+ +
+ \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..c11be706 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,90 @@ +const USER = 'Rosanna86' +const userContainer = document.getElementById('myProfile') +const searchField = document.getElementById('search-field') +const searchForm = document.getElementById('search-form') +const REPOS_URL = `https://api.github.com/users/${USER}/repos` +const USER_URL = `https://api.github.com/users/${USER}` +const projectsContainer = document.getElementById('projects') +const ldsripple = document.getElementById('loading') +const Auth = { } + +let repos; + +//profile image and info +const userProfile = () => { + fetch(USER_URL, Auth) + .then(res => res.json()) + .then(data => { + userContainer.innerHTML = ` +
+

${data.name}

+ @${data.login} +

${data.location}

+
+
+ ` + }) +} + +userProfile() + +const getRepos = () => { + fetch(REPOS_URL, Auth) + .then(response => response.json()) + .then(data => { + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + repos = forkedRepos + getPullRequests(repos) + drawChart(forkedRepos.length) + }) + +} +getRepos() + +//function to get the repos +const getPullRequests = (repos) => { + projectsContainer.innerHTML = ''; + repos.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, Auth) //added 100 (was 30) + .then(res => res.json()) + .then(data => { + const myPullRequest = data.filter((pull) => { + return pull.user.login === repo.owner.login + }) + if (myPullRequest.length === 0) { + return + } + getCommits(myPullRequest[0].commits_url, (data) => { + const numberOfCommits = data.length + //added function so the DOM do not self close tags + let boxHtml = `
`; // https://stackoverflow.com/questions/46300108/innerhtml-closes-tags + boxHtml += `

${repo.name}

` + boxHtml += `

Number of commits: ${numberOfCommits}

` + boxHtml += `

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

` + boxHtml += `

Default branch: ${repo.default_branch}

` + boxHtml += `

Go to repo

` + boxHtml += '
' + projectsContainer.innerHTML += boxHtml; //closing the div tag + ldsripple.style.display = 'none' //loading icon + }) + }) + }) +} + +//get my commits +const getCommits = (url, callbackFunction) => { + fetch(url, Auth) + .then(res => res.json()) + .then(data => { + callbackFunction(data) + }) +} + +//eventlistener on form-submit +searchForm.addEventListener('submit', (e) => { + e.preventDefault(); + + // this function filters your repos where name contains searchField.value. Where IndexOf returns the position of substring and -1 = doesn't exist in string + const found = repos.filter(r => r.name.indexOf(searchField.value) > -1); + getPullRequests(found); +}) \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..2c3451fa 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,280 @@ body { - background: #FFECE9; + background-color: #f0f0f0; + margin: 0; + padding: 0; + font-family: 'Barlow', sans-serif; +} + +/*header*/ +.header { + background-color: #7aa094; + display: grid; + grid-column: span 12; + justify-content: center; +} + +.header-text { + color: #fff; + display: grid; + grid-column: span 2/8; + font-weight: 300; + font-size: 25px; +} + +form#search-form { + grid-column: span 12; + margin-bottom: 10px; +} + +.icon_header { + padding: 10px 0px 10px 0px; + height: 50px; + display: inline; + display: grid; + grid-column: span 8/12; +} + +/*search field*/ +.search-container { + grid-template-columns: repeat(12, 1fr); + grid-column: span 12; +} + +.input-field { + margin: 7px 0px 8px 0px; + grid-column: 1/12; + padding: 10px 20px; + border-radius: 15px; + font-size: 15px; + color: #7aa094; + border: 1px solid #7aa094; + font-family: 'Barlow', sans-serif; + font-weight: 500; +} + +.button-search { + margin: 7px 0px 7px 0px; + grid-column: 2/4; + padding: 10px 20px; + border-radius: 15px; + color: #fff; + background-color: #56786d; + font-size: 15px; + border: 1px solid #7aa094; + font-family: 'Barlow', sans-serif; + font-weight: 500; +} + +.button-search:hover { + color: #364b45; + background-color: #56786d; + font-weight: 500; +} + +/*main grid*/ +.main-grid { + display: grid; + grid-template-columns: repeat(12, 1fr); +} + +.grid-container { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-column: span 12; + column-gap: 10px; + row-gap: 10px; +} + +/*profile*/ +.my-profile { + background-color: #f0f0f0; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-column: span 12; + border-radius: 25px 0px; + margin: 15px 0px 15px 0px; +} + +.profileinfo { + background-color: #f0f0f0; + grid-column: span 2/4; +} + +.profileinfo a { + color: black; + text-decoration: none; +} + +.profileimg { + grid-column: 6/12; +} + +.profileimg img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 25px 0px; +} + +/*repos*/ +.box-repo { + padding: 10px; + background-color: #7aa094; + display: grid; + grid-column: span 12; + border-radius: 25px 0px; +} + +.box-repo p { + text-align:center; + margin-block-start: 0em; + margin-block-end: 0.2em; + font-size: 15px; +} + +.box-repo h3 { + text-align:center; + margin-block-start: 0.2em; + margin-block-end: 0.3em; + font-size: 22px; +} + +.box-repo a { + text-align:center; + color: #fff; + text-decoration: none; + cursor: pointer; + font-size: 20px; +} + +/*chart*/ +.chart { + grid-column: span 12; + max-width: 100%; + max-height: 500px; + display: grid; +} + + +/*Loading icon*/ +.lds-ripple { + position: relative; + display: grid; + grid-column: 6/8; + width: 80px; + height: 80px; +} + +.lds-ripple div { + position: absolute; + border: 4px solid #7aa094; + opacity: 1; + border-radius: 50%; + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; +} + +.lds-ripple div:nth-child(2) { + animation-delay: -0.5s; +} + +@keyframes lds-ripple { + 0% { + top: 36px; + left: 36px; + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: 0px; + left: 0px; + width: 72px; + height: 72px; + opacity: 0; + } +} + + +/* tablet */ +@media (min-width: 768px) { + .box-repo { + grid-column: span 6; + border-radius: 20px; + } + + .chart { + grid-column: 4/10; + } + + .my-profile { + grid-template-areas: ". info ." + ". image ."; + grid-template-columns: 4fr 4fr 4fr; + } + + .profileimg { + grid-area: image; + } + + .profileimg img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 20px; + } + + .profileinfo { + grid-column: span 5/11; + grid-area: info; + } + + .profileinfo h2 { + margin-block-start: 0.2em; + margin-block-end: 0.2em; + } + + .profileinfo p { + margin-block-start: 0.3em; + } + +} + +/* desktop */ +@media (min-width: 992px) { + + + .header { + background-color: #7aa094; + display: grid; + grid-column: span 12; + } + + .my-profile { + grid-template-areas: ". info image"; + grid-template-columns: 3fr 3fr 3fr 3fr; + } + + .profileinfo { + text-align: right; + padding-right: 10px; + } + + .profileimg { + grid-area: image; + } + + .profileimg img { + max-height: 200px; + + } + + .box-repo { + grid-column: span 4; + border-radius: 20px; + } + + .grid-container { + grid-column: 2/12; + } + } \ No newline at end of file