diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..72a188b1 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..56e25191 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,21 @@ # 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. +This week, we have created a place to keep track of the GitHub repos that we are crating at Technigo. We have continued practicing on JavaScript and API. ## 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? +Process +designed page using figma +Fetched data from API and displayed it to fulfill the requirements. +Created a chart for the progress. +Styled the page. + +I started by adding my token to the project. I then collected all the info about my repos with the fetch() method. +I then builded functions to us the information I needed and displayed it on my page. I also created a chart showing +how many projects I have done and have left to do during my technigo education. + +If I had more time I would add more information about every repo: languages used for the project, review comments and link to netlify. ## 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://github-tracker-bymimmi.netlify.app/ diff --git a/code/.gitignore b/code/.gitignore new file mode 100644 index 00000000..9a0d7760 --- /dev/null +++ b/code/.gitignore @@ -0,0 +1,29 @@ +# Personal token +secret.js +# why can't I put code/ boefore secret.js lite the tutorial ? + + +# # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. +# ​ +# ​ +# # Ignore Mac system files +# .DS_store +# ​ +# # Ignore node_modules folder +# node_modules +# ​ +# # Ignore all text files +# *.txt +# ​ +# # Ignore files related to API keys +# .env +# ​ +# # misc +# /.pnp +# .pnp.js +# npm-debug.log* +# yarn-debug.log* +# yarn-error.log* +# ​ +# # other +# token.js \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..1cef237c 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,29 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const showChart = (countRepos) => { + const ctx = document.getElementById("chart").getContext("2d"); -//"Draw" the chart here 👇 + const labels = [`Finished projects`, `Projects left`]; + + const data = { + labels: labels, + datasets: [ + { + label: "My Technigo projects", + backgroundColor: ["#9E9FCF", "#484B76"], + borderColor: "rgb(66, 66, 66)", + data: [countRepos, 19 - countRepos], + }, + ], + }; + + Chart.defaults.font.family = "Source Serif Pro"; + Chart.defaults.font.size = "20"; + Chart.defaults.color = "#000000"; + + const config = { + type: "pie", + data: data, + options: {}, + }; + + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..8f011e04 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,39 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

GitHub Tracker

+

Technigo Student Spring 2022

+
- - +
+
+
+
- - - - \ No newline at end of file + + +

+ +
+ + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..cedb37e2 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,111 @@ +const username = "Mimmisen"; +const API_URL = `https://api.github.com/users/${username}`; +const REPOS_URL = `https://api.github.com/users/${username}/repos`; + +// function for token +const options = { + method: "GET", + headers: { + Authorization: `token ${API_TOKEN}`, + }, +}; +//----------------------------------FETCH 1------------------------------------- +// getting profile pic,user name and link to my github +fetch(API_URL, options) + .then((res) => res.json()) + .then((data) => { + headerBox.innerHTML += ` +
+ + Avatar of ${data.login} + +
+

${data.login}

+
Mimmi Fordal Uddin
+ + `; + }); + +//----------------------------------FETCH 2------------------------------------- +fetch(REPOS_URL, options) + .then((res) => res.json()) + .then((data) => { + //To get my projects and filter them so only the ones starting with projects are displayed + const technigoProjects = data.filter( + (repo) => repo.name.startsWith("project-") && repo.fork + ); + showChart(technigoProjects.length); + + technigoProjects.forEach((repo) => { + const reponame = repo.name; + + fetchTechnigo(reponame); + + const projectUrl = repo.html_url; + + const defaultBranch = repo.default_branch; + + const latestPushRepo = new Date(repo.updated_at).toLocaleDateString( + "sv-SE", + { + year: "numeric", + month: "long", + day: "numeric", + } + ); + + //displaying project url, name and latest push + document.getElementById("section-projects").innerHTML += ` +
+
+

${reponame}

+

Latest update: ${latestPushRepo}

+

+

default branch: ${defaultBranch}

+
+
+ `; + }); + }); + +// function for the commits url and name +const displayCommits = (commitsUrl, reponame) => { + fetch(commitsUrl, options) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commits-${reponame}`).innerHTML = ` +

Amount of commits: ${data.length} +

+ `; + }); +}; + +//function to get the latest push to repo +const fetchTechnigo = (reponame) => { + fetch( + `https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`, + options + ) + .then((res) => res.json()) + .then((data) => { + data.forEach((repo) => { + const commitsUrl = repo.commits_url; + if (repo.user.login === username) { + displayCommits(commitsUrl, reponame); + } else if ( + repo.user.login === "sukiphan97" && + reponame === "project-chatbot" + ) { + displayCommits(repo.commits_url, reponame); + } else if ( + repo.user.login === "kolkri" && + reponame === "project-weather-app" + ) { + displayCommits(repo.commits_url, reponame); + } else { + document.getElementById(`commits-${reponame}`).innerHTML = + "No commits for this repo"; + } + }); + }); +}; diff --git a/code/style.css b/code/style.css index 7c8ad447..5d046fe3 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,85 @@ +* { + box-sizing: border-box; + margin: 0; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: #ffece9; + font-family: "Source Serif Pro", serif; + background-image: linear-gradient(#ccccff, #ffff); +} + +header { + display: grid; + justify-items: center; +} + +/* header text */ +h1 { + margin: 0.5rem; + color: #ffffff; + font-size: 3rem; +} + +/* description text */ +h3 { + margin: 0.5rem; + color: #ffffff; +} + +.username { + font-size: 25px; +} + +.my-name { + font-size: 35px; +} + +img { + width: 300px; + border-radius: 50%; + margin-block: 2em; +} + +/* link to my github and repos */ +a, +a:active { + text-decoration: none; +} + +a.nav-link, +a.nav-link:active { + position: relative; + color: black; +} + +.section-projects__container { + padding: 2em 0; + min-height: 100%; + display: grid; + gap: 1em; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + justify-content: center; + justify-items: center; +} + +.section-projects__card { + background: #f9f8ff; + border-radius: 0.5em; + width: 300px; + padding: 1em; + margin: 1em; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +canvas { + margin: 2rem; +} + +@media screen and (min-width: 768px) { + .chart { + max-height: 60vh; + } +}