diff --git a/README.md b/README.md index 1613a3b0..b31a0841 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,10 @@ # GitHub Tracker +This week we were asked to build a github tracker for our Technigo projects. -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 problem +I had massive problems with showing my commits. Whenever I invoked the code to display it, several of my projects disappeared. I needed to make an if else statement to be able to display all the projects. -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? ## 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://brave-hopper-89f38f.netlify.app diff --git a/code/chart.js b/code/chart.js index 92e85a30..f5c6a9a8 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,31 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const drawChart = (ammount) => { + const config = { + type: "doughnut", + data: { + labels: [ + "My completed projects", "Projects left" + ], + datasets: [ + { + label: "Dataset", + data: [ammount, 19-ammount], + backgroundColor: ["rgb(255, 99, 132)", "rgb(100, 06, 130)"], + borderColor: "rgb(255, 98, 133)", + } + ] + } + } + const myChart = new Chart( + document.getElementById('chart'), + config + ); +} + + + + + \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..33632eaa 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,25 @@ + Project GitHub Tracker +

GitHub Tracker

-

Projects:

+
- +
+ +
- +
\ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..eaf75e32 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,72 @@ +//DOM selectors +const username = 'JensBergqvist' +const projects = document.getElementById("projects") + + +const API_REPOS = `https://api.github.com/users/${username}/repos`; +const API_PROFIL = `https://api.github.com/users/${username}` +//Picture and name + +const profilePic = () => { + fetch(API_PROFIL) + .then(res => res.json()) + .then(data => { + // console.log(data) + picture = data.avatar_url + let profilePicture = `

${username}

+
`; + return (projects.innerHTML = profilePicture) +}) +} + +profilePic() + +const getRepos = () => { + fetch(API_REPOS) + .then(response => response.json()) + .then(data => { + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project')) + + + forkedRepos.forEach(repo => { + projects.innerHTML += `
+

Repo name: ${repo.name}

 +

Default branch: ${repo.default_branch}

+

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

Number of commits:

+ +
+ ` + + + }) + + getPullRequest(forkedRepos) + drawChart(forkedRepos.length) + }) + } + + const getPullRequest= (repos) => { + repos.forEach((repo)=> { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`) + .then(response => response.json()) + .then(data => { + const myPullRequest = data.find((pull)=> pull.user.login === repo.owner.login) + if (myPullRequest) { + getCommits(myPullRequest.commits_url, repo.name) + } else { + document.getElementById(`${repo.name}`).innerHTML=`No pullrequest ` + } + }) + }) + } + + const getCommits=(commits, myRepoName) => { + fetch(commits) + .then(response => response.json()) + .then(data =>{ + document.getElementById(`${myRepoName}`).innerHTML += data.length + }) + } + + getRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..e472bffe 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,45 @@ +* { + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + body { - background: #FFECE9; + background: #39c440; + font-family:Verdana, Geneva, Tahoma, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + max-height: 100vh + +} +.repo-card { + padding-left: 10px; + border-style: dashed; + +} + +h1 { + display: flex; + width: 100%; + margin: auto; + margin-top: 10%; + justify-content: center; + font-family:Verdana, Geneva, Tahoma, sans-serif +} + +.chart { + width: 50%; + height:50%; +} + +.profile { + justify-content: center; + +} + +.photo { + width: 100% } \ No newline at end of file