diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..887b1ec6 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..a93eae54 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. +Creating a github tracker for our projects ## 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? +Using javascript's fetch function to get the information from github ## 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://agitated-volhard-2172b7.netlify.app diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..50bed2dd Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/assets/.DS_Store b/code/assets/.DS_Store new file mode 100644 index 00000000..56121a56 Binary files /dev/null and b/code/assets/.DS_Store differ diff --git a/code/assets/github.jpeg b/code/assets/github.jpeg new file mode 100644 index 00000000..7b7e0819 Binary files /dev/null and b/code/assets/github.jpeg differ diff --git a/code/assets/github2.png b/code/assets/github2.png new file mode 100644 index 00000000..9b1658ae Binary files /dev/null and b/code/assets/github2.png differ diff --git a/code/assets/github3.png b/code/assets/github3.png new file mode 100644 index 00000000..3d141cc4 Binary files /dev/null and b/code/assets/github3.png differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..a989a1dc 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,23 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 + +const drawChart = (amount) => { + const config = { + type: "doughnut", + data: { + labels: ["Projects Finished", "Projects Left"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 19 - amount], + backgroundColor: ["#58a6ff", "rgb(255, 0, 0)", "rgb(255, 205, 86)"], + hoverOffset: 4, + }, + ], + }, + }; + + const statistics = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..b2df95e7 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,38 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + + +
+ github-logo +
+
+
+ profile-image +

+
+
+

GitHub Tracker

+

Projects:

+
+
+
+
+
+ - - + +
+ +
- - - - \ No newline at end of file + + + + diff --git a/code/script.js b/code/script.js index e69de29b..e485edd0 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,87 @@ +const REPOS_URL = "https://api.github.com/users/themisk84/repos"; +const projects = document.getElementById("projects"); +const profileImage = document.getElementById("profileImage"); +const userName = document.getElementById("userName"); + +const getRepos = () => { + fetch(REPOS_URL) + .then((response) => response.json()) + .then((data) => { + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith("project") + ); + console.log(forkedRepos); + + forkedRepos.forEach((repo) => { + fetch(`${repo.languages_url}`) + .then((language) => language.json()) + .then((data) => { + const language = Object.keys(data)[0]; + + console.log(data); + + projects.innerHTML += ` +
+ ${ + repo.name + } +
${ + repo.default_branch + }
+

Last updated: ${new Date( + repo.updated_at + ).toLocaleDateString()}

+
${language}
+
+ `; + }) + .catch((err) => console.log(err)); + }); + + drawChart(forkedRepos.length); + const profileImg = data.forEach( + (profile) => (profileImage.src = profile.owner.avatar_url) + ); + const profileName = data.forEach( + (nickname) => (userName.innerHTML = nickname.owner.login) + ); + + getPullRequest(forkedRepos); + }); +}; + +const getPullRequest = (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); + if (myPulls) { + const commitsURL = myPulls.commits_url; + getCommits(commitsURL, repo); + } else + document.getElementById( + `${repo.name}` + ).innerHTML += `

Group assignment or not yet pulled

`; + }) + .catch((err) => console.log(err)); + }); +}; + +const getCommits = (commitsURL, repo) => { + fetch(commitsURL) + .then((response) => response.json()) + .then((data) => { + console.log(data); + document.getElementById( + `${repo.name}` + ).innerHTML += `

Number of commits: ${data.length}

`; + }) + .catch((err) => console.log(err)); +}; +getRepos(); diff --git a/code/style.css b/code/style.css index 7c8ad447..7b7e2a39 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,145 @@ body { - background: #FFECE9; -} \ No newline at end of file + background-color: #21262d; + margin: 0; + box-sizing: border-box; + color: rgb(201, 209, 217); +} + +.logo-container { + display: flex; + justify-content: center; + width: 100%; + height: 50px; + border-bottom: 1px solid black; + margin-bottom: -10px; +} + +.upper-section { + display: flex; + justify-content: left; +} + +.profile-container { + display: flex; + width: 35%; + flex-direction: column; + margin-left: 10px; +} + +.profile-image { + width: 65%; + border-radius: 50%; +} + +.projects { + display: grid; + grid-template-columns: 1fr; + grid-gap: 15px; + margin-left: 10px; + margin-right: 20px; +} + +.repo { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(4, 25px); + column-gap: 10px; + row-gap: 10px; + border: 1px solid rgb(201, 209, 217); + border-radius: 6px; + padding: 15px; + height: 140px; + color: #8b949e; +} + +.repo-item1 { + grid-column: span 3; + color: #58a6ff; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +.repo-item2 { + grid-column: span 1; +} + +.repo-item3, +.repo-item4, +.repo-item5 { + grid-column: span 4; +} + +.branch { + border: 1px solid rgb(201, 209, 217); + border-radius: 10px; + padding: 2px; +} + +.chart-container { + display: flex; + justify-content: center; +} +.chart { + margin-top: 20px; + max-height: 250px; + max-width: 300px; +} + +@media (min-width: 768px) { + .logo-container { + justify-content: flex-end; + } + .logo-image { + width: 100px; + } + + .upper-section { + flex-direction: column; + width: 25%; + margin-left: 10px; + } + .profile-container { + width: 85%; + align-items: center; + } + .profile-image { + width: 100%; + } + .projects-container { + display: flex; + flex-direction: column; + } + .projects { + width: 65%; + grid-template-columns: 1fr 1fr; + position: absolute; + margin-left: 250px; + margin-top: -250px; + } + + .repo { + height: 150px; + } + + .chart-container { + margin-top: 1500px; + } + + .chart { + max-width: 300px; + max-height: 300px; + } +} + +@media (min-width: 992px) { + .projects { + margin-left: 300px; + } +} + +@media (min-width: 1200px) { + .projects { + margin-left: 400px; + } +}