diff --git a/README.md b/README.md index 1613a3b0..447c913d 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. +This weeks project where a deep dive into more APIs and to start using npm,unit tests and chart.js. ## 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 started this weeks projects as usuals, looking through all information and reading the instructions.After that I did start the project by fecthing API from my gitHub repositories etc. It was hard for me to grasp what the assignment was and what I was suppose to do! So I spent a lot of time googling on the wrong search words and just trying to understand the instructions and trying to wrap my head around the task. I asked my teammates for help. ## 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://tracker-bootcamp2022.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..c9fb3d29 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,21 @@ //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 data = { + labels: ["completed projects", "projects left"], + datasets: [ + { + backgroundColor: ["grey", "black"], + data: [amount, 19 - amount], + hoverOffSet: 4, + }, + ], + }; + const config = { + type: "doughnut", + data: data, + }; + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..fd88239d 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,38 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

GitHub Tracker

- - +
+ + +
+
+
+
+
- - - - \ No newline at end of file + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..b0d441d2 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,87 @@ +//DOM selectors +const profileInfo = document.getElementById("profile"); +const allProjects = document.getElementById("projects"); + +const username = "TereseClaesson"; +const API_PROFILE = `https://api.github.com/users/${username}`; +const API_URL_REPOS = `https://api.github.com/users/${username}/repos`; + +//Functions to get the username and profilepicture +const userProfile = () => { + fetch(API_PROFILE) + .then((res) => res.json()) + .then((profileData) => { + profileInfo.innerHTML += ` + +

${profileData.name}

+

${profileData.login}

+ `; + }); +}; + +//Repos +const repositories = () => { + fetch(API_URL_REPOS) + .then((res) => res.json()) + .then((allRepos) => { + const forkedRepos = allRepos.filter( + (repo) => repo.fork && repo.name.startsWith("project-") + ); + forkedRepos.forEach((repo) => { + allProjects.innerHTML += ` +
+

Project name: ${repo.name}

+

Latest push: ${new Date(repo.pushed_at).toLocaleString("en-GB", { + dateStyle: "short", + })}

+

Default branch: ${repo.default_branch}

+ ${repo.name} +

+

Commits:

+
+ `; + commits(repo.commits_url, repo.name); + }); + getPullRequest(forkedRepos); + drawChart(forkedRepos.length); + }); +}; + +const getPullRequest = (forkedRepos) => { + forkedRepos.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((pullReqs) => { + let groupProject = true; + pullReqs.forEach((pull) => { + if (pull.user.login === username) { + groupProject = false; + document.getElementById(`pull-${repo.name}`).innerHTML = ` + Go to pull request + `; + } + }); + + if (groupProject === true) { + document.getElementById(`pull-${repo.name}`).innerHTML = ` +

No pull request, group project

+ `; + } + }); + }); +}; + +const commits = (myCommits, repoName) => { + let commitUrl = myCommits.replace("{/sha}", ""); + fetch(commitUrl) + .then((res) => res.json()) + .then((commitNumber) => { + document.getElementById(`commit-${repoName}`).innerHTML += + commitNumber.length; + }); +}; + +userProfile(); +repositories(); diff --git a/code/style.css b/code/style.css index 7c8ad447..58170037 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,137 @@ body { - background: #FFECE9; -} \ No newline at end of file + margin: 0; + background: #e3ded9; + box-sizing: border-box; +} + +h1 { + text-align: center; + font-size: 3em; +} + +.flex { + display: flex; + flex-direction: column; +} + +.profile { + display: flex; + align-content: space-between; + flex-direction: column; + text-align: center; + margin: 3rem; +} + +.chart { + margin: 1rem; +} + +.profile h3 { + font-size: 2rem; +} + +.profile img { + border-radius: 50%; + max-height: 30rem; + max-height: 30rem; +} + +.projects { + display: flex; + flex-wrap: wrap; + flex-direction: column; +} + +.projects div { + flex-direction: column; + flex-wrap: wrap; + border: 0.2rem solid black; + text-align: center; + margin: 1rem; + border-radius: 1rem; + background-color: #8aa4ab; + color: #e3ded9; +} + +.projects div:hover { + background-color: #416270; +} + +footer { + text-align: center; + margin: 2rem; + font-size: 1em; +} + +@media screen and (min-width: 678px) and (max-width: 1024px) { + .body h1 { + font-size: 6em; + } + + .flex { + background-color: #416270; + display: flex; + flex-direction: column; + align-content: space-around; + } + + .profile { + display: flex; + align-items: center; + color: #e3ded9; + margin: 1rem; + } + + .profile h3 { + font-size: 2.5rem; + } + + .chart { + margin: 10rem; + } + + .projects { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + } + + .projects div { + padding: 2rem; + } +} + +@media screen and (min-width: 1025px) { + .flex { + background-color: #416270; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + } + + .profile { + display: flex; + padding: 3rem; + text-align: center; + font-size: 1.5em; + color: #e3ded9; + } + + .profile h3 { + font-size: 3rem; + } + + .projects { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + } + + .projects div { + padding: 1.5rem; + font-size: 1.6rem; + } +}