diff --git a/background img.jpeg b/background img.jpeg new file mode 100644 index 00000000..51190fc3 Binary files /dev/null and b/background img.jpeg differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..cfe351cd 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,26 @@ //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: ["done", "left"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 19 - amount], + backgroundColor: [ + "rgba(204, 223, 218, 0.947)", + "rgba(49, 63, 59, 0.947)", + ], + hoverOffset: 4, + }, + ], + }, + }; + + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..8e5cb494 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,57 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + + + + + + - - + --> + + + - - - - \ No newline at end of file + +
+
+ +

Charlottes GitHub Tracker

+

Student @Technigo

+ + + +
+
+
+
+

Progress

+
+
+ +
+ +
+
+ +

Technigo Projects:

+
+ + + + + + + +
+ + diff --git a/code/script.js b/code/script.js index e69de29b..af2468e7 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,104 @@ +const profile = document.getElementById("profile"); +const projectContainer = document.getElementById("projects"); +const image = document.getElementById("image"); + +const USER = "Svempolin"; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const OWNER_URL = `https://api.github.com/users/${USER}`; +const myCommit_URL = `https://api.github.com/repos/Technigo/project-guess-who/pulls/124/commits`; +//const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?_page=100`; + +const globalvaribal = "hello"; + +const getOwner = () => { + fetch(OWNER_URL) + .then((response) => response.json()) + .then((data) => { + console.log(data); + image.src = data.avatar_url; + profile.innerHTML += `

Username: ${data.login}

Name: ${data.name}

Followers:${data.followers} + + `; + }); +}; + +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-") + ); + forkedRepos.forEach( + (repo) => + (projectContainer.innerHTML += `
+

${repo.name}

+

Default branch:${repo.default_branch}

+

Latest update: ${new Date(repo.updated_at).toDateString()}

+

The link to: ${repo.name}

+

Amounts of commits:

+ +
`) + ); + + drawChart(forkedRepos.length); + getPullRequests(forkedRepos); + }); +}; + +getRepos(); + +//Pullrequest// +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach((repo) => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + fetch(PULL_URL) + .then((response) => response.json()) + .then((data) => { + // console.log(data); + const myPulls = data.find( + (pulls) => pulls.user.login === repo.owner.login + ); + + myCommits(myPulls.commits_url, repo.name); + myCommits(myPulls.comments_url, repo.name); + //console.log(myCommit_URL); + //getCommits(myCommit_URL, repo); + }); + }); +}; +const myCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById( + `commit-${myRepoName}` + ).innerHTML += `${data.length}`; + }); +}; + +const myComment = (myCommentUrl, myRepoName) => { + fetch(myCommentUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById( + `comment-${myRepoName}` + ).innerHTML += `${data.length}`; + }); +}; + +getOwner(); + +// +// //TODO +// //1. Find only the PR that you made by comparing pull.user.login +// // with repo.owner.login +// //2. Now you're able to get the commits for each repo by using +// // the commits_url as an argument to call another function +// //3. You can also get the comments for each PR by calling +// // another function with the review_comments_url as argument +// }); +// }); +// }; diff --git a/code/style.css b/code/style.css index 7c8ad447..dfe42e71 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,168 @@ body { - background: #FFECE9; -} \ No newline at end of file + margin: none; + background-color: rgb(236, 208, 208); +} +.body-wrapper { + background: rgb(242, 238, 238); + margin: none; + display: flex; + flex-direction: column; +} +.header { + display: flex; + border: solid green; + width: 300px; + align-items: flex-start; + justify-content: center; + border-radius: 10px; +} +.header-text { + font-family: "Oxygen", sans-serif; + font-size: 30px; + font-weight: 600px; + margin: 10px, 0px, 15px, 0px; + color: rgb(80, 84, 87); +} + +.profile-container { + background-color: rgb(242, 238, 238); + min-width: 200px; + text-align: center; + box-shadow: 1px 1px 8px 3px lightgray; + margin-left: 30px; + margin-right: 30px; + border-radius: 15%; + padding: 20px; + font-family: "Oxygen", sans-serif; + margin-top: 100px; +} +.profile h5 { + margin: 0; + font-family: "Oxygen", sans-serif; +} + +.profile_pic { + padding-top: 20px; + margin: auto; + margin-left: auto; + margin-right: auto; + border-radius: 50%; + border-width: 5px; + height: 170px; + width: 170px; +} +.technigo_pic { + border-radius: 50%; + height: 80px; + width: 80px; +} + +.repo-container { + margin-top: 40px; + display: flex; + flex-wrap: wrap; + flex-direction: column; + justify-content: center; + font-family: "Oxygen", sans-serif; +} + +.assignments { + background-color: rgb(242, 238, 238); + line-height: 1.5; + min-width: 200px; + text-align: center; + box-shadow: 1px 1px 8px 3px lightgray; + margin-left: 30px; + margin-right: 30px; + margin: 20px; + border-radius: 15px; + font-family: "Oxygen", sans-serif; +} + +.assignments h4 { + margin: 0; + font-family: "Oxygen", sans-serif; +} +.chart-box { + text-align: center; + /* margin: 15px auto; */ + display: flex; + align-items: flex-start; + justify-content: space-evenly; + flex-direction: row; + padding: 15px 0; +} +.chart-section { + width: 25%; + display: flex; + flex-direction: column; + align-items: center; + padding: 3%; +} + +.chart-headline { + display: flex; + align-items: center; + justify-content: center; +} +.chart-wrapper { + width: 100%; +} + +h3 { + font-family: "Oxygen", sans-serif; + font-size: 40px; + text-align: center; +} + +/* Responsive */ + +@media (min-width: 600px) { + .repo-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: auto; + } + .assignments { + flex-direction: column; + display: flex; + width: 40%; + height: 40%; + flex-wrap: wrap; + margin: 20px; + border-radius: 15px; + box-shadow: 1px 1px 8px 3px black; + } + .projects { + display: flex; + flex-direction: row; + } +} +@media (min-width: 1024px) { + .repo-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: auto; + } + .assignments { + flex-direction: column; + display: flex; + width: 20%; + height: auto; + flex-wrap: wrap; + margin: 20px; + border-radius: 15px; + box-shadow: 1px 1px 8px 3px black; + } + + .assignments :hover { + background-color: rgb(218, 194, 158); + } + + .projects { + display: flex; + flex-direction: row; + } +} diff --git a/code/technigo-logo.png b/code/technigo-logo.png new file mode 100644 index 00000000..d8c7abe8 Binary files /dev/null and b/code/technigo-logo.png differ diff --git a/github.png b/github.png new file mode 100644 index 00000000..7fb06dab Binary files /dev/null and b/github.png differ