diff --git a/README.md b/README.md index 1613a3b0..4f7b7c18 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. +Github tracker uses various parts of the Github REST api to reproduce some data from different github projects. ## 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 I began by reading and reviewing the learning materials before starting the project. I found it quite hard to plan this week as I didn't know exacly what information would be found in each endpoint and so what I would want to display. So I found that both the HTML and CSS were hard to write or plan beforehand. If I were to do this project again I would look through the api first so that I could plan how my HTML and CSS would look, then go back to the javascript after this. ## 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://sarah-mottram-github-tracker.netlify.app/ diff --git a/code/Images/GitHub-headpic.jpeg b/code/Images/GitHub-headpic.jpeg new file mode 100644 index 00000000..3467dd9a Binary files /dev/null and b/code/Images/GitHub-headpic.jpeg differ diff --git a/code/Images/icons8-code-24.png b/code/Images/icons8-code-24.png new file mode 100644 index 00000000..551dc25c Binary files /dev/null and b/code/Images/icons8-code-24.png differ diff --git a/code/Images/icons8-css-filetype-32.png b/code/Images/icons8-css-filetype-32.png new file mode 100644 index 00000000..464ffedc Binary files /dev/null and b/code/Images/icons8-css-filetype-32.png differ diff --git a/code/Images/icons8-github-24.png b/code/Images/icons8-github-24.png new file mode 100644 index 00000000..f0c7c4f3 Binary files /dev/null and b/code/Images/icons8-github-24.png differ diff --git a/code/Images/icons8-html-50.png b/code/Images/icons8-html-50.png new file mode 100644 index 00000000..f54570ac Binary files /dev/null and b/code/Images/icons8-html-50.png differ diff --git a/code/Images/icons8-javascript-48.png b/code/Images/icons8-javascript-48.png new file mode 100644 index 00000000..5d036ae6 Binary files /dev/null and b/code/Images/icons8-javascript-48.png differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..b70f4c8e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,34 @@ //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 = (repos) => { + const labels = ["Projects completed", "Projects to go"]; + const data = [repos.length, 19-repos.length]; + + new Chart(ctx, { + type: "doughnut", + data: { + labels, + datasets: [ + { + data, + backgroundColor: ['#0b293f', '#459ec6'], + }, + ], + }, + options: { + responsive: true, + plugins: { + legend: { + position: "top", + }, + title: { + display: true, + text: "Technigo Bootcamp Projects", + }, + }, + } + }); +}; + diff --git a/code/index.html b/code/index.html index 2fb5e0ae..3886692a 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,51 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

GitHub Tracker

+
+
+
+
+
+
+

Projects

+
+

Filter Repos by main language:

+ + + +
- - +
+ + +
+ +
+ + + + + + + - - - - \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..53e6a08b 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,79 @@ +// DOM selectors + +// HTML sections to inject into +const main = document.getElementById("projects"); +const userInfo = document.getElementById("user-info"); + +const username = "Smelbows"; +const USERS_REPOS_API = `https://api.github.com/users/${username}/repos`; + +const fetchUserRepos = (userUrl) => { + fetch(userUrl) + .then((res) => res.json()) + .then(filterForTechnigoRepos) + .then((repos) => { + userInfo.innerHTML = createHTMLForUser(repos[0]); + repos.forEach((repo) => { + main.innerHTML += createHTMLForRepo(repo); + fetchPullRequests(repo); + }); + drawChart(repos); + }); +}; + +const filterForTechnigoRepos = (data) => { + return data.filter((repo) => repo.name.startsWith("project")); +}; + +const createHTMLForUser = (repo) => { + return `github avatar

${repo.owner.login}

`; +}; + +const createHTMLForRepo = (repo) => { + return `

${ + repo.name + }

Default branch: ${repo.default_branch}

Last pushed: ${new Date( + repo.pushed_at + ).toDateString()}

`; +}; + +const fetchPullRequests = (repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then((res) => res.json()) + .then((data) => { + myPullRequest = findMyPullRequest(data, repo.name); + // Only continues to fetch commit data if there is a pull request there + if (myPullRequest === undefined) { + document.getElementById(`commit-${repo.name}`).innerHTML += + "

No pull request made yet

"; + } else { + fetchCommits(myPullRequest.commits_url, repo.name); + } + }); +}; + +const findMyPullRequest = (pullsData, repoName) => { + // this project was pulled from Anna's fork + if (repoName === "project-weather-app") { + return pullsData.find((pull) => pull.user.login === "anndimi"); + } else { + return pullsData.find((pull) => pull.user.login === username); + } +}; + +const fetchCommits = (url, name) => { + fetch(url) + .then((res) => res.json()) + .then((data) => { + document.getElementById( + `commit-${name}` + ).innerHTML += `

Number of commits: ${ + data.length + }

Last commit message: ${data[data.length - 1].commit.message}

`; + }); +}; + +fetchUserRepos(USERS_REPOS_API); + diff --git a/code/style.css b/code/style.css index 7c8ad447..1d879dcb 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,197 @@ +:root { + --primary: #d9eaf1; + --secondary: #0b293f; + --third: #459ec6; +} + body { - background: #FFECE9; -} \ No newline at end of file + font-family: "Montserrat", sans-serif; + background-color: var(--primary); + height: 100%; + width: 100%; + margin: 0; +} + +.hero-image { + background: linear-gradient(rgba(0, 0, 0, 0.342), rgba(0, 0, 0, 0.774)), + url("./Images/GitHub-headpic.jpeg"); + height: 50vh; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + border: transparent; + z-index: -1; +} +.hero-text { + text-align: center; + position: absolute; + top: 20%; + left: 50%; + transform: translate(-50%, -50%); + color: var(--primary); + font-size: 16px; +} + +.avatar { + width: 40%; + max-width: 350px; + border-radius: 50%; + margin-top: -20vh; + border: var(--secondary) solid 1px; +} + +h2 { + text-align: center; + color: var(--secondary); + font-size: 35px; +} + +p { + line-height: 1.3; + color: var(--primary); +} + +hr { + background-color: #459ec6; + width: 70%; + height: 6px; + border: transparent; + border-radius: 5px; +} + +.dark { + color: var(--secondary); +} + +.name { + font-size: 20px; + color: var(--secondary); +} + +.user-info { + text-align: center; +} + +.user-info p { + font-size: 20px; +} + +main { + margin: 5em 2em; + display: grid; + grid-template-columns: 1fr; + gap: 2em; +} + +.repo-container { + background-color: var(--secondary); + color: var(--primary); + border: solid black 1px; + border-radius: 5px; + padding: 1em; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +.repo-name { + font-size: 26px; + color: var(--third) !important; + text-align: center; +} + +.HTML { + background-image: url(./Images/icons8-html-50.png); + background-repeat: no-repeat; + background-size: 5vh; + border: transparent; + box-shadow: unset; + background-color: white; +} + +.HTML > p { + color: var(--secondary); +} + +.HTML > div > p{ + color: var(--secondary); +} + +.CSS { + background-image: url(./Images/icons8-css-filetype-32.png); + background-repeat: no-repeat; + background-size: 5vh; + border: transparent; + box-shadow: unset; +} + +.JavaScript { + background-image: url(./Images/icons8-javascript-48.png); + background-repeat: no-repeat; + background-size: 5vh; + border: transparent; + box-shadow: unset; +} + +.chart-container { + display: flex; + align-content: center; + margin: auto; + max-width: 400px; +} +.chart { + transition: 0.5s; +} + +.chart:hover { + transform: scale(1.05); +} + +a:link { + font-size: 18px; + text-decoration: none; + color: var(--primary); + transition: 0.5s; +} + +a:visited { + text-decoration: none; + color: var(--primary); +} + +a:hover { + text-decoration: none; + transform: scale(1.05); + color: var(--third); + cursor: url(./Images/icons8-github-24.png), auto; +} + +footer { + display: flex; + background-color: var(--secondary); + margin-top: 1rem; +} + +.icon-link > * { + font-size: 8px; +} + +footer > * { + font-size: 8px; + color: var(--primary); +} + +@media (min-width: 662px) { + main { + grid-template-columns: repeat(2, 1fr); + } + + .hero-text { + font-size: 20px; + } +} + +@media (min-width: 1024px) { + main { + grid-template-columns: repeat(3, 1fr); + } +}