diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..7338560d Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..c80900c9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..03214016 100644 --- a/README.md +++ b/README.md @@ -3,11 +3,20 @@ 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. +-track nr of forked technigo projects and link to the repository +-display user img +-display user name +-display default branch +-display last push +-display number och commits ## 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? +My biggest issue was with getting the fetch for number of commits but solved the problem in the end with help from student collegue. +I had passed on the wrong parameters and was actually looking for the commits in the wrong place. ## 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://tender-minsky-8b6ded.netlify.app/ \ No newline at end of file diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..d844f2d3 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..786d5065 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,37 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') -//"Draw" the chart here 👇 + // //DOM-selector for the canvas 👇 +const ctx = document.getElementById("chart").getContext("2d"); + + +const drawChart = (amount) => { +const labels = [ + 'Projects done', + 'Technigo projects', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My First dataset', + data: [amount, 19-amount], + backgroundColor: ['rgba(203,108,127,255)', 'rgba(245,243,240)' ], + borderColor: 'none', + }] + }; + + const config = { + type: 'doughnut', + data: data, + options: { + responsive: true, + maintainAspectRatio: true, + } + }; + + const myChart = new Chart( + document.getElementById('chart'), + config + ); + } + + console.log('test') \ No newline at end of file diff --git a/code/img/.DS_Store b/code/img/.DS_Store new file mode 100644 index 00000000..6a4d7241 Binary files /dev/null and b/code/img/.DS_Store differ diff --git a/code/img/susan-wilkinson-SjhL-Zrol6A-unsplash.jpg b/code/img/susan-wilkinson-SjhL-Zrol6A-unsplash.jpg new file mode 100644 index 00000000..6e41117a Binary files /dev/null and b/code/img/susan-wilkinson-SjhL-Zrol6A-unsplash.jpg differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..3c3d18cf 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,31 @@ Project GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
+
+
+
+
+
+ - +
+ + + +
+ + - + + - \ No newline at end of file + + diff --git a/code/script.js b/code/script.js index e69de29b..7e107761 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,107 @@ +//DOM-selectors + +const imgWrapper = document.getElementById('imgWrapper') +const userDataWrapper = document.getElementById('userDataWrapper') +const projects = document.getElementById('projects') + +//Github API +const username = 'Nosslexa' +const API_URL = `https://api.github.com/users/${username}/repos` + +const options = { + method: 'GET', + headers: { + Authorization: 'API_TOKEN' + } + } + + +// This function fetch all my repos and then filters() out the ones forked = true and starts with "project-" +const getRepos = () => { + fetch(API_URL, options) + .then(res => res.json()) + .then(data => { + console.log(data) + console.log(data[0].owner) + + const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-")) + console.log(forkedRepos) + + getPullRequests(forkedRepos) + + + // injects profile img and user data to the HTML. + imgWrapper.innerHTML = ` +
+ userimage +
+ ` + + userDataWrapper.innerHTML += ` +

Github tracker

+

${data[0].owner.login} : Frida Axelsson

+ ` + + //display repo info + forkedRepos.forEach((data) => { + let projectID = data.id + + projects.innerHTML +=` +
+ +

${data.name}

 +

Branch: ${data.default_branch}

+

Last push: ${new Date(data.pushed_at).toDateString()}

+

+
` + + getCommits(data, projectID); + }) + getPullRequests(forkedRepos) + drawChart(forkedRepos.length) + }) +} + +//funktion to get commits +const getCommits = (projects, projectID) => { + const GIT_COMMIT_API = projects.commits_url.replace("{/sha}", "") + fetch (GIT_COMMIT_API) + .then((res) => res.json()) + .then(data => { + let numberOfCommits = data.length + document.getElementById(projectID).innerHTML +=` +

Number of commits: ${numberOfCommits}

` + }) +} + +//function to find() my pullrequests and comments +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach(repo => { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`,) + .then(res => res.json()) + .then(data => { + console.log(data) + + const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login) + console.log(myPullRequests) + }) + }) + } + + +getRepos() + + + + + + + + + + + + + + + diff --git a/code/style.css b/code/style.css index 7c8ad447..6bff59d1 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,167 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: white; + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; +} + +header{ + background: pink; +} + +.hero{ + background-image: url(./img/susan-wilkinson-SjhL-Zrol6A-unsplash.jpg) ; + background-position: left bottom; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + position: relative; + height: 300px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.user-data-wrapper{ + height: 200px; + text-align: center; + color: #f5f3f0; + display: flex; + flex-direction: column; + justify-content: center; +} + +.user-data-wrapper p{ + font-size: smaller; + margin: 0; + padding: 0; +} + +.user-data-wrapper h1{ + margin-bottom: 0; +} + +.img-wrapper{ +display: flex; +justify-content: center; +align-self: flex-end; +position: absolute; +top: 200px; +} + +img{ + border-radius: 50%; + height: 150px; + filter: saturate(70%); + filter: grayscale(50%); + align-self: flex-end; +} + +.project-wrapper{ +display: flex; +flex-direction: column; +align-items: center; +gap: 10px; +margin-top: 25%; +margin-bottom: 25%; +} + +.repo-card{ + height: 40vh; + width: 80vw; + background-color: #f5f3f0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.repo-card a { + text-decoration: none; + color: black; + +} + +.chart-box{ + display: flex; + justify-content: center; +} + + + +footer{ + font-size: small; + background-color: #f5f3f0; + color: gray; + width: 100%; + height: 10vh; + margin: 0%; + display: flex; + justify-content: center; + align-items: flex-end; + margin-top: 25%; +} + +@media (min-width: 768px) and (orientaion: landscape) { + .hero{ + height: 400px; + } + + .img-wrapper{ + top: 300px; + } + + img{ + height: 200px; + } + .project-wrapper{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 25%; + } + + .repo-card{ + height: 20vh; + width: 40vw; + display: flex; + flex-direction: column; + justify-content: center; + border: solid; + } +} + +.repo-card h3{ + margin-bottom: 10px; +} +.repo-card p{ + margin: 2px; +} + +@media (min-width: 992px){ + .project-wrapper{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 25%; + } + + .repo-card{ + height: 45vh; + width: 30vw; + display: flex; + flex-direction: column; + justify-content: center; + + } + + img{ + height: 300px; + } + +} + + +