diff --git a/README.md b/README.md index 1613a3b0..15452963 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # 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 project was about fetching data from the github API and create your own github tracker. ## 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 think this project was a fun one, it went well and I understood a big part of it until the fetch commits. That was the hardest part, and if I had more time I would had put more functions and styling into it. ## 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. +Netlify link: https://gifted-stonebraker-86699f.netlify.app diff --git a/burger.png b/burger.png new file mode 100644 index 00000000..64582183 Binary files /dev/null and b/burger.png differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..14e26a0e 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: [ + 'Finished Projects', + 'Projects Left' + ], + datasets: [{ + label: 'My First Dataset', + data: [amount, 20-amount], + backgroundColor: [ + "rgb(255, 99, 71)", + "#d5a021" + ], + hoverOffset: 4 + }] + }, + }; + const myChart = new Chart(ctx, config) +} diff --git a/code/github-logo.png b/code/github-logo.png new file mode 100644 index 00000000..5eb5bc2d Binary files /dev/null and b/code/github-logo.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..1ab099ca 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,35 @@ Project GitHub Tracker + + + + + - -

GitHub Tracker

-

Projects:

-
- - + +
+
+

GitHub Tracker

+
+ +
+ +
+
+ +
+
+

Projects:

 +
+
+
+
+ + - \ No newline at end of file + diff --git a/code/script.js b/code/script.js index e69de29b..31f0db06 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,98 @@ +// API's +const USER = 'Mattsson717' +const REPOS_URL = `https://api.github.com/users/${USER}/repos` +const PROFILE_URL = `https://api.github.com/users/${USER}` +const COMMITS_URL = `https://api.github.com/repos/${USER}/project-business-site/commits` +const projectsContainer = document.getElementById('projects') +const profileContainer = document.getElementById('profile') + +// Profile +const getProfile = () => { + fetch(PROFILE_URL) + .then(response => response.json()) + .then(data => { + profileContainer.innerHTML += ` +
+ profile-image +

${data.login}

+
` + }) +} +getProfile() + +// Repositories +const getRepos = () => { + fetch(REPOS_URL) + .then(res => res.json()) + .then(data => { + const forkedRepos = data.filter( + (repo) => repo.name.includes('project-') && repo.fork + ) + forkedRepos.forEach((repo) => { + projectsContainer.innerHTML += + ` +
+

${repo.name}

 +

Default branch: ${repo.default_branch}

+

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

+

Commits amount:

+
+ `}) + fetchPullRequestsArray(forkedRepos) + drawChart(forkedRepos.length) + }) +} + +const fetchPullRequestsArray = (allRepositories) => { + allRepositories.forEach((repo) => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + fetch(PULL_URL) + .then((res) => res.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ); + + // Detect if we have pull request or not. + // If yes - call fetchCommits function + // If no - inform user that no pull request was yet done + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No pull request yet done :('; + } + }); + }); +}; + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); +}; + + +getRepos() + + + + + + + + +// const getCommits = () => { +// fetch(COMMITS_URL) +// .then(response => response.json()) +// .then(json => { +// console.log('Commits:',json.length) +// const commitsNumber = json. +// commitsNumber.forEach(repo => projectsContainer.innerHTML += +// ` +// `) +// }) +// } +// getCommits() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..284fc27a 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,121 @@ +* { + box-sizing: border-box; +} + body { - background: #FFECE9; -} \ No newline at end of file + background-color: #313638; + color: #e0dfd585; + font-family: "Cabin", sans-serif; + background-image: url("https://i.ibb.co/vDY4RQR/burger.png"); + background-size: 15px; + background-repeat: repeat-x; + padding: 5%; + margin: 0; + font-size: 15px; +} + +.section { + grid-template-columns: 1fr 2fr; + grid-gap: 2rem; + margin: auto; + width: 100%; + max-width: 1200px; +} +/* Profile */ +.profile-card { + display: grid; + width: 100%; + justify-items: center; +} + +.profile-img { + align-self: center; + border-radius: 50%; + width: 50%; + height: auto; + border: 2px solid #e0dfd585; +} +/* Chart */ +.chart { + display: none; +} +/* Projects */ + +fieldset { + border: 2px solid; + border-radius: 1%; + border-color: #e0dfd585; + background-color: rgba(34, 33, 33, 0.671); +} + +.project-container { + display: grid; + width: 100%; +} + +.project-grid { + border-radius: 2%; + min-width: auto; +} +.project-grid :hover { + background-color: rgba(34, 33, 33, 0.671); +} + +.project-cards { + grid-template-columns: 1fr 1fr; + padding: 5px; + border-radius: 3%; + margin: 6px; + min-width: auto; + border-top: 2px solid black; + border-bottom: 2px solid black; +} + +.project-cards a { + text-decoration: none; + color: #e4e4e2c5; + font-weight: bold; + cursor: pointer; + transition: all 200ms ease-in; +} + +.project-cards a:hover { + color: rgb(116, 15, 15); +} + +@media (min-width: 768px) { + body { + font-size: 12px; + } + .section { + display: flex; + flex-direction: row; + } + /* Profile */ + .profile-container { + display: flex; + flex-direction: column; + width: 50%; + } + + .profile-img { + width: 50%; + } + /* Chart */ + .chart { + align-items: center; + width: 50%; + display: flex; + padding: 5px; + } + /* Projects */ + + .project-container { + width: 100%; + } + .project-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + line-height: 0.86; + } +}