diff --git a/README.md b/README.md index 1613a3b0..739dfaa5 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,21 @@ # GitHub Tracker -Replace this readme with your own information about your project. +This week we are creating a GitHub tracker -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +Requirements: +• A list of all repos that are forked from Technigo +• Your username and profile picture +• Most recent update (push) for each repo +• Name of your default branch for each repo +• URL to the actual GitHub repo +• Number of commits for each repo +• It should be responsive (mobile first) +• A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects 🥳) using Chart.js. ## 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 stated by reviewing the GitHub documentation. Then looked at the instructions hos to use the dynamic id. The profile section was easy to get up, but then I struggled with getting commits up. I had an error in the dynamic id. Once I solved it I moved on to the chart. Getting the data up was not easy, it took me some time to understand how to pass on the info from script to the chart. ## 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://laughing-bardeen-1bdbb2.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..12aa8055 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,26 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') - +const ctx = document.getElementById("chart").getContext("2d"); +Chart.defaults.font.family = "Poppins"; //"Draw" the chart here 👇 +const drawChart = (projects) => { + const labels = ["DONE", "STILL TO DO"]; + + const data = { + labels: labels, + datasets: [ + { + data: [projects, 19 - projects], + backgroundColor: ["rgb(157,219,201)", "#8286db"], + borderColor: ["rgb(157,219,201)", "#8286db"], + }, + ], + }; + + const config = { + type: "doughnut", + data: data, + // // options: {} + }; + + new Chart(document.getElementById("chart"), config); +}; diff --git a/code/images/bag.png b/code/images/bag.png new file mode 100644 index 00000000..9e83c69d Binary files /dev/null and b/code/images/bag.png differ diff --git a/code/images/blob-red.png b/code/images/blob-red.png new file mode 100644 index 00000000..aacc10b1 Binary files /dev/null and b/code/images/blob-red.png differ diff --git a/code/images/wave-2.png b/code/images/wave-2.png new file mode 100644 index 00000000..a3a72d7f Binary files /dev/null and b/code/images/wave-2.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..3efa986e 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,37 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
- - - - - - - - \ No newline at end of file + + + + + + + + + Justine's GitHub Tracker + + + +
+ a bag of repos +
+
+
+
+
+
+ a bag of repos +
+ +
+
+ + + + + diff --git a/code/script.js b/code/script.js index e69de29b..5940e5f2 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,78 @@ +// DOM selectors: +const repoGrid = document.getElementById("repoGrid"); +const profile = document.getElementById("profile"); + +// Global variables: +const userName = "JustineZwiazek"; +const API_USER = `https://api.github.com/users/${userName}`; +const API_REPOS = `https://api.github.com/users/${userName}/repos`; + +// Profile information function: +const getProfile = () => { + fetch(API_USER) + .then((res) => res.json()) + .then((data) => { + profile.innerHTML = ` + +
+

${data.name}

+

Front End Development student 👩🏻‍💻

+

Stockholm, Sweden 🇸🇪

+ `; + }); + getRepos(); +}; + +// Fetch repositories function: +const getRepos = () => { + fetch(API_REPOS) + .then((res) => res.json()) + .then((data) => { + // Filtering out not forked repositories: + const forkedRepos = data.filter( + (repo) => repo.name.startsWith("project") && repo.fork === true + ); + forkedRepos.forEach((repo) => { + repoGrid.innerHTML += ` +
+

${repo.name}

+

Default branch: ${repo.default_branch}

+

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

+ Link to repo + `; + }); + getPullRequests(forkedRepos); + drawChart(forkedRepos.length); + }); +}; + +// Fetch pull requests function: +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach((repo) => { + fetch( + `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` + ) + .then((res) => res.json()) + .then((data) => { + const myPullsOnly = data.find( + (pull) => pull.user.login === repo.owner.login + ); + const myCommitsURL = myPullsOnly.commits_url; + const repoName = repo.name; + getCommits(myCommitsURL, repoName); + }); + }); +}; + +// Fetch number of commits function: +const getCommits = (myCommitsURL, repoName) => { + fetch(myCommitsURL) + .then((res) => res.json()) + .then((data) => { + // Count the number of commits: + document.getElementById(repoName).innerHTML += ` +

# of Commits: ${data.length}

`; + }); +}; +// Initiate the first function +getProfile(); diff --git a/code/style.css b/code/style.css index 7c8ad447..9ed15eb1 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,227 @@ -body { - background: #FFECE9; -} \ No newline at end of file +* { + margin: 0; + padding: 0; + font-family: "Poppins", sans-serif; + color: #3a3950; +} + +/* Profile information: */ +.profile { + background-color: pink; + margin: auto; + display: block; + padding-top: 20px; +} +.user-img { + background-color: white; + display: block; + width: 70vw; + border-radius: 50%; + border: 5px solid #dddcf1; + padding: 5px; + margin-right: auto; + margin-left: auto; + margin-bottom: 20px; +} +.profile-info { + padding-bottom: 40px; +} +h2 { + color: rgb(255, 87, 87); + text-align: center; +} +.profile p { + text-align: center; +} + +/* Big image section */ +.img-bag { + width: 100vw; + display: block; + padding: 20px 0; + margin: auto; + background-color: rgb(241, 204, 161); +} + +/* My happy wave: */ +.wave { + height: 20px; + background-position: 0; + background-size: auto 100%; + background-repeat: repeat-x; + animation: animateCloud 20s linear infinite; + background-image: url(images/wave-2.png); +} + +@keyframes animateCloud { + 0% { + background-position: 0 0; + } + 100% { + background-position: 1280px 0; + } +} + +/* Project information: */ +.wrapper { + background-color: pink; + padding-top: 20px; + padding-bottom: 20px; +} +.repo-grid { + display: grid; + grid-template-columns: 1fr; + background-color: pink; + padding-top: 20px; +} +.repos { + border: 5px solid rgb(157, 219, 201); + border-radius: 20px; + margin-bottom: 15px; + padding: 10px 40px; + margin-left: auto; + margin-right: auto; +} +.repos h3 { + color: rgb(255, 87, 87); +} +a:hover { + color: rgb(255, 87, 87); +} + +/* Chart: */ +.chart-section { + margin-left: auto; + margin-right: auto; + background-color: rgb(241, 204, 161); +} +.chart-container { + padding: 20px 0; + max-width: 80vw; + min-width: 80vw; + margin-left: auto; + margin-right: auto; +} +.img-bag-2 { + display: none; +} + +/* Footer: */ +footer { + background-color: pink; +} +h5 { + text-align: center; + padding: 20px 0; + color: white; + text-shadow: 0 0 5px rgb(255, 87, 87); +} + +/* Tablet */ +@media screen and (min-width: 600px) and (max-width: 992px) { + .profile { + display: flex; + align-items: center; + justify-content: center; + background-color: rgb(241, 204, 161); + } + .user-img { + width: 20vw; + margin: 30px; + } + .profile-info { + align-self: center; + padding-bottom: 0; + } + .img-bag { + display: none; + } + .repo-grid { + display: grid; + grid-template-columns: 1fr 1fr; + } + .repo { + width: 40vw; + } +} + +/* Desktop */ +@media screen and (min-width: 993px) { + .profile { + display: flex; + align-items: flex-start; + background-color: rgb(241, 204, 161); + } + .user-img { + width: 10vw; + margin: 30px; + } + .profile-info { + align-self: center; + padding-bottom: 0; + } + .img-bag { + display: none; + } + .repo-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } + .repo { + width: 40vw; + } + .chart-container { + max-width: 30vw; + min-width: 30vw; + } + .chart-section { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + padding: 0 10vw; + } + + /* My happy bag */ + .img-bag-2 { + width: 40vw; + padding: 40px 0; + display: block; + object-fit: cover; + animation: shake 2s infinite; + } + @keyframes shake { + 0% { + transform: translate(1px, 1px) rotate(0deg); + } + 10% { + transform: translate(-1px, -2px) rotate(-1deg); + } + 20% { + transform: translate(-3px, 0px) rotate(1deg); + } + 30% { + transform: translate(3px, 2px) rotate(0deg); + } + 40% { + transform: translate(1px, -1px) rotate(1deg); + } + 50% { + transform: translate(-1px, 2px) rotate(-1deg); + } + 60% { + transform: translate(-3px, 1px) rotate(0deg); + } + 70% { + transform: translate(3px, 1px) rotate(-1deg); + } + 80% { + transform: translate(-1px, -1px) rotate(1deg); + } + 90% { + transform: translate(1px, 2px) rotate(0deg); + } + 100% { + transform: translate(1px, -2px) rotate(-1deg); + } + } +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..670014a8 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "project-github-tracker", + "lockfileVersion": 2, + "requires": true, + "packages": {} +}