diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..b11eafde Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..1dd9312e 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. +The goal of this project was to create and tracker about all m git hub repositories using API. ## 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? +The main challenge was to implement the requests. ## 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://upbeat-ritchie-526f8b.netlify.app diff --git a/code/chart.js b/code/chart.js index 92e85a30..3e5e23c3 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,27 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const drawChart = (amount) =>{ + const config = { + type: 'doughnut', + data: { + labels: [ + 'Completed Projects', + 'Remaining Projects', + ], + datasets: [{ + label: 'My First Dataset', + data: [amount , 20-amount], + backgroundColor: [ + 'rgb(255, 192, 203)', + 'rgb(135,190,231)' + + ], + hoverOffset: 4 + }] + }, + + }; + const myChart = new Chart(ctx, config) +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..1e0a2087 100644 --- a/code/index.html +++ b/code/index.html @@ -4,16 +4,20 @@ - Project GitHub Tracker + Project GitHub Tracker - Lena Simma -

GitHub Tracker

-

Projects:

-
+
+
+
+
+
+
+
- + diff --git a/code/script.js b/code/script.js index e69de29b..76688578 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,80 @@ +const USER = 'lenisili' +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 profileContainer = document.getElementById('profile-container') + +const userProfile = () => { + + fetch (USER_URL) + .then (response => response.json()) + .then (data => { + profileContainer.innerHTML+= ` +
+
+ Profile Picture of User +
+
+
Username: ${data.login}
+
Name: ${data.name}
+
Living and working in: ${data.location}, CH
+
+
+
+

${data.bio}

+
` + }) + } + userProfile() + +const fetchRepositories = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + const technigoRepositories =data.filter(repo => + repo.name.includes('project-') && repo.fork === true + ); + + technigoRepositories.forEach(repo => { + projectsContainer.innerHTML += ` +
+

${repo.name}

+

Branch: ${repo.default_branch}

+

Main Language: ${repo.language}

+

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

+

Number of commits:

+

See repo

+
+ `; + }); + + fetchPullRequests(technigoRepositories); + drawChart(technigoRepositories.length); + }); +}; + +const fetchPullRequests = (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 + ); + fetchCommits(myPullRequest.commits_url, repo.name); + }); + }); +}; + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((response) => response.json()) + .then (data => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + }); + } +fetchRepositories(); + diff --git a/code/style.css b/code/style.css index 7c8ad447..72fca9bd 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,68 @@ body { background: #FFECE9; -} \ No newline at end of file + font-family: Arial, Helvetica, sans-serif; +} + +.profile-container{ + width:90%; + margin: 0 auto; +} + +.profile-wrapper{ + display: flex; + flex-direction: row; + align-items: center; + max-width: 500px; + margin: 20px auto 40px auto; +} +.profile-photo { + width:30%; +} +.profile-photo img{ + width: 100%; + border-radius: 50%; + border: 3px solid black; + filter: grayscale(100%); +} + +.profile-username{ + width: 60%; + margin-left: 25px; + box-shadow: 2px 2px 4px; +} +.user-name { + margin: 6px 0 0 0; + padding: 6px 0 0 0; + border-bottom: 3px solid rgb(255, 192, 203); +} + +.real-name, .location { + margin: 6px 0 0 0; + padding: 6px 0 0 0; + border-bottom: 1px solid #B2B3B4; +} + +.profile-text { + + text-align: justify; + margin-bottom: 40px; +} + +/* Cards styling*/ + +.projectsContainer { + width: 90%; + display: flex; + flex-direction: column; + margin: 0 auto; +} + +.repo-card { + color: white; + width: 90%; + background-color: rgb(90, 78, 78); + border: 1px solid; + margin: 20px auto; + max-width: 500px; + padding-left: 15px; +}