diff --git a/README.md b/README.md index 1613a3b0..e4e96798 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,17 @@ # 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. +Using Github API to fetch information about our Technigo projects such as user profile, repos, pullrequests and commit messages. Displaying them nicely and drawing a chart to see progress. + ## 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? +My team and I was working closely in our team room so that we could support eachother and ask for help. I planned to do the majority of the javascript at the beginning of the week so I had everything before going in to styling. This was a great progress for me so that I don't jump to much back and forth between my code files. + +I have not solved my modal but I have a conversation ongoing in stackoverflow. + ## 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://carling-githubtracker-w7.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..2a228a8a 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') -//"Draw" the chart here 👇 +//Draws the chart and displays progress in projects finished vs left +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: ['Finished projects', 'Projects left'], + datasets: [ + { + label: 'Technigo projects', + data: [amount, 19 - amount], + backgroundColor: ['rgb(161, 112, 218)', 'rgb(122, 71, 180)'], + hoverOffset: 4, + }, + ], + }, + } + + const myChart = new Chart(ctx, config) +} diff --git a/code/images/big-github_icon.png b/code/images/big-github_icon.png new file mode 100644 index 00000000..081af6c5 Binary files /dev/null and b/code/images/big-github_icon.png differ diff --git a/code/images/github-icon_black.png b/code/images/github-icon_black.png new file mode 100644 index 00000000..081af6c5 Binary files /dev/null and b/code/images/github-icon_black.png differ diff --git a/code/images/github_icon.png b/code/images/github_icon.png new file mode 100644 index 00000000..a6de6a93 Binary files /dev/null and b/code/images/github_icon.png differ diff --git a/code/images/link_icon.png b/code/images/link_icon.png new file mode 100644 index 00000000..35c27746 Binary files /dev/null and b/code/images/link_icon.png differ diff --git a/code/images/location_icon.png b/code/images/location_icon.png new file mode 100644 index 00000000..cbf22731 Binary files /dev/null and b/code/images/location_icon.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..980fa320 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,68 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

Technigo GitHub Tracker

+
+
+ +
+
+ +
+
+ + +
+

+ Follow my project progress at Technigo Frontend Boot camp +

+

+ During the boot camp we will have 19 weekly projects and you can follow + the progress in the chart displayed here: +

+ +
+ + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..779b574e 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,154 @@ +const user = 'Asivol93' +const REPOS_URL = `https://api.github.com/users/${user}/repos` +const USER_URL = `https://api.github.com/users/${user}` +const githubImg = './images/big-github_icon.png' +const githubProfile = `https://github.com/${user}` +const userContainer = document.getElementById('userProfile') +const projectsContainer = document.getElementById('projectsContainer') +const userDetailContainer = document.getElementById('userDetails') +const modal = document.getElementById('myModal') // Get the modal +const span = document.getElementsByClassName('close')[0] // Get the element that closes the modal + +//Fetches general user info +const userProfile = () => { + fetch(USER_URL) + .then((res) => res.json()) + .then((data) => { + userContainer.innerHTML += ` +
+

Username: ${data.login}

+

Full name: ${data.name}

+

Location: ${data.location}

+
+ + + +
+ +
+ + + + + ` + }) +} + +//Fetches all repositories that are forked and starts with "project-" to get the ones from Technigo +const fetchAll = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith('project-') + ) + //Sorts and displays the projects by the newest to the latest projects + forkedRepos.sort((a, b) => { + return new Date(b.pushed_at) - new Date(a.pushed_at) + }) + //Formates the date nicely + forkedRepos.forEach((repo) => { + const pushedDate = new Date(repo.pushed_at).toLocaleDateString( + 'en-se', + { + hour: '2-digit', + minute: '2-digit', + weekday: 'short', + year: 'numeric', + month: 'short', + day: 'numeric', + } + ) + + projectsContainer.innerHTML += ` +
+
+ + + +
+ +

${repo.name}

+

Branch: ${repo.default_branch}

+

Latest push: ${pushedDate}

+

+
+ ` + }) + + drawChart(forkedRepos.length) + pullRequests(forkedRepos) + }) + + .catch(() => { + userContainer.innerHTML = ` +

Sorry we could not find any data!

+ ` + }) +} + +//Gets the PR from the forked repos. +const pullRequests = (repos) => { + repos.forEach((repo) => { + fetch( + `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` + ) + .then((res) => res.json()) + .then((data) => { + const myPulls = data.find( + (pull) => pull.user.login === repo.owner.login + ) + + if (myPulls) { + showCommits(myPulls.commits_url, repo.name) + } else { + //Displays message if not commits are made + document.getElementById(`commit-${repo.name}`).innerHTML = ` +

No pull request done

+

(either ongoing project or a group/pair project)

` + } + }) + }) +} + +//Displayes the commit messages for the repos that have a PR +const showCommits = (url, myRepoName) => { + fetch(url) + .then((res) => res.json()) + .then((data) => { + let commitMessage = data[data.length - 1].commit.message + + document.getElementById(`commit-${myRepoName}`).innerHTML += ` +

Number of commits: ${data.length}

+ + ` + document.getElementById('myModal').innerHTML += ` +
+ +

${myRepoName} latest commit: ${commitMessage}

+
+ ` + + const btn = document.getElementById(`myBtn-${myRepoName}`) + + //Opens the commit msg in a modal by clicking at the button + btn.onclick = function () { + document.getElementById('myModal').style.display = 'block' + } + + //Closes the modal when clicking at X + document.getElementsByClassName('close')[0].onclick = function () { + document.getElementById('myModal').style.display = 'none' + } + + //Have not made this function work yet, closes the modal when clicking outside of it + window.onclick = function (event) { + if (event.target == modal) { + document.getElementById('myModal').style.display = 'none' + } + } + }) +} + +userProfile() +fetchAll() diff --git a/code/style.css b/code/style.css index 7c8ad447..842597a9 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,329 @@ +*/ { + box-sizing: border-box; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: #fff; + margin: 0; + font-family: 'Nunito Sans'; + letter-spacing: 0.8px; +} + +header { + text-align: center; + color: #000; + margin: 0; + top: 0; + left: 0; + width: 100%; +} + +.header-title { + font-family: 'Bebas Neue'; + letter-spacing: 5px; + font-size: 30px; +} + +.user-section p { + margin: 0px; + height: 30px; + font-size: 18px; + color: #000; + margin-bottom: 3em; +} + +.user-profile { + text-align: center; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + color: #000; +} + +.projects-container { + margin-top: 10em; +} + +.swap-on-hover a { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.swap-on-hover img { + border-radius: 100%; + max-height: 250px; + display: block; + border: 3px solid #6440c5; + position: absolute; + box-shadow: rgba(49, 46, 240, 0.4) 4px 4px, rgba(61, 33, 221, 0.3) 8px 8px, + rgba(35, 11, 141, 0.2) 13px 13px, rgba(33, 17, 104, 0.1) 18px 18px, + rgba(39, 22, 117, 0.05) 23px 23px; +} + +.swap-on-hover .front-image { + z-index: 9999; + transition: opacity 0.5s linear; + cursor: pointer; +} + +/*Shows the github-icon on hower since the profil pic get opacity 0*/ +.swap-on-hover:hover .front-image { + opacity: 0; +} + +.icon-container { + display: flex; +} + +.github-icon { + height: 50px; + position: relative; + border: none; +} + +.repo-item { + background-color: #fff; + padding: 15px 20px; + margin: 30px 40px; + border: 3px solid #1d2f6f; + text-align: center; + box-shadow: rgba(49, 46, 240, 0.4) 5px 5px, rgba(61, 33, 221, 0.3) 10px 10px, + rgba(35, 11, 141, 0.2) 15px 15px, rgba(33, 17, 104, 0.1) 20px 20px, + rgba(39, 22, 117, 0.05) 25px 25px; +} + +h3 a { + text-decoration: none; + color: black; + font-size: 30px; +} + +h2 { + color: #000; +} + +p { + color: black; + font-size: 20px; +} + +h3 a:hover { + color: #a170da; +} + +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ +} + +/* Modal Content */ +.modal-content { + background-color: #fff; + padding: 15px; + border: 1px solid #6440c5; + width: 80%; +} + +.modal-message { + color: #1a1e22; +} + +/* The Close Button */ +.close { + color: #aaaaaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: #000; + text-decoration: none; + cursor: pointer; +} + +/*Button to open the modal and read latest commit*/ +.modal-button { + align-items: center; + appearance: none; + background-image: radial-gradient( + 100% 100% at 100% 0, + #9f5aff 0, + #5468ff 100% + ); + border: 0; + border-radius: 6px; + box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, + rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(58, 65, 111, 0.5) 0 -3px 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-flex; + font-family: 'JetBrains Mono', monospace; + height: 48px; + justify-content: center; + line-height: 1; + list-style: none; + overflow: hidden; + padding-left: 16px; + padding-right: 16px; + position: relative; + text-align: left; + text-decoration: none; + transition: box-shadow 0.15s, transform 0.15s; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + white-space: nowrap; + will-change: box-shadow, transform; + font-size: 18px; +} + +.modal-button:focus { + box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, + rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset; +} + +.modal-button:hover { + box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, + rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset; + transform: translateY(-2px); +} + +.modal-button:active { + box-shadow: #3c4fe0 0 3px 7px inset; + transform: translateY(2px); +} + +.chart-title { + color: #1d2f6f; + text-align: center; + font-family: 'Bebas Neue'; + font-size: 40px; + margin-top: 60px; +} + +.chart-container p { + text-align: center; + padding: 20px; +} + +.signature { + background: #1a1e22; + width: 100%; + padding-top: 10px; + padding-bottom: 10px; + color: #fff; + text-align: center; + margin-top: 50px; +} + +.signature h3 { + font-family: 'Nothing You Could Do'; +} + +.signature p { + font-size: 12px; + color: #fff; +} + +/*Tablet view*/ +@media (min-width: 750px) and (max-width: 1024px) { + header { + height: 55%; + } + + .header-title { + font-size: 50px; + } + + .projects-container { + margin-top: 200px; + display: grid; + grid-template-columns: auto auto; + } + + .repo-item { + margin: 20px 30px; + padding: 5px 10px; + } + + .chart-title { + font-size: 25px; + padding: 20px; + } + + .chart-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + + .chart-canvas { + max-width: 400px; + max-height: 400px; + justify-content: center; + align-items: center; + } + + .chart-container p { + padding: 20px; + font-size: 18px; + } +} + +/*Desktop view*/ +@media (min-width: 1025px) { + header { + height: 57%; + } + + .projects-container { + display: grid; + grid-template-columns: auto auto auto; + } + + .header-title { + font-size: 50px; + } + + .chart-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + + .chart-title { + padding: 20px; + } + + .chart-canvas { + max-width: 400px; + max-height: 400px; + justify-content: center; + align-items: center; + padding: 20px; + } + + .chart-container p { + text-align: center; + padding: 50px; + } +}