diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..58702a2e --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +// .gitignore file +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..40753ace 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,9 @@ # 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. +Assigment: To create a place to keep track of the GitHub repos that I am using at Technigo using JavaScript and API:s. ## 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? +I had problems with fetching teh commitsamount for my repos since all of them didnt have a pullrequest done by me. I solved it by adding conditional statment to sort out the repos with a pullrequest and only fetcinh the commitamount for them. ## 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://cocky-lovelace-ac89bc.netlify.app \ No newline at end of file diff --git a/code/GitHubMark.png b/code/GitHubMark.png new file mode 100644 index 00000000..73db1f61 Binary files /dev/null and b/code/GitHubMark.png differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..5ba6588d 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 = (repos) => { + +const labels = [ + 'Completed projects', + 'Remaining projects', + + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My First dataset', + backgroundColor: ['#A9C9FF', '#fde3fb'], + borderColor:'pink', + data: [repos, 19-repos], + }] + }; + + const config = { + type: 'pie', + data: data, + }; + + 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..5dd4644b 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,24 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
- - - - - - - + + + + + Project GitHub Tracker + + + +

GitHub Tracker

+
+ +
+
+

Projects:

+
+ + + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..3ba22e33 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,80 @@ +const avatar = document.getElementById('avatar') +const projects = document.getElementById('projects') +const userInfo = document.getElementById('userinfo') +const username = 'Katarina821' + +const API_URL_REPOS = `https://api.github.com/users/${username}/repos` +const API_URL_ID = `https://api.github.com/users/${username}` + + + +const API_TOKEN = TOKEN || process.env.API_KEY; + +const options = { + method: 'GET', + headers: { + // Authorization: `token ${API_TOKEN}` + } +} + + + +//First function, fetches userdata and displays them in userinfo +const getIntro = () => { + fetch(API_URL_ID, options).then(res => res.json()).then(data => { + userInfo.innerHTML = `

${data.name}

${data.login}

` + avatar.src = data.avatar_url + console.log(data.html_url) + getRepos() + }) +} +//second function, fetches my repos and filters the ones that are forked and stars with project. Displays info. +const getRepos = () => { + fetch(API_URL_REPOS, options).then(res => res.json()).then(data => { + console.log(data) + const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith("project-")) + console.log(forkedRepos) + forkedRepos.forEach((repo) => projects.innerHTML += ` +
+ +

${repo.name }

 +

Defaultbranch ${repo.default_branch}

+

Most resent update: ${new Date(repo.updated_at).toLocaleDateString("en-UK")}

+

Commits amount:

+
+ `) + getPullRequests(forkedRepos) + drawChart(forkedRepos.length)//Evokes chartfunction with total amount of forked repos as argument + }) +} +//third function Fetches all techningos pullrequests and filters the one done by me +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach(repo => { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, options).then(res => res.json()).then(data => { + const myPullRequests = data.filter(item => item.user.login === repo.owner.login) + console.log(myPullRequests) + //conditional statement to sort out the repos that have a pullrequest done + // if pullrequest is done, evoke fetch commit function + if (myPullRequests.length > 0) { + fetchCommits(myPullRequests[0].commits_url, repo.name) + //if not dipslay message with info + } else { + document.getElementById(`${repo.name}`).innerHTML = `No pull request done, commits not avalible` + } + }) + }) +} +// 4th function, fetches the ammount of commits +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl).then((res) => res.json()).then((data) => { + document.getElementById(`${myRepoName}`).innerHTML += data.length + }) +} + +getIntro() + + + + + + \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..37ccc723 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,98 @@ +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Roboto:wght@300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); +* { + box-sizing: border-box; +} body { - background: #FFECE9; + background-repeat: no-repeat; + background-attachment: fixed; + background-color: #A9C9FF; + background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%); + font-family: 'Oswald', sans-serif; +} +.intro { + width: 80%; + margin: auto; + text-align: center +} +h1 { + font-size: 70px; + text-align: center; +} +h2 { + text-align: center; +} +.repo { + width: 80%; + margin: auto; + background-color: rgb(255,255,255,0.5); + border: 1px solid white; + padding: 20px; + margin: 30px; + border-radius: 5% +} +.projects { + display: flex; + flex-wrap: wrap; + justify-content: center; +} +a { + text-decoration: none; + color:black +} +h3 { + font-size: 30px; +} +a:hover { + color: rgb(247, 91, 208); + font-family: 'Bebas Neue', cursive; + ; +} +.picture { + width: 80%; + border-radius: 50%; + opacity: 0.8 +} +.picture:hover{opacity: 1.0} +.logo { + width: 30px; +} +.chart { + position: absolute; + left: 0; + right: 0; + margin: auto; + width: 400px +} +.userinfo { + padding: 20px; +} +@media only screen and (min-width: 600px) { + .repo { + width: 40% + } + .chart { + width: 600px + } +} +@media only screen and (min-width: 992px) { + .repo { + width: 20% + } + .picture { + width: 20%; + } + .intro { + display: flex; + align-items: center; + justify-content: center; + } + h2 { + font-size: 35px; + text-align: left; + margin-left: 10px; + } + .chart { + width: 40% + } } \ No newline at end of file