diff --git a/README.md b/README.md index 1613a3b0..67ea39b2 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,16 @@ # GitHub Tracker -Replace this readme with your own information about your project. +## The problem -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +The assignment was to build a GitHub tracker, using APIs to fetch information about our Technigo projects. We needed to filter and find certain bits of the arrays to get the correct information. -## The problem +It has been a fun, but difficult project. To me, the lessons have been very useful. I can read the code and more or less understand it, but I have a hard time coming up with the correct solutions on my own. +I followed the lessons and then implemented what I had learned in my own code. I always rewrote the code (I didn't copy-paste) in order to grasp what I was doing. +I coded together with my team several times, it was great. -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 focused on getting all the js/chart in place first, and then went on with the styling. It was more challenging than I thought, but by asking my team and looking at stack overflow I think it went well! -## View it live +If I had more time I would look into the red and black requirements. And add a footer with some contact info. -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. +## View it live +https://github-tracker-maria.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..facf3bee 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,46 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (amount) => { + + +const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished projects', + 'Upcoming projects', + ], + + datasets: [{ + label: 'My projects at Technigo', + data: [amount, 19-amount], + backgroundColor: [ + '#f6e271', + '#f6B915', + ], + hoverOffset: 4 + }] + }, + + // Changeing the fontsize + options: { + plugins: { + legend: { + position: "bottom", + labels: { + font: { + size: 20, + }, + }, + }, + }, + }, + +}; + + +const projectsChart = new Chart(ctx, config); +} + + diff --git a/code/github-tracker.code-workspace b/code/github-tracker.code-workspace new file mode 100644 index 00000000..56aa326a --- /dev/null +++ b/code/github-tracker.code-workspace @@ -0,0 +1,11 @@ +{ + "folders": [ + { + "path": ".." + } + ], + "settings": { + "liveServer.settings.port": 5505, + "liveServer.settings.multiRootWorkspaceName": "MAKScode" + } +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..288fe94a 100644 --- a/code/index.html +++ b/code/index.html @@ -1,19 +1,38 @@ + Project GitHub Tracker + + + + +

GitHub Tracker

-

Projects:

-
- - + +
+
+ + +
+

My Technigo projects:

+
+ + + +
+ + +
+ + diff --git a/code/script.js b/code/script.js index e69de29b..592c142d 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,99 @@ +/// All API:S /// +const USER = 'hejmaria' +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const USER_URL = `https://api.github.com/users/${USER}`; + +/// All DOM selectors /// +const projectContainer = document.getElementById('projects'); +const profileContainer = document.getElementById('profile'); + + +/// Fetching the user proile /// +const getProfile = () => { + fetch(USER_URL) + .then((res) => res.json()) + .then((data) => { + profileContainer.innerHTML = ` +
+ avatar picture +
+
+

Hi! I'm ${data.name}. This is my github tracker.

+

Username: ${data.login}

+ +
+ `; + }) +} + +/// Fetching the repos /// +const getRepos = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + + // data.forEach (repo => console.log(repo.name)) + + const forkedRepos = data.filter( + (repo) => repo.name.includes('project-') && repo.fork + ); + + /// Sort the projects /// + forkedRepos.sort( + (a, b) => new Date(b.created_at) - new Date(a.created_at) + ); + + /// Putting the projects info into the html /// + forkedRepos.forEach((repo) => { + projectContainer.innerHTML += ` +
+

${repo.name}

+ The project with default branch: ${repo.default_branch}. +

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

+

Number of commits:

+
+ `; + }); + + fetchPullRequestsArray(forkedRepos); + drawChart(forkedRepos.length); + }); + +}; + + +/// Fetching the pull requests /// +const fetchPullRequestsArray = (allRepos) => { + allRepos.forEach((repo) => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + + + /// Sorting pullrequests and commits /// + fetch(PULL_URL) + .then ((res) => res.json()) + .then((data) => { + const userPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login); + + if (userPullRequest) { + fetchCommits(userPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + `Nope, ${USER} hasn't done a pull request yet.`; + } + }); + }); +}; + +/// Fetching the commits /// +const fetchCommits = (myCommitsUrl, MyRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${MyRepoName}`).innerHTML += data.length; + }); +}; + + +getProfile() +getRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..66a8ea55 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,160 @@ body { - background: #FFECE9; + background: #203c3b; + font-family: 'Source Sans Pro', sans-serif; + color:#ffffff; + padding: 0 2%; + +} + +h1 { + font-size: 60px; + font-family: 'Fredoka One', cursive; + color: #f6e271; + text-align: center; +} + +h2{ + font-size: 35px; + font-family: 'Fredoka One', cursive; + color: #ffffff; + opacity: 80%; +} + +h3 { + font-size: 25px; + font-family: 'Source Sans Pro', sans-serif; + font-weight: 300; + color: #ffffff; +} + +h4 { + font-size: 30px; + font-weight: 600; + font-family: 'Source Sans Pro', sans-serif; + color: #f6B915; + text-transform: capitalize; +} + +a { + color: #ffffff; + text-decoration: none; + font-weight: 600; +} + +a:hover { + background-color: #6B9493 +} + +a:visited { + color: #ffffff; +} + +#profile { + display: grid; + margin-bottom: 10%; + grid-template-columns: 1fr; + grid-gap: 1rem; + justify-items: center; +} + +.profile-box { + grid-column: span 1; +} + +.profile-box img { + border-radius: 50%; + object-fit: contain; + width: 300px; +} + +#projects { + display: grid; + margin: 0% 2%; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + column-gap: 1rem; + row-gap: 1rem; +} + +.projects-box { + background-color: #447270; + grid-column-end: auto; + box-shadow: 5px 5px 0px 0px #f6B915; + padding: 8px; +} + +.chart-box { + width: 80%; + margin: auto; + padding-top: 10%; + padding-bottom: 10%; +} + + +/* Responsiveness LARGER PHONE */ +@media (min-width: 400px) { + +h2{ + font-size: 40px; +} + +#projects { + margin: 0% 5%; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} + +.projects-box { + padding: 10px; +} +} + + +/* Responsiveness TABLET */ +@media (min-width: 768px) { + +h1 { + font-size: 70px; +} + +#projects { + margin: 0% 10%; +} + +.profile-box img { + width: 400px; +} + +.chart-box{ + width: 60%; +} + +} + +/* Responsiveness SMALL SCREEN */ +@media (min-width: 992px) { + h1 { + font-size: 80px; + } + +#projects { + margin: 0% 15%; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); +} + +.profile-box img { + width: 480px; +} + +.chart-box { + width: 50%; +} + +} + + +/* Responsiveness BIG SCREEN */ +@media (min-width: 1100px) { + + .chart-box { + width: 40%; + } } \ No newline at end of file