From 8d43c53123e33a5ded8e5c39d0c5df2c297b29a6 Mon Sep 17 00:00:00 2001 From: Your name here Date: Sun, 26 Sep 2021 23:54:52 +0200 Subject: [PATCH 01/11] fetched repos --- code/chart.js | 7 ++++++- code/script.js | 27 +++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..30e67641 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,9 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 +// const config = { +// type: "line", +// data: data, +// options: {}, +// }; diff --git a/code/script.js b/code/script.js index e69de29b..02e0a966 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,27 @@ +const GITHUB_URL = "https://api.github.com/users/efstasia/repos"; + +fetch(GITHUB_URL) + .then((response) => { + return response.json(); + }) + .then((json) => { + console.log(json); + }); + +// const getPullRequests = (repos) => { +// //Get all the PRs for each project. +// repos.forEach((repo) => { +// fetch(GITHUB_URL) +// .then((res) => res.json()) +// .then((data) => { +// console.log(data); +// //TODO +// //1. Find only the PR that you made by comparing pull.user.login +// // with either USER or repo.owner.login +// //2. Now you're able to get the commits for each repo by using +// // the commits_url as an argument to call another function +// //3. You can also get the comments for each PR by calling +// // another function with the review_comments_url as argument +// }); +// }); +// }; From b7cd4a90c1794d88ec83b4ef333f006fcacef7fd Mon Sep 17 00:00:00 2001 From: Your name here Date: Mon, 27 Sep 2021 22:27:15 +0200 Subject: [PATCH 02/11] added the project name, profile pic, last push and URL --- .vscode/settings.json | 5 +-- code/chart.js | 24 ++++++++++--- code/index.html | 36 ++++++++++--------- code/script.js | 84 +++++++++++++++++++++++++++++++------------ 4 files changed, 103 insertions(+), 46 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index e8783bfe..2e941084 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,4 @@ { - "liveServer.settings.port": 5505 -} \ No newline at end of file + "liveServer.settings.port": 5505, + "prettier.arrowParens": "avoid" +} diff --git a/code/chart.js b/code/chart.js index 30e67641..07bb302c 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,8 +2,22 @@ const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 -// const config = { -// type: "line", -// data: data, -// options: {}, -// }; + +const drawChart = amount => { + const config = { + type: "pie", + data: { + labels: ["finished projects", "projects left"], + + datasets: [ + { + label: "My First Dataset", + data: [amount, 20 - amount], + backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)"], + hoverOffset: 4, + }, + ], + }, + }; + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..083650eb 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,23 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

GitHub Tracker

+
+

Projects:

+
- - + + - - - - \ No newline at end of file + + + + diff --git a/code/script.js b/code/script.js index 02e0a966..ceb22731 100644 --- a/code/script.js +++ b/code/script.js @@ -1,27 +1,67 @@ -const GITHUB_URL = "https://api.github.com/users/efstasia/repos"; +const USER = "efstasia"; +const GITHUB_URL = `https://api.github.com/users/${USER}/repos`; +const projectsContainer = document.getElementById("projects"); +const pullContainer = document.getElementById("pull-requests"); +const profileInfo = document.getElementById("profile"); -fetch(GITHUB_URL) - .then((response) => { - return response.json(); - }) - .then((json) => { - console.log(json); - }); +// function to get profile picture and name +const profile = () => { + fetch(`https://api.github.com/users/${USER}`) + .then(response => { + return response.json(); + }) + .then(json => { + profileInfo.innerHTML += ` +

Username: ${json.login}

+ + `; + }); +}; +profile(); // invoking the profile function -// const getPullRequests = (repos) => { -// //Get all the PRs for each project. -// repos.forEach((repo) => { -// fetch(GITHUB_URL) -// .then((res) => res.json()) -// .then((data) => { -// console.log(data); -// //TODO -// //1. Find only the PR that you made by comparing pull.user.login -// // with either USER or repo.owner.login -// //2. Now you're able to get the commits for each repo by using -// // the commits_url as an argument to call another function -// //3. You can also get the comments for each PR by calling -// // another function with the review_comments_url as argument +// function to get all of the repos and commits +const getRepos = () => { + fetch(GITHUB_URL) + .then(response => { + return response.json(); + }) + .then(json => { + console.log(json); + const forkedRepos = json.filter( + repo => repo.fork && repo.name.startsWith("project-") + ); + forkedRepos.forEach( + repo => + (projectsContainer.innerHTML += `

Name of repo: ${repo.name}

+

Most recent push: ${repo.pushed_at.slice( + 0, + 10 + )} at ${repo.pushed_at.slice(11, 16)} from ${ + repo.default_branch + } branch

+ URL: CLICK HERE`) + ); + drawChart(forkedRepos.length); + }); +}; +getRepos(); // invoking the function + +// this gets the repos +// const getPullRequests = repos => { +// repos.forEach(repo => { +// fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls`) +// .then(response => response.json()) +// .then(json => { +// console.log(json); + +// const filterPulls = json.filter(pull => +// pull.user.login.includes("efstasia") +// ); +// console.log("FILTER PULLS", filterPulls); +// filterPulls.forEach( +// repo => +// (pullContainer.innerHTML += `

halloj vart är dom andra?? ${repo.name} ${repo.html_url}

`) +// ); // }); // }); // }; From ea9c22528c1af77a6f034a75fa49c89765baf9ab Mon Sep 17 00:00:00 2001 From: Your name here Date: Wed, 29 Sep 2021 21:46:02 +0200 Subject: [PATCH 03/11] finished the blue requirements --- code/chart.js | 2 ++ code/index.html | 10 +++--- code/script.js | 83 +++++++++++++++++++++++++++++++++---------------- code/style.css | 31 ++++++++++++++++-- 4 files changed, 94 insertions(+), 32 deletions(-) diff --git a/code/chart.js b/code/chart.js index 07bb302c..54765760 100644 --- a/code/chart.js +++ b/code/chart.js @@ -15,6 +15,8 @@ const drawChart = amount => { data: [amount, 20 - amount], backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)"], hoverOffset: 4, + responsive: true, + maintainAspectRatio: false, }, ], }, diff --git a/code/index.html b/code/index.html index 083650eb..0a392c16 100644 --- a/code/index.html +++ b/code/index.html @@ -10,12 +10,14 @@

GitHub Tracker

-
-

Projects:

-
+
+
+ +
+
- +
diff --git a/code/script.js b/code/script.js index ceb22731..a153aa20 100644 --- a/code/script.js +++ b/code/script.js @@ -1,9 +1,12 @@ const USER = "efstasia"; const GITHUB_URL = `https://api.github.com/users/${USER}/repos`; +const COMMIT_URL = `https://api.github.com/repos/efstasia/project-news-site/commits`; const projectsContainer = document.getElementById("projects"); const pullContainer = document.getElementById("pull-requests"); const profileInfo = document.getElementById("profile"); +console.log(COMMIT_URL); + // function to get profile picture and name const profile = () => { fetch(`https://api.github.com/users/${USER}`) @@ -12,8 +15,9 @@ const profile = () => { }) .then(json => { profileInfo.innerHTML += ` -

Username: ${json.login}

+

Username: ${json.login}

+

This account has a total of ${json.public_repos} repos

`; }); }; @@ -27,41 +31,68 @@ const getRepos = () => { }) .then(json => { console.log(json); + // this filters out ONLY the forked projects from technigo const forkedRepos = json.filter( repo => repo.fork && repo.name.startsWith("project-") ); + + // this creates a forEach function to get all of the projects and commits forkedRepos.forEach( repo => - (projectsContainer.innerHTML += `

Name of repo: ${repo.name}

-

Most recent push: ${repo.pushed_at.slice( - 0, - 10 - )} at ${repo.pushed_at.slice(11, 16)} from ${ + (projectsContainer.innerHTML += `

Name of repo: ${ + repo.name + }

+

Most recent push: ${new Date( + repo.pushed_at + ).toDateString()} at ${repo.pushed_at.slice(11, 16)} from ${ repo.default_branch } branch

- URL: CLICK HERE`) + URL: CLICK HERE + +

number of commits:

`) ); + fetchPullRequestsArray(forkedRepos); drawChart(forkedRepos.length); }); }; -getRepos(); // invoking the function +// invoking the function + +const fetchPullRequestsArray = allRepositories => { + allRepositories.forEach(repo => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + fetch(PULL_URL) + .then(res => res.json()) + .then(json => { + const myPullRequest = json.find( + pull => pull.user.login === repo.owner.login + ); + // Detect if we have pull request or not. + // If yes - call fetchCommits function + // If no - inform user that no pull request was yet done + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + "No pull requests done 😞"; + } + }); + }); +}; +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then(res => res.json()) + .then(json => { + document.getElementById(`commit-${myRepoName}`).innerHTML += json.length; + console.log("FETCH", fetchCommits); + }); +}; +getRepos(); + +// CODE WITH MAKS -// this gets the repos -// const getPullRequests = repos => { -// repos.forEach(repo => { -// fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls`) -// .then(response => response.json()) -// .then(json => { -// console.log(json); +/* fetch commits +fetchPullRequestSingle(repo) // the repo is in the forEach +we place the fetchPullRequestSingle(repo) inside the forEach loop on line 50 -// const filterPulls = json.filter(pull => -// pull.user.login.includes("efstasia") -// ); -// console.log("FILTER PULLS", filterPulls); -// filterPulls.forEach( -// repo => -// (pullContainer.innerHTML += `

halloj vart är dom andra?? ${repo.name} ${repo.html_url}

`) -// ); -// }); -// }); -// }; +https://api.github.com/repos/Technigo/${repo.name}/pulls).then(response => response.json()).then(json) => console.log(json) + */ diff --git a/code/style.css b/code/style.css index 7c8ad447..c0e91147 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,30 @@ +* { + box-sizing: border-box; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: #ffece9; +} + +.chart { + height: 300px; + width: 300px; +} + +.grid-container { + border: 2px solid red; + display: grid; + grid-template-columns: 1fr 2fr; +} + +.project-cards { + display: grid; + grid-template-columns: 1fr 1fr; + border: 2px solid green; +} + +.cards { + border: 2px solid orange; + display: grid; + width: 100%; +} From 9ae6f88341a63e1504e0818a457c2bce5a5b33c9 Mon Sep 17 00:00:00 2001 From: Your name here Date: Wed, 29 Sep 2021 23:19:15 +0200 Subject: [PATCH 04/11] added some styling --- code/chart.js | 2 +- code/index.html | 18 ++++++++++--- code/script.js | 1 + code/style.css | 67 ++++++++++++++++++++++++++++++++++++++----------- 4 files changed, 68 insertions(+), 20 deletions(-) diff --git a/code/chart.js b/code/chart.js index 54765760..ae57a226 100644 --- a/code/chart.js +++ b/code/chart.js @@ -13,7 +13,7 @@ const drawChart = amount => { { label: "My First Dataset", data: [amount, 20 - amount], - backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)"], + backgroundColor: ["#5F939A", "#D8AC9C"], hoverOffset: 4, responsive: true, maintainAspectRatio: false, diff --git a/code/index.html b/code/index.html index 0a392c16..46185ac0 100644 --- a/code/index.html +++ b/code/index.html @@ -6,18 +6,28 @@ Project GitHub Tracker + + +

GitHub Tracker

-
- -
+
+
+
+
+
+ Projects +
+
-
diff --git a/code/script.js b/code/script.js index a153aa20..da72a03e 100644 --- a/code/script.js +++ b/code/script.js @@ -51,6 +51,7 @@ const getRepos = () => {

number of commits:

`) ); + fetchPullRequestsArray(forkedRepos); drawChart(forkedRepos.length); }); diff --git a/code/style.css b/code/style.css index c0e91147..a433e3cc 100644 --- a/code/style.css +++ b/code/style.css @@ -1,30 +1,67 @@ * { box-sizing: border-box; + text-align: center; } body { - background: #ffece9; + background: #f9f3ec; + font-family: "Stick No Bills", sans-serif; + letter-spacing: 2px; } -.chart { - height: 300px; - width: 300px; +.cards { + border: 2px solid #5f939a; + background-color: rgba(169, 169, 169, 0.397); + display: grid; + align-items: center; + width: 90%; + text-align: center; + margin: 10px auto; + border-radius: 20px; + padding: 5px 5px; } .grid-container { - border: 2px solid red; - display: grid; - grid-template-columns: 1fr 2fr; + margin: auto; } -.project-cards { - display: grid; - grid-template-columns: 1fr 1fr; - border: 2px solid green; +fieldset { + border: 4px solid; + border-color: #5f939a; + border-radius: 20px; } -.cards { - border: 2px solid orange; - display: grid; - width: 100%; +legend { + font-size: 28px; +} + +img { + border-radius: 50%; + border: 4px solid black; +} +.chart { + margin: auto; + height: 200px; + width: 200px; +} + +/* MEDIA QUERIES */ + +@media (min-width: 768px) { + .grid-container { + border: 2px solid red; + display: grid; + grid-template-columns: 1fr 2fr; + } + + .project-cards { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .cards { + border: 2px solid #d8ac9c; + display: grid; + width: 100%; + } } From 52386ffe64c09511a6b4648158ffbfd843c2ed64 Mon Sep 17 00:00:00 2001 From: Your name here Date: Thu, 30 Sep 2021 13:02:02 +0200 Subject: [PATCH 05/11] added dark mode --- code/chart.js | 1 + code/index.html | 18 ++++++++- code/script.js | 47 +++++++++++++---------- code/style.css | 100 ++++++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 137 insertions(+), 29 deletions(-) diff --git a/code/chart.js b/code/chart.js index ae57a226..9599459a 100644 --- a/code/chart.js +++ b/code/chart.js @@ -15,6 +15,7 @@ const drawChart = amount => { data: [amount, 20 - amount], backgroundColor: ["#5F939A", "#D8AC9C"], hoverOffset: 4, + hoverOpacity: 1, responsive: true, maintainAspectRatio: false, }, diff --git a/code/index.html b/code/index.html index 46185ac0..54069282 100644 --- a/code/index.html +++ b/code/index.html @@ -12,21 +12,37 @@ href="https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@300&display=swap" rel="stylesheet" /> + + -

GitHub Tracker

+
+ +

GitHub Tracker

+
+
+
Projects
+
+

TEXT

+
+ diff --git a/code/script.js b/code/script.js index da72a03e..e3e2f1af 100644 --- a/code/script.js +++ b/code/script.js @@ -16,13 +16,17 @@ const profile = () => { .then(json => { profileInfo.innerHTML += ` -

Username: ${json.login}

+

+ + ${json.login}

This account has a total of ${json.public_repos} repos

`; }); }; profile(); // invoking the profile function +// + // function to get all of the repos and commits const getRepos = () => { fetch(GITHUB_URL) @@ -36,28 +40,32 @@ const getRepos = () => { repo => repo.fork && repo.name.startsWith("project-") ); - // this creates a forEach function to get all of the projects and commits + // this creates a forEach function to get all of the projects forkedRepos.forEach( repo => - (projectsContainer.innerHTML += `

Name of repo: ${ + (projectsContainer.innerHTML += `

${ repo.name }

-

Most recent push: ${new Date( - repo.pushed_at - ).toDateString()} at ${repo.pushed_at.slice(11, 16)} from ${ - repo.default_branch - } branch

- URL: CLICK HERE - -

number of commits:

`) + LINK TO REPOSITORY PAGE ON GITHUB +
+

Most recent push + ${new Date(repo.pushed_at).toDateString()} at ${repo.pushed_at.slice( + 11, + 16 + )}

+
+

${repo.default_branch}

+

Number of commits:

`) ); fetchPullRequestsArray(forkedRepos); drawChart(forkedRepos.length); }); }; -// invoking the function +// this fetches all of the pull requests and commit made to those const fetchPullRequestsArray = allRepositories => { allRepositories.forEach(repo => { const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; @@ -87,13 +95,10 @@ const fetchCommits = (myCommitsUrl, myRepoName) => { console.log("FETCH", fetchCommits); }); }; -getRepos(); - -// CODE WITH MAKS +getRepos(); // invoking the function -/* fetch commits -fetchPullRequestSingle(repo) // the repo is in the forEach -we place the fetchPullRequestSingle(repo) inside the forEach loop on line 50 - -https://api.github.com/repos/Technigo/${repo.name}/pulls).then(response => response.json()).then(json) => console.log(json) - */ +// function to toggle the dark mode +const myFunction = () => { + const element = document.body; + element.classList.toggle("dark-mode"); +}; diff --git a/code/style.css b/code/style.css index a433e3cc..292c8e40 100644 --- a/code/style.css +++ b/code/style.css @@ -2,23 +2,83 @@ box-sizing: border-box; text-align: center; } +/* variables to style the dark mode, add these in another variable in dark mode and add those to the selectors */ +:root { + --borderColor: 2px solid white; + --linkColor: white; + --usernameColor: white; +} body { background: #f9f3ec; font-family: "Stick No Bills", sans-serif; letter-spacing: 2px; + margin: 0; +} + +.dark-mode { + background: rgba(0, 0, 0, 0.8); + color: white; + --borderImgColor: var(--borderColor); + --colorOfLink: var(--linkColor); + --colorOfUsername: var(--usernameColor); +} + +.toggleBtn { + border-radius: 20px; + padding: 8px; + cursor: pointer; +} + +.toggleBtn:hover { + border: 2px solid #fff; + background: #5f939a; +} + +header { + background: #5f939a; + padding: 10px; + width: 100%; + margin-bottom: 30px; + text-transform: uppercase; +} + +.username { + color: var(--colorOfUsername); + font-size: 24px; +} + +.repo-title { + text-transform: uppercase; +} + +.push-date { + width: 100%; +} + +.push-title { + font-weight: bold; + display: block; } .cards { border: 2px solid #5f939a; - background-color: rgba(169, 169, 169, 0.397); + background-color: rgba(169, 169, 169, 0.534); display: grid; - align-items: center; width: 90%; text-align: center; margin: 10px auto; border-radius: 20px; - padding: 5px 5px; + padding: 0 5px; +} + +.branch { + border: 2px solid black; + border-radius: 30px; + width: 30%; + margin: auto; + background: #5f939a; + color: white; } .grid-container { @@ -29,6 +89,7 @@ fieldset { border: 4px solid; border-color: #5f939a; border-radius: 20px; + margin: 0 10px; } legend { @@ -36,20 +97,39 @@ legend { } img { + border: var(--borderImgColor); + width: 70%; border-radius: 50%; - border: 4px solid black; } .chart { - margin: auto; + margin: 10px auto; height: 200px; width: 200px; } +.links { + color: var(--colorOfLink); + width: 80%; + margin: auto; + text-decoration: none; + font-size: 12px; +} + +.links:hover { + transition: all 1s; + background: #5f939a; +} + +footer { + background: #5f939a; + padding: 10px; + margin-top: 20px; +} + /* MEDIA QUERIES */ @media (min-width: 768px) { .grid-container { - border: 2px solid red; display: grid; grid-template-columns: 1fr 2fr; } @@ -62,6 +142,12 @@ img { .cards { border: 2px solid #d8ac9c; display: grid; - width: 100%; + width: 90%; + margin: 10px auto; + } + + .chart { + width: 300px; + height: 300px; } } From a0250186a62264184714bd2ea7dee68929c245e0 Mon Sep 17 00:00:00 2001 From: Your name here Date: Thu, 30 Sep 2021 17:25:01 +0200 Subject: [PATCH 06/11] added media queries --- code/index.html | 2 +- code/script.js | 8 ++++---- code/style.css | 42 +++++++++++++++++++++++++++++++++++++++++- 3 files changed, 46 insertions(+), 6 deletions(-) diff --git a/code/index.html b/code/index.html index 54069282..f6563c46 100644 --- a/code/index.html +++ b/code/index.html @@ -40,7 +40,7 @@

GitHub Tracker

-

TEXT

+

Made by Sofia Wallerberg. Team foxes.

diff --git a/code/script.js b/code/script.js index e3e2f1af..73fbe135 100644 --- a/code/script.js +++ b/code/script.js @@ -16,10 +16,10 @@ const profile = () => { .then(json => { profileInfo.innerHTML += ` +

- - ${json.login}

-

This account has a total of ${json.public_repos} repos

+ ${json.login} +

This account has a total of ${json.public_repos} repos

`; }); }; @@ -82,7 +82,7 @@ const fetchPullRequestsArray = allRepositories => { fetchCommits(myPullRequest.commits_url, repo.name); } else { document.getElementById(`commit-${repo.name}`).innerHTML = - "No pull requests done 😞"; + "No pull requests done"; } }); }); diff --git a/code/style.css b/code/style.css index 292c8e40..da82c7ff 100644 --- a/code/style.css +++ b/code/style.css @@ -25,14 +25,17 @@ body { } .toggleBtn { + font-family: "Stick No Bills", sans-serif; border-radius: 20px; padding: 8px; cursor: pointer; + font-size: 20px; } .toggleBtn:hover { border: 2px solid #fff; background: #5f939a; + color: #fff; } header { @@ -48,6 +51,18 @@ header { font-size: 24px; } +.username-link { + text-decoration: none; + color: var(--colorOfLink); +} + +.username-link:hover { + transition: all 1s; + background: #5f939a; + border-radius: 30px; + padding: 5px; +} + .repo-title { text-transform: uppercase; } @@ -118,6 +133,7 @@ img { .links:hover { transition: all 1s; background: #5f939a; + border-radius: 30px; } footer { @@ -128,7 +144,19 @@ footer { /* MEDIA QUERIES */ +/* TABLET */ @media (min-width: 768px) { + .cards { + font-size: 28px; + } + + .links { + font-size: 24px; + } +} + +/* DESKTOP */ +@media (min-width: 1023px) { .grid-container { display: grid; grid-template-columns: 1fr 2fr; @@ -140,14 +168,26 @@ footer { } .cards { - border: 2px solid #d8ac9c; display: grid; width: 90%; margin: 10px auto; + font-size: 18px; + } + + .cards:hover { + transform: scale(1.05); } .chart { width: 300px; height: 300px; } + + .links { + font-size: 12px; + } + + .repo-amount { + margin: 30px 0; + } } From 16fd824d67b8b171ed15d0e1ee157ddeaa20a9d7 Mon Sep 17 00:00:00 2001 From: Your name here Date: Fri, 1 Oct 2021 09:29:35 +0200 Subject: [PATCH 07/11] added animations --- code/script.js | 2 +- code/style.css | 27 ++++++++++++++++++++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/code/script.js b/code/script.js index 73fbe135..a95cf01a 100644 --- a/code/script.js +++ b/code/script.js @@ -48,7 +48,7 @@ const getRepos = () => { } LINK TO REPOSITORY PAGE ON GITHUB + }>LINK TO THE REPOSITORY ON GITHUB

Most recent push ${new Date(repo.pushed_at).toDateString()} at ${repo.pushed_at.slice( diff --git a/code/style.css b/code/style.css index da82c7ff..0fa53d10 100644 --- a/code/style.css +++ b/code/style.css @@ -14,6 +14,7 @@ body { font-family: "Stick No Bills", sans-serif; letter-spacing: 2px; margin: 0; + transition: 0.6s ease, color 1s ease; } .dark-mode { @@ -78,7 +79,7 @@ header { .cards { border: 2px solid #5f939a; - background-color: rgba(169, 169, 169, 0.534); + background-color: #dbd7d298; display: grid; width: 90%; text-align: center; @@ -145,7 +146,7 @@ footer { /* MEDIA QUERIES */ /* TABLET */ -@media (min-width: 768px) { +@media (min-width: 767px) { .cards { font-size: 28px; } @@ -157,16 +158,19 @@ footer { /* DESKTOP */ @media (min-width: 1023px) { + /* container for the whole page (profile section and cards) */ .grid-container { display: grid; grid-template-columns: 1fr 2fr; } + /* class from HTML / container for all of the cards only */ .project-cards { display: grid; grid-template-columns: 1fr 1fr; } + /* class from JS / container for each card */ .cards { display: grid; width: 90%; @@ -176,9 +180,11 @@ footer { .cards:hover { transform: scale(1.05); + box-shadow: 4px 8px 16px -3px rgba(0, 0, 0, 0.459); } .chart { + margin-top: 40px; width: 300px; height: 300px; } @@ -186,8 +192,23 @@ footer { .links { font-size: 12px; } - + /* class from js */ .repo-amount { margin: 30px 0; } + + img { + animation: myAnim 2s ease 0s 1 normal forwards; + } + + @keyframes myAnim { + 0% { + transform: rotate(0) scale(0.3); + opacity: 0.5; + } + + 100% { + transform: rotate(360deg); + } + } } From 423cf3113d143fcdd7d3821017350cc20857152d Mon Sep 17 00:00:00 2001 From: Your name here Date: Fri, 1 Oct 2021 18:59:24 +0200 Subject: [PATCH 08/11] added border on chart --- README.md | 8 +++----- code/chart.js | 1 + code/script.js | 12 ++++-------- code/style.css | 1 + 4 files changed, 9 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..61db2b2d 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 assignment was to create a tracker website for my github and fetch the projects and relevant information. ## 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 had a problem with knowing how to start writing the JavaScript. I took a look at last week's project (project-weather-app) and used that as a guide for the API 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. +Link to deployed website: https://githubtrackerefstasia.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 9599459a..43695b97 100644 --- a/code/chart.js +++ b/code/chart.js @@ -16,6 +16,7 @@ const drawChart = amount => { backgroundColor: ["#5F939A", "#D8AC9C"], hoverOffset: 4, hoverOpacity: 1, + borderColor: "#161616", responsive: true, maintainAspectRatio: false, }, diff --git a/code/script.js b/code/script.js index a95cf01a..0e32a690 100644 --- a/code/script.js +++ b/code/script.js @@ -5,9 +5,7 @@ const projectsContainer = document.getElementById("projects"); const pullContainer = document.getElementById("pull-requests"); const profileInfo = document.getElementById("profile"); -console.log(COMMIT_URL); - -// function to get profile picture and name +// function to get profile info const profile = () => { fetch(`https://api.github.com/users/${USER}`) .then(response => { @@ -19,14 +17,13 @@ const profile = () => {

${json.login}

+

Current location: ${json.location}

This account has a total of ${json.public_repos} repos

`; }); }; profile(); // invoking the profile function -// - // function to get all of the repos and commits const getRepos = () => { fetch(GITHUB_URL) @@ -34,7 +31,6 @@ const getRepos = () => { return response.json(); }) .then(json => { - console.log(json); // this filters out ONLY the forked projects from technigo const forkedRepos = json.filter( repo => repo.fork && repo.name.startsWith("project-") @@ -65,7 +61,7 @@ const getRepos = () => { }); }; -// this fetches all of the pull requests and commit made to those +// this fetches all of the pull requests const fetchPullRequestsArray = allRepositories => { allRepositories.forEach(repo => { const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; @@ -87,12 +83,12 @@ const fetchPullRequestsArray = allRepositories => { }); }); }; +// this is a function to fetch number of commits made const fetchCommits = (myCommitsUrl, myRepoName) => { fetch(myCommitsUrl) .then(res => res.json()) .then(json => { document.getElementById(`commit-${myRepoName}`).innerHTML += json.length; - console.log("FETCH", fetchCommits); }); }; getRepos(); // invoking the function diff --git a/code/style.css b/code/style.css index 0fa53d10..0fb62711 100644 --- a/code/style.css +++ b/code/style.css @@ -168,6 +168,7 @@ footer { .project-cards { display: grid; grid-template-columns: 1fr 1fr; + padding-top: 45px; } /* class from JS / container for each card */ From 95c055e8e7d70e7b40e2e0195175da48a8f5e745 Mon Sep 17 00:00:00 2001 From: Your name here Date: Sat, 2 Oct 2021 00:17:14 +0200 Subject: [PATCH 09/11] cleaned the code --- code/script.js | 10 ++++------ code/style.css | 22 +++++++++++++++++++--- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/code/script.js b/code/script.js index 0e32a690..0293ff64 100644 --- a/code/script.js +++ b/code/script.js @@ -1,6 +1,5 @@ const USER = "efstasia"; const GITHUB_URL = `https://api.github.com/users/${USER}/repos`; -const COMMIT_URL = `https://api.github.com/repos/efstasia/project-news-site/commits`; const projectsContainer = document.getElementById("projects"); const pullContainer = document.getElementById("pull-requests"); const profileInfo = document.getElementById("profile"); @@ -17,7 +16,7 @@ const profile = () => {

${json.login}

-

Current location: ${json.location}

+

Current location: ${json.location}

This account has a total of ${json.public_repos} repos

`; }); @@ -36,7 +35,7 @@ const getRepos = () => { repo => repo.fork && repo.name.startsWith("project-") ); - // this creates a forEach function to get all of the projects + // this creates a forEach function to get all of the projects + inner HTML for the project section forkedRepos.forEach( repo => (projectsContainer.innerHTML += `

${ @@ -55,7 +54,6 @@ const getRepos = () => {

${repo.default_branch}

Number of commits:

`) ); - fetchPullRequestsArray(forkedRepos); drawChart(forkedRepos.length); }); @@ -78,7 +76,7 @@ const fetchPullRequestsArray = allRepositories => { fetchCommits(myPullRequest.commits_url, repo.name); } else { document.getElementById(`commit-${repo.name}`).innerHTML = - "No pull requests done"; + "No pull requests done / team project"; } }); }); @@ -93,7 +91,7 @@ const fetchCommits = (myCommitsUrl, myRepoName) => { }; getRepos(); // invoking the function -// function to toggle the dark mode +// function to toggle the dark mode, connected to the button in HTML const myFunction = () => { const element = document.body; element.classList.toggle("dark-mode"); diff --git a/code/style.css b/code/style.css index 0fb62711..5620c9ad 100644 --- a/code/style.css +++ b/code/style.css @@ -64,6 +64,10 @@ header { padding: 5px; } +.repo-amount { + font-style: italic; +} + .repo-title { text-transform: uppercase; } @@ -117,6 +121,7 @@ img { width: 70%; border-radius: 50%; } + .chart { margin: 10px auto; height: 200px; @@ -146,18 +151,29 @@ footer { /* MEDIA QUERIES */ /* TABLET */ -@media (min-width: 767px) { +@media (min-width: 767px) and (max-width: 1023px) { .cards { font-size: 28px; + margin: 20px auto; } - .links { font-size: 24px; } + .repo-amount { + font-size: 24px; + } + .location { + font-size: 22px; + } + .chart { + margin: 10px auto; + height: 275px; + width: 275px; + } } /* DESKTOP */ -@media (min-width: 1023px) { +@media (min-width: 1024px) { /* container for the whole page (profile section and cards) */ .grid-container { display: grid; From 7657e4c50a9fda20ed31525bc3e41c511e938d83 Mon Sep 17 00:00:00 2001 From: Your name here Date: Sat, 2 Oct 2021 00:41:54 +0200 Subject: [PATCH 10/11] added uppercase for legend --- code/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/code/style.css b/code/style.css index 5620c9ad..1f3612af 100644 --- a/code/style.css +++ b/code/style.css @@ -113,6 +113,7 @@ fieldset { } legend { + text-transform: uppercase; font-size: 28px; } From 696bdc26b8af86416687ff72df90b15fc369181b Mon Sep 17 00:00:00 2001 From: Your name here Date: Sun, 3 Oct 2021 23:33:23 +0200 Subject: [PATCH 11/11] changed color in chart --- code/chart.js | 2 ++ code/index.html | 2 -- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/chart.js b/code/chart.js index 43695b97..9b296c43 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,6 +2,8 @@ const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 +Chart.defaults.font.size = 16; +Chart.defaults.color = "#5f939a"; const drawChart = amount => { const config = { diff --git a/code/index.html b/code/index.html index f6563c46..5d507e8f 100644 --- a/code/index.html +++ b/code/index.html @@ -43,8 +43,6 @@

GitHub Tracker

Made by Sofia Wallerberg. Team foxes.

- -