diff --git a/README.md b/README.md index 1613a3b0..7bc7b8ff 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 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 assignment was to create a GitHub tracker with all my Technigo-repos. ## 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 by fetching all the data that I wanted from the GitHub API. I began with fetching all the repos and filtering out only the forked ones from Technigo and continued with fetching the pull requests, commits and reviews. In order to inject data from one function to another I used dynamic IDs and DOM-selector. + +If I had more time I would like to add a dropdown menu were the user can choose to sort or display the repos after language. I would also like to style the GitHub tracker a bit more. ## 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://github-tracker-ebbadelsol.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..540bdd1c 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,22 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); -//"Draw" the chart here 👇 +// Chart +const drawChart = (numberOfProjects) => { + const config = { + type: "doughnut", + data: { + labels: ["Finished projects", "Projects left"], + datasets: [ + { + label: "Technigo Projects", + data: [numberOfProjects, 19 - numberOfProjects], + backgroundColor: ["rgb(255, 99, 132)", "rgb(255, 205, 86)"], + hoverOffset: 5, + }, + ], + }, + }; + + const reposChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..171f7b53 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,42 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker - - + + + + - - - - \ No newline at end of file + + + + + + + + + + + + + +
+
+
+
+
+

Overview of Projects

+
+ +
+
+
+ + + + + diff --git a/code/script.js b/code/script.js index e69de29b..8c8cbc47 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,85 @@ +const USER = "ebbadelsol"; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const projectsContainer = document.getElementById("projects-container"); +const userContainer = document.getElementById("user-container"); + +const getUser = () => { + fetch(`https://api.github.com/users/${USER}`) + .then((response) => response.json()) + .then((data) => { + userContainer.innerHTML += /*html*/ ` + +

${data.login}

+ `; + }); +}; + +getUser(); + +const getRepos = () => { + fetch(REPOS_URL) + .then((response) => response.json()) + .then((data) => { + const technigoProjects = data.filter((repo) => repo.fork && repo.name.startsWith("project-")); + + technigoProjects.sort((oldestRepo, newestRepo) => new Date(newestRepo.pushed_at) - new Date(oldestRepo.pushed_at)); + + technigoProjects.forEach((repo) => { + projectsContainer.innerHTML += /*html*/ ` + +
+

${repo.name}

+

Default branch ${repo.default_branch}

+

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

+

Amount of commits:

+
+ +
+ `; + }); + + getPullRequests(technigoProjects); + drawChart(technigoProjects.length); + }); +}; + +getRepos(); + +const getPullRequests = (repos) => { + repos.forEach((repo) => { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`) + .then((response) => response.json()) + .then((data) => { + const filteredPull = data.find((pull) => pull.user.login === repo.owner.login); + + if (filteredPull) { + getCommits(filteredPull.commits_url, repo.name); + getReview(filteredPull.review_comments_url, repo.name); + } else { + document.getElementById(`commits-${repo.name}`).innerHTML = "No pull request"; + } + }); + }); +}; + +const getCommits = (url, repoName) => { + fetch(url) + .then((response) => response.json()) + .then((data) => { + document.getElementById(`commits-${repoName}`).innerHTML += data.length; + }); +}; + +const getReview = (url, repoName) => { + fetch(url) + .then((response) => response.json()) + .then((data) => { + if (data.length === 0) { + document.getElementById(`${repoName}-container`).innerHTML += ""; + } else { + document.getElementById(`${repoName}-container`).innerHTML += /*html*/ ` +

Reviewed by ${data[0].user.login}

+ `; + } + }); +}; diff --git a/code/style.css b/code/style.css index 7c8ad447..6b8c858f 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,113 @@ +* { + margin: 0; + padding: 0; +} + body { - background: #FFECE9; -} \ No newline at end of file + font-family: "Roboto", sans-serif; + color: #222222; +} + +.hero-image { + width: 100vw; + /* height: 280px; */ + height: 40vh; + background-image: url("https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2376&q=80"); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + filter: grayscale(100%); +} + +.user-container { + position: relative; + text-align: center; + bottom: 72px; +} + +.user-image { + border-radius: 50%; + width: 126px; + border: solid 6px #ffffff; +} + +.user-name { + font-size: 26px; + font-weight: 700; + margin-top: 3px; +} + +.project { + display: flex; + flex-direction: column; + align-items: center; + padding: 40px 0; +} + +.projects-container { + line-height: 1.8; + margin-top: -40px; +} + +.project-info { + font-family: "Open Sans", sans-serif; + font-size: 15px; + font-weight: 400; + color: #666666; + pointer-events: none; +} + +.project-name, +.chart-heading { + font-family: "Open Sans", sans-serif; + color: #222222; + font-size: 18px; + font-weight: 700; + pointer-events: none; +} + +.project-link { + text-decoration: none; +} + +.project-link :hover { + background: linear-gradient(90deg, white, #e6e6e6 50%, #e6e6e6 50%, #e6e6e6 50%, white); +} + +hr { + margin: auto; + width: 75vw; + background: linear-gradient(90deg, white, #e6e6e6, #e6e6e6, #e6e6e6, white); + height: 1px; + border: none; +} + +.chart-section { + display: flex; + flex-direction: column; + align-items: center; + margin: 40px 0 80px; +} + +.chart-container { + width: 70vw; +} + +.chart { + margin-top: 20px; +} + +@media (min-width: 768px) { + .chart-container { + width: 40vw; + } +} + +@media (min-width: 1025px) { + .hero-image { + height: 70vh; + } + .chart-container { + width: 30vw; + } +}