From 00d3c857fc5a15246a82b6d3fd90bf71889c8f55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Harry=20B=C3=A4cklin?= <83465217+Groovedharry@users.noreply.github.com> Date: Mon, 4 Oct 2021 12:15:20 +0200 Subject: [PATCH 1/2] My project Sorry that I didn't do commits, I forget at times when I am stressed which I was this time --- README.md | 6 ++- code/chart.js | 24 +++++++++ code/index.html | 42 ++++++++++----- code/script.js | 79 +++++++++++++++++++++++++++ code/style.css | 140 +++++++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 277 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..e15a3309 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,14 @@ 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. +We were tasked to create a Github Tracker where we can see and are able to access all of our github repos from Technigo. ## The problem +I approached problems by using google/stackoverflow and asking friends, I didn't have much of a plan going in, I kind of wanted to make it as simple as possible. + +I had a very unfortunate week and therefore it is turned in alittle late, Basically started coding on friday and forgot to send it in on sunday as I went to bed early, I am also not finished with the project for some reason my image refuse to show up so that will be something I need to look into. I believe I did fine for the timeframe I had as I was both sick and had to go out of town and didn't have time to code then which so the only thing I would change is that I would like to go back to regular where I wont be sick and wont be out of town without a computer. + 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 diff --git a/code/chart.js b/code/chart.js index 92e85a30..8b71cde4 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 config = { + type: 'doughnut', + data: { + labels: [ + 'Projects Done', + 'Projects Left', + ], + datasets: [{ + label: 'My First Dataset', + data: [6, 20-5], + backgroundColor: [ + ' rgb(255,250,250)', + 'rgb(23, 18, 18)', + + ], + hoverOffset: 4 + }] + }, + }; + + + +const myChart = new Chart(ctx, config) + diff --git a/code/index.html b/code/index.html index 2fb5e0ae..8125aa71 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,39 @@ + - - - - Project GitHub Tracker - + + + + Project GitHub Tracker + + + + -

GitHub Tracker

-

Projects:

-
+
+

GitHub Tracker

+
+
+
+
+
+

Progress

+ +
+
- - +
+

Projects

+
+
+
+
+
- - + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..48a3d9ff 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,79 @@ +const USER = 'Groovedharry' +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const USER_API = `https://api.github.com/users/${USER}`; +const projectsContainerXXYT = document.getElementById('profileInfo'); +const projectsContainer = document.querySelector("#projects"); + + +const getUser = () => { + fetch(USER_API) + .then((response) => response.json()) + .then((data) => { + profile.info.innerHTML += ` +

Profile info

+ profile pic +

${data.name}

+

>a href =${data.html_url}>${data.login}

+ `; + }); +}; + +// Repos // +const getRepos = () => { + fetch(REPOS_URL) + .then((response) => { + return response.json(); + }) + .then((json) => { + const forkedRepos = json.filter((project) => project.fork && project.name.startsWith("project-")); + console.log(forkedRepos) + // commits // + forkedRepos.forEach((project) => { + const COMMIT_URL = `https://api.github.com/repos/${USER}/${project.name}/commits`; + fetch(COMMIT_URL) + .then((response) => { + return response.json(); + }) + .then((json) => { + const filteredCommits = json.filter((project) => project.commit.author.name === "Harry Bäcklin"); + // makes the first letter an upper case, Thank you Bruna // + const upperCaseName = project.name.charAt(0).toUpperCase() + project.name.slice(1); + projectsContainer.innerHTML += `
+

Project Name: ${upperCaseName}

+ ${upperCaseName} +

Main branch: ${project.default_branch}

+

Number of commits: ${filteredCommits.length}

+

Latest push: ${project.pushed_at.slice(0, 10)}, ${project.pushed_at.slice(11, 16)}

+

+
`; + }); + }); + getPulls(forkedRepos); + drawChart(forkedRepos.length); + }); +}; + +// Getting Pull requests // +const getPulls = (forkedRepos) => { + forkedRepos.forEach((project) => { + fetch( + `https://api.github.com/repos/Technigo/${project.name}/pulls?per_page=100` + ) + .then((response) => response.json()) + .then((pulldata) => { + const myPullRequest = pulldata.find( + (pull) => pull.user.login === project.owner.login + ); + if (myPullRequest) { + document.getElementById(`pull-${project.name}`).innerHTML = ` + Pull request`; + } else { + document.getElementById(`pull-${project.name}`).innerHTML = ` + No pull request available`; + } + }); + }); +}; + +getUser(); +getRepos(); \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..1477ab39 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,141 @@ body { - background: #FFECE9; + box-sizing: border-box; + min-width: 325px; + background-color:#53565A; + font-family: Arial, Helvetica, sans-serif +} + +.wrapper { + margin: 5% 0; +} + + +h1 { + margin-top: 10%; + color: Black; + text-align: center; + font-size: 30px; +} + + +.profile-container { + text-align: center; + color: white; + align-items: center; +} + +h4 { + margin: 2% 0; + font-size: 28px; + color:black; +} +/* not working prolly something in JS but I can't figure it out */ +img { + width: 50%; + height: 50%; + border-radius: 50%; + border: 1px solid white; + +} + +h2 { + text-align: center; + color: black; +} + + +.chart-container { + width: 70%; + margin: 0 0 10% 15%; +} + + +.projects-list { + border: 1px solid #b8c3bd; + padding: 4%; + height: 100%; + color: black; + font-size: 17px; +} +.projects-individual { + border-bottom: 1px solid #b8c3bd; +} + + +a:link { + color: white; +} + + +a:visited { + color: white; +} + + +a:hover { + color: black; +} + + +@media (min-width: 668px) and (max-width: 1024px) { + + h1 { + font-size: 45px; + } + + h4 { + font-size: 38px; + } + + h2 { + font-size: 40px; + } + + /* not working prolly something in JS but I can't figure it out */ + img { + width: 40%; + height: 40%; + } + + .chart-container { + width: 50%; + margin: 5% 0 5% 27%; + } + + + .projects-list { + text-align: center; + } +} + + +@media (min-width: 1025px) { + .big-container { + display: grid; + grid-template-columns: 1fr 2fr; + margin: 2%; + } + + + h1 { + font-size: 60px; + margin-top: 4%; + } + + + h4, h2 { + font-size: 40px; + } + + + .projects-list { + padding: 0 0 0 5%; + font-size: 16px; + border-bottom: 1px solid #b8c3bd; + } + + .projects { + display: grid; + grid-template-columns: 1fr 1fr; + } } \ No newline at end of file From b6cfde290ea9c90dbec558e32e96ac44b92ff53b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Harry=20B=C3=A4cklin?= <83465217+Groovedharry@users.noreply.github.com> Date: Mon, 4 Oct 2021 12:19:41 +0200 Subject: [PATCH 2/2] updated readme --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index e15a3309..06f6eb13 100644 --- a/README.md +++ b/README.md @@ -14,4 +14,6 @@ Describe how you approached to problem, and what tools and techniques you used t ## View it live +https://determined-bose-382814.netlify.app + 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.