diff --git a/README.md b/README.md index 1613a3b0..db382ca9 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 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 creata a GitHub tracker that used APIs to keep track of all my projects forked by Technigo in Github. We also had to creat a chart to show our 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? +This week it was most difficult to understand how to use the APIs from Github and collect the right information. Past week the APIs were more straight forward compared to this week. + +I learnt a lot about how to style from the script file, something I was a bit worried about since we had to style things that didn't excist in the HTML from the beginning. But I noticed that it wasn't that complicated. ## 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://lisapblome-w7-githubtracker.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..356f6a94 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,27 @@ -//DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') -//"Draw" the chart here 👇 +const drawChart = (amount) => { +const config = { + type: 'doughnut', + data: { + labels: [ + 'Projects done', + 'Projects left', + 'Projects in total' + + ], + datasets: [{ + label: 'My Projects', + data: [amount, 19-amount, 19], + backgroundColor: [ + '#e3f7ba', + 'rgb(252, 241, 175)', + '#FFECE9' + ], + hoverOffset: 4 + }] + }, + }; + +const repoChart = new Chart(ctx, config); +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..cff0dda8 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,40 @@ - Project GitHub Tracker + LPB GitHub Tracker + + + - -

GitHub Tracker

-

Projects:

-
- - + +
+

GitHub Tracker

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

Projects:

+
+
+ + + + \ No newline at end of file diff --git a/code/kisspng-github-pages-logo-repository-fork-github-logo-1-magentys-5b69de71b51265.8586076615336648817417.png b/code/kisspng-github-pages-logo-repository-fork-github-logo-1-magentys-5b69de71b51265.8586076615336648817417.png new file mode 100644 index 00000000..6c3b3cd1 Binary files /dev/null and b/code/kisspng-github-pages-logo-repository-fork-github-logo-1-magentys-5b69de71b51265.8586076615336648817417.png differ diff --git a/code/script.js b/code/script.js index e69de29b..94778134 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,93 @@ +const USER = "annaester"; +const MY_PROFILE_URL = `https://api.github.com/users/${USER}`; +const MY_REPOS_URL = `https://api.github.com/users/${USER}/repos`; + +const projectContainer = document.getElementById("projects"); +const infoBox = document.getElementById("user-box"); + +const getUserInfo = () => { + fetch(MY_PROFILE_URL) + .then((resp) => resp.json()) + .then((data) => { + console.log("testar min nya url", data); + infoBox.innerHTML = ` +

${data.login}

+ profile picture + `; + }); +}; + +getUserInfo(); + +const getRepos = () => { + fetch(MY_REPOS_URL) + .then((resp) => resp.json()) + .then((data) => { + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.includes("project-") + ); + forkedRepos.sort((oldestRepo, newestRepo) => { + return ( + new Date(newestRepo.created_at) - new Date(oldestRepo.created_at) + ); + }); + forkedRepos.forEach( + (repo) => + (projectContainer.innerHTML += ` +
+

${repo.name}

+ ${ + repo.name + }
With default branch ${repo.default_branch} +

Created: ${new Date( + repo.created_at + ).toDateString()} +

Latest push: ${new Date( + repo.pushed_at + ).toDateString()}

+

Number of commits:

+
+ `) + ); + + getPullRequests(forkedRepos); + drawChart(forkedRepos.length); + }); +}; + +const getPullRequests = (allRepos) => { + allRepos.forEach((repo) => { + fetch( + `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` + ) + .then((resp) => resp.json()) + .then((data) => { + const myPullRequests = data.find( + (pull) => pull.user.login === repo.owner.login + ); + + if (myPullRequests) { + fetchCommits(myPullRequests.commits_url, repo.name); + } else { + document.getElementById( + `commits-${repo.name}` + ).innerHTML = `No pull requests done by ${USER}`; + } + }) + .catch((err) => console.log("getPullRequests error:", err)); + }); +}; + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((resp) => resp.json()) + .then((data) => { + document.getElementById(`commits-${myRepoName}`).innerHTML += data.length; + + console.log("my commits", data.length); + }); +}; + +getRepos(); diff --git a/code/style.css b/code/style.css index 7c8ad447..6ad36762 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,164 @@ body { - background: #FFECE9; + background: #f7faf1; + font-family: 'Baloo Chettan 2', cursive; +} + +.topbar { + background-color: white; + width: 100vw; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} + +.title { + color: #FFECE9; + font-weight: bold; + font-size: 70px; + text-align: center; +} + +.github-logo { + width: 50px; + height: 50px; + border-radius: 50%; + border: 2px solid #FFECE9; + background-color:#FFECE9; + align-self: center; + margin: 20px; +} + +.info-chart-box { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + padding-bottom: 50px; +} + +.user-name { + text-align: center; +} + +.profile-pic { + width: 400px; + border-radius: 50%; + opacity: 0.5; +} + +.profile-pic:hover { + opacity: 1; + transition: 1s; +} + +.chart-box { + width: 400px; + padding: 20px; +} + +.project-container { + background-color: white; + padding: 20px 20px 60px 20px; +} + +.project-title { + text-align: center; + font-size: 30px; + padding-top: 15px; + padding-bottom: 20px; +} + +.github-project { + display: grid; + grid-template-columns: 1fr; + justify-items: center; + gap: 20px; +} + +.project-card { + font-family: 'Quicksand', sans-serif; + background-color: #f7faf1; + width: 330px; + padding: 15px; + border-radius: 2%; + border: 2px solid rgb(220, 220, 220); +} + +.project-card:hover { + background-color: #FFECE9; +} + +.project-name { + font-size: 30px; + color: white; + text-shadow: 1px 1px 1px #000000; + margin-top: 10px; + text-transform: capitalize;; +} + +.project-info { + margin: 2px; + font-size: 15px; +} + +.project-links { + color: black; + font-size: 20px; +} + +.footer { + height: 100px; + background-color: #f7faf1; + align-items: right; + display: flex; + flex-direction: row; + justify-content: center; +} + +.linkedin-link { + color: rgb(201, 200, 200); + text-decoration: none; + text-align: right; + margin: 35px 20px; + font-style: italic; +} + +.linkedin-link:hover { + color: rgb(123, 122, 122); + font-size: 20px; + transition: 1s; +} + + /* Tablet */ +@media (min-width:768px) { + + .info-chart-box { + display: flex; + flex-direction: row; + margin-left: auto; + margin-right: auto; + } + + .github-project { + display: grid; + grid-template-columns: 1fr 1fr; + width: 800px; + margin-left: auto; + margin-right: auto; +} + +/* Desktop */ +@media (min-width: 1192px) { + + .info-chart-box { + width: 1250px; + } + + .github-project { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + width: 1190px; + } + } \ No newline at end of file