diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..0bccdf1d --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +# api keys +/src/javascript/config.js + +# misc +.DS_Store \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index e8783bfe..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5505 -} \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..79f565ff 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,22 @@ # GitHub Tracker -Replace this readme with your own information about your project. +This project was built to track all of the repositories that I have created during my time at Technigo. The main +purpose of this project is to display information about the projects that I have built using Githubs API. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +## The project -## The problem +I started off this project by fetching all of my repositories and data from GitHubs API. Once I had all the data +that I needed I dispayed it on multiple pages. One page focusing on displaying the repository data and the other to +display the commits data. This project also include a visualization of how many projects I have done so far, compared +to how many I will in total using Chart.js. Lastly, I styled the pages similar to the GitHubs page layout, with the +mind set of mobile first. -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? +If I had more time I would add a page for my pull requests data and I would like to add a search input so that users +can search for a specific repositiory. Also to include a dropdown button that allows users to filter through repos +based off of the language they are written in. + +## Demo + +https://savannah-github-tracker.netlify.app/ -## 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. diff --git a/code/chart.js b/code/chart.js deleted file mode 100644 index 92e85a30..00000000 --- a/code/chart.js +++ /dev/null @@ -1,4 +0,0 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') - -//"Draw" the chart here 👇 diff --git a/code/index.html b/code/index.html deleted file mode 100644 index 2fb5e0ae..00000000 --- a/code/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
- - - - - - - - \ No newline at end of file diff --git a/code/script.js b/code/script.js deleted file mode 100644 index e69de29b..00000000 diff --git a/code/style.css b/code/style.css deleted file mode 100644 index 7c8ad447..00000000 --- a/code/style.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - background: #FFECE9; -} \ No newline at end of file diff --git a/commits.html b/commits.html new file mode 100644 index 00000000..bf6dcb4e --- /dev/null +++ b/commits.html @@ -0,0 +1,54 @@ + + + + + + + + GitHub Tracker + + + + + + + + +
+
+ +
+
+ +

Your browser does not support the canvas element.

+ +
+
+ +
+
+ + book icon Repositories + + + box icon Contributions + +
+
+
+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/images/book.png b/images/book.png new file mode 100644 index 00000000..f7ba3c7d Binary files /dev/null and b/images/book.png differ diff --git a/images/box.png b/images/box.png new file mode 100644 index 00000000..d1a7efe2 Binary files /dev/null and b/images/box.png differ diff --git a/images/fork.png b/images/fork.png new file mode 100644 index 00000000..22379f99 Binary files /dev/null and b/images/fork.png differ diff --git a/images/github.png b/images/github.png new file mode 100644 index 00000000..b5cc0070 Binary files /dev/null and b/images/github.png differ diff --git a/images/group.png b/images/group.png new file mode 100644 index 00000000..379991b5 Binary files /dev/null and b/images/group.png differ diff --git a/images/location.png b/images/location.png new file mode 100644 index 00000000..021bb5d8 Binary files /dev/null and b/images/location.png differ diff --git a/images/me.png b/images/me.png new file mode 100644 index 00000000..defd00c1 Binary files /dev/null and b/images/me.png differ diff --git a/images/pr.png b/images/pr.png new file mode 100644 index 00000000..bea0bc85 Binary files /dev/null and b/images/pr.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..0e11d44e --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + + + GitHub Tracker + + + + + + + +
+ +
+
+ + book icon Repositories + + + box icon Contributions + +
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/src/javascript/chart.js b/src/javascript/chart.js new file mode 100644 index 00000000..76e03b78 --- /dev/null +++ b/src/javascript/chart.js @@ -0,0 +1,36 @@ +const displayChart = (projects) => { + const ctx = document.getElementById('chart'); + + const labels = [ + 'Projects completed', + 'Projects left', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My Projects at Technigo', + data: [projects, 19 - projects], + backgroundColor: [ + 'rgb(142, 85, 255)', + 'rgb(142, 85, 255, 0.3)', + ], + hoverOffset: 4 + }] + }; + + const configuration = { + type: 'doughnut', + data: data, + options: {} + }; + + const myChart = new Chart( + ctx, + configuration + ); +} + + + + diff --git a/src/javascript/commits.js b/src/javascript/commits.js new file mode 100644 index 00000000..581bb199 --- /dev/null +++ b/src/javascript/commits.js @@ -0,0 +1,72 @@ +const commitsSection = document.getElementById("commits"); + +const fetchRepositories = (repositories) => { + const myRepos = repositories.filter((repo) => repo.fork && repo.name !== "unit-tests").length; + repositories.filter(repo => { + if (repo.fork && repo.name !== "unit-tests") { + fetchCommits(repo) + } + }); + displayChart(myRepos); +}; + +const fetchCommitMessages = (commits, repository) => { + const repositoryName = repository.name; + const newCommits = commits.filter(commits => commits.commit.author.date.includes("2022")); + + document.addEventListener("click", (event) => { + if (event.target.id === repositoryName) { + const repoClassname = `.${repositoryName}`; + document.querySelectorAll(repoClassname).forEach(name => { + if (name.style.display === "none") { + name.style.display = "block"; + } else { + name.style.display = "none"; + } + }) + }; + }); + + commitsSection.innerHTML += ` +
+

${username}/${repositoryName}

+
+
+
+
+
+ +
+
+ ` + + for (let i = 0; i < newCommits.length; i++) { + const { message, committer, author } = newCommits[i].commit; + const { avatar_url } = newCommits[i].author; + const date = new Date(committer.date); + const formattedDate = date.toDateString().split(' ').slice(1).join(' '); + + commitsSection.innerHTML += ` + + ` + } +}; + +fetch(REPOS_URL, options) + .then(res => res.json()) + .then(data => fetchRepositories(data)) + .catch(error => console.log(error)) + +const fetchCommits = (repo) => { + fetch(`${COMMITS_URL}${repo.name}/commits`, options) + .then(res => res.json()) + .then(data => fetchCommitMessages(data, repo)) + .catch(error => console.log(error)) +}; \ No newline at end of file diff --git a/src/javascript/index.js b/src/javascript/index.js new file mode 100644 index 00000000..c320b0ac --- /dev/null +++ b/src/javascript/index.js @@ -0,0 +1,71 @@ +const profileDetails = document.getElementById("aside"); +const header = document.getElementById("header"); +const footer = document.getElementById("footer"); + +const username = "savannah-hayes"; +const USER_URL = `https://api.github.com/users/${username}`; +const REPOS_URL = `https://api.github.com/users/${username}/repos`; +const COMMITS_URL = `https://api.github.com/repos/${username}/`; + +const options = { + method: "GET", + headers: { + Authorization: `token ${API_TOKEN}` + } +}; + +const displayHeaderAndFooter = () => { + header.innerHTML = ` +
+ + + +
+

GitHub Tracker

+ small image of savannah hayes + ` + + footer.innerHTML = ` +

+ github iconGitHub Tracker +

+ + ` +}; + +const displayProfileData = (profileData) => { + const { avatar_url, name, login, bio, followers, following, location } = profileData; + + profileDetails.innerHTML = ` +
+ image of ${name} +
+

${name}

+

${login}

+
+
+
+

${bio}

+

+ three people icon + ${followers} followers · + ${following} following

+

+ location pin icon + ${location} +

+
+ `; +}; + +displayHeaderAndFooter(); + +fetch(USER_URL, options) + .then(res => res.json()) + .then(data => displayProfileData(data)) + .catch(error => console.log(error)) \ No newline at end of file diff --git a/src/javascript/repos.js b/src/javascript/repos.js new file mode 100644 index 00000000..045720ca --- /dev/null +++ b/src/javascript/repos.js @@ -0,0 +1,56 @@ +const projectsSection = document.getElementById("projects"); + +const displayRepositories = (repositories) => { + + repositories.filter(repo => { + const { fork, name, html_url, visibility, default_branch, pushed_at, language } = repo; + let projectLanguage = language; + let updatedTime; + const DAY_IN_MS = 24 * 60 * 60 * 1000; + const currentDate = new Date(); + const projectDate = new Date(pushed_at); + const seconds = Math.round((currentDate - projectDate) / 1000); + const minutes = Math.round(seconds / 60); + const hours = Math.round(minutes / 60) + const numberOfDays = Math.round(Math.abs((currentDate - projectDate) / DAY_IN_MS)); + + if (seconds < 5) { + updatedTime = 'now'; + } else if (seconds < 60) { + updatedTime = `${seconds} seconds ago`; + } else if (minutes < 60) { + updatedTime = `${minutes} minutes ago`; + } else if (hours < 24) { + updatedTime = `${hours} hours ago`; + } else if (hours < 48) { + updatedTime = `about 1 day ago` + } else { + updatedTime = `${numberOfDays} days ago`; + } + + projectLanguage === "HTML" ? projectLanguage = `🔴 ${projectLanguage}` : projectLanguage = `🟡 ${projectLanguage}`; + + if (fork && name !== "unit-tests") { + projectsSection.innerHTML += ` + ${name} + ${visibility} +

Forked from Technigo/project-${name}

+

${projectLanguage} + + + Branch ${default_branch} + + + Updated ${updatedTime} + +

+
+ `; + } + }) +}; + +fetch(REPOS_URL, options) + .then(res => res.json()) + .then(data => displayRepositories(data)) + .catch(error => console.log(error)) diff --git a/src/stylesheets/commits.css b/src/stylesheets/commits.css new file mode 100644 index 00000000..95f959c2 --- /dev/null +++ b/src/stylesheets/commits.css @@ -0,0 +1,98 @@ +.chart-wrapper { + width: 300px; + margin: 0 auto; +} + +.commits__text { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-top: 20px; +} + +.btn { + border: 1px solid black; + border-radius: 50px; + font-size: 10px; +} + +.progress { + width: 150px; + display: none; +} + +#messageWrapper { + border: 1px solid rgb(223, 223, 223); + border-radius: 5px; + margin: 10px 0; + padding: 5px; +} + +#messageWrapper:hover { + background-color: rgb(233, 233, 233); +} + +.text { + margin-bottom: 0; + font-size: 17px; + font-weight: var(--fw-bold); +} + +.subtext { + margin-bottom: 5px; + color: var(--clr-accent); +} + +.circle { + border-radius: 50%; +} + +.bold-text { + color: black; + font-weight: var(--fw-bold); +} + +.hide-text { + display: none; +} + +@media (min-width: 560px) { + .hide-text { + margin-left: 5px; + display: inline; + } +} + +@media (min-width: 768px) { + .body-wrapper { + display: flex; + } + + .commits { + width: 100%; + margin-left: 20px; + } + + .commits__text { + display: flex; + justify-content: space-between; + } + + .aside-chart { + width: 60%; + border-right: 1px solid var(--clr-accent); + } + + .aside { + padding: 30px; + } +} + +@media (min-width: 1024px) { + .commits { + margin-left: 50px; + } + .progress { + display: flex; + } +} \ No newline at end of file diff --git a/src/stylesheets/repos.css b/src/stylesheets/repos.css new file mode 100644 index 00000000..7f0a6cad --- /dev/null +++ b/src/stylesheets/repos.css @@ -0,0 +1,72 @@ +.body-wrapper { + display: flex; + flex-direction: column; +} + +.dropdown { + margin: 15px 0 20px 0; +} + +.btn-secondary { + background-color: #f4f4f4; + color: var(--clr-dark); +} + +.projects { + width: 100%; +} + +.projects__links { + font-weight: var(--fw-bold); + font-size: 20px; +} + +.projects__links:hover { + text-decoration: underline; +} + +.projects__paragraphs { + font-size: 12px; +} + +.projects__links--right { + font-size: 14px; + border-radius: 50px; + border: 1px solid grey; + padding: 1px 5px; + margin-left: 10px; + text-transform: capitalize; +} + +.projects__paragraphs--right { + margin-left: 15px; +} + +.small-icon { + width: 13px; +} + +@media (min-width: 1024px) { + .body-wrapper { + display: flex; + flex-direction: row; + padding: 50px; + } + + .dropdown { + margin: 5px 0 20px 25px; + } + + .btn { + margin-right: 5px; + } + + form { + display: flex; + } + + .aside { + width: 60%; + padding: 30px; + } +} \ No newline at end of file diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css new file mode 100644 index 00000000..32954921 --- /dev/null +++ b/src/stylesheets/style.css @@ -0,0 +1,180 @@ +:root { + --fw-bold: 600; + --clr-dark: #000; + --clr-light: #fff; + --clr-accent: rgb(87, 87, 87);; +} + +h1 { + font-size: 20px; +} + +.body-wrapper { + padding: 20px; +} + +.header { + background-color: #24292E; + color: var(--clr-light); + display: flex; + height: 60px; + justify-content: space-between; + align-items: center; +} + +.header__image { + background-color: var(--clr-light); + width: 32px; + height: 30px; + border-radius: 50%; + margin-right: 30px; +} + +.hamburger-wrapper { + margin-left: 30px; +} + +.hamburger { + background-color: var(--clr-light); + display: block; + border-radius: 10px; + margin: 5px; + width: 30px; + height: 3px; +} + +.aside__header { + display: flex; +} + +.aside__text { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 15px; +} + +.aside__title { + margin-bottom: 0; +} + +.aside__sub-title { + margin-top: 0; + color: rgb(87, 87, 87); +} + +.aside__image { + border: 1px solid var(--clr-dark); + border-radius: 50%; + width: 150px; +} + +.aside-content__paragraph { + margin: 0; +} + +.aside-content__paragraph--top { + margin: 30px 0 15px 0; +} + +.aside-content__paragraph--grey { + color: var(--clr-accent); +} + +.aside-content__paragraph--bold { + color: var(--clr-dark); + font-weight: var(--fw-bold); +} + +.icons { + width: 16px; +} + +.icons-left { + float: left; + position: relative; + margin: 3px 8px 0 0; +} + +.links { + color: var(--clr-dark); + margin-left: 15px; +} + +.bold-link { + font-weight: var(--fw-bold); + border-bottom: 3px solid orange; + padding: 9px; +} + +.html-links { + text-align: center; + margin-top: 40px; + font-size: 14px; +} + +hr { + margin: 8px 0 22px 0; +} + +a { + text-decoration: none; +} + +.footer { + margin: 30px 0; +} + +.footer-flex { + display: flex; + font-size: 10px; + align-items: center; + list-style: none; +} + +.footer__link { + margin-right: 10px; + color: #0E58CA; +} + +.footer__link--hide { + display: none; +} + +.footer__icon { + margin: 0 5px 0 10px; + width: 20px; +} + +@media (min-width: 560px) { + .links { + font-size: 15px; + } + + .footer__text { + margin-right: 30px; + } + + .footer-flex { + font-size: 14px; + } + + .footer__link { + margin-right: 50px; + } + + .footer__link--hide { + display: block; + } + + .footer__icon { + margin: 0 10px 0 20px; + } + +} + +@media (min-width: 1024px) { + .links--hide { + display: inline-block; + } +}