diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..a5c50e6d Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..246004c1 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. +The assigment was to create a Github tracker that shows all the github repos that is created in the Bootcamp. ## 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? +First step was to get all the correct information from the Github API on the page. Using fetch and different APIs I was able to get all the info that I later styled using CSS. With dynamic ID I was able go get certain information from one fetch into another innerHTML in another fetch. ## 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://sad-jennings-8c6d22.netlify.app diff --git a/code/chart.js b/code/chart.js index 92e85a30..b709c318 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,33 @@ //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 config = { + type: "doughnut", + data: { + labels: ["Finished Projects", "Projects Left"], + datasets: [ + { + label: ["Finished Projects", "Projects Left"], + data: [amount, 19 - amount], + backgroundColor: ["#76b5c5", "#eab676"], + hoverOffset: 4, + }, + ], + }, + options: { + plugins: { + legend: { + labels: { + font: { + size: 12, + family: "'Poppins',sans-serif", + color: "rgba(26, 26, 24, 0.849)", + }, + }, + }, + }, + }, + }; + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..ec388574 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,33 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

GitHub Tracker

+
+
+
+

Projects

+
+

Project progress at Technigo Bootcamp

+
+ +
- - - - - - - \ No newline at end of file + + + + diff --git a/code/script.js b/code/script.js index e69de29b..f7d29a9f 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,94 @@ +const username = "madeleinesvensson"; +const REPOS_URL = `https://api.github.com/users/${username}/repos`; +const USERS_URL = `https://api.github.com/users/${username}`; +const container = document.getElementById("projects"); +const userInformation = document.getElementById("user-information"); + +//Takes away the - in the project name +const formattedRepoName = (name) => name.replace(/-/g, " "); + +//Gets the forked repos from github. +const getRepos = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith("project-") + ); + //Fixes the date and time in last pushed. + forkedRepos.sort(function (a, b) { + return new Date(b.pushed_at) - new Date(a.pushed_at); + }); + forkedRepos.forEach((repo) => { + const pushedDate = new Date(repo.pushed_at).toLocaleDateString( + "en-GB", + { + hour: "2-digit", + minute: "2-digit", + weekday: "short", + year: "numeric", + month: "short", + day: "numeric", + } + ); + + container.innerHTML += ` +
+

${formattedRepoName( + repo.name + )}

 +

${repo.default_branch}

+

Latest update: ${pushedDate}

+

Commits:

+
+ `; + }); + drawChart(forkedRepos.length); + getPullRequests(forkedRepos); + }); +}; + +getRepos(); + +const getPullRequests = (repos) => { + //Get all the PRs for each project. + repos.forEach((repo) => { + fetch( + `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` + ) + .then((res) => res.json()) + .then((data) => { + const filteredPullrequests = data.find( + (pull) => pull.user.login === repo.owner.login + ); + if (filteredPullrequests) { + commits(filteredPullrequests.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = "No data"; + } + }); + }); +}; +//gets the commits in the project container. +const commits = (url, myRepoName) => { + fetch(url) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); +}; + +//Gets the user data. +fetch(USERS_URL) + .then((res) => res.json()) + .then((data) => { + userInformation.innerHTML = ` + +
+

${data.name}

+

${data.login}

+

Location: ${data.location}

+

Bio: ${data.bio}

+
+ `; + }); diff --git a/code/style.css b/code/style.css index 7c8ad447..c65703eb 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,174 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #154c79; + font-family: "Poppins", sans-serif; + color: white; +} + +hr { + height: 2px; + width: 80%; + background-color: #eab676; + border-radius: 10px; + margin-bottom: 20px; +} +.user-container { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.user-information { + max-width: 300px; +} +img { + border-radius: 50%; + box-shadow: 0px 0px 13px -2px #000000; + width: 250px; + justify-content: center; + border: 5px solid #eab676; +} + +h1 { + text-align: center; + font-size: 40px; + margin-bottom: 20px; +} +h2 { + text-align: center; + margin-top: 20px; + font-size: 30px; + font-weight: 200; +} +h3 { + font-size: 25px; + margin: 5px; + font-weight: 300; + text-align: center; +} +h4 { + font-size: 15px; + align-self: flex-start; + margin: auto; + padding: 4px; + font-weight: 100; +} +p { + font-size: 15px; + color: black; + margin: 3px; +} +a { + text-decoration: none; + color: black; + justify-content: center; +} +.user-information { + max-width: 90%; + justify-content: center; +} + +.repo-cards { + border-radius: 10px; + margin: 15px; + padding: auto; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + background-color: white; + border: 3px solid #76b5c5; +} + +canvas { + max-height: 100%; + max-width: 100%; + margin: 50px 0px; +} + +/*TABLET*/ +@media (min-width: 768px) and (max-width: 991px) { + .repo-cards { + width: 45%; + } + .project-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + justify-content: space-around; + } + canvas { + max-width: 400px; + max-height: 400px; + } + .chart-container { + display: flex; + justify-content: center; + } +} + +/* DESKTOP */ +@media (min-width: 992px) { + .repo-cards { + width: 30%; + } + .project-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + justify-content: space-around; + } + + canvas { + max-width: 500px; + max-height: 500px; + } + .chart-container { + display: flex; + justify-content: center; + width: 100%; + } + h2 { + text-align: left; + margin-left: 30px; + } + h3 { + text-align: left; + } + .user-container { + display: flex; + justify-content: center; + flex-direction: row; + align-content: center; + } + .user-information { + flex-direction: column; + margin-left: 50px; + max-width: 300px; + } + .header-wrapper { + justify-content: flex-start; + display: flex; + flex-direction: column; + } + h1 { + text-align: left; + margin-left: 50px; + } + hr { + height: 2px; + width: 90%; + border-style: solid #eab676; + border-radius: 10px; + background-color: #eab676; + margin-bottom: 20px; + justify-content: flex-start; + align-self: flex-start; + } + :hover.repo-cards { + box-shadow: 0px 0px 13px -2px #000000; + transform: translateY(-2px); + } +}