diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..661f8d2e Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..1f204e1a --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +token.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..887dd1da 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,17 @@ # 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 project was about creating a GitHub tracker that displays my repositories, forked from Technigo. The objective for this project has been to continue practising JavaScript and in particular getting deeper into understanding API's (and for this project, using the GitHub documentation). This project contains my user data, repository data and a progress pie chart built with JS. ## 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 started to work on the project after I had done essential readings and video material provided by Technigo. I went through the project brief step by step and I found it very exciting to display the different kinds of data from the API's. But it has been quite challenging to get through this project, mainly in understanding how to write the code in Javascript (for example; when to declare a const, when to envoke a function, injecting HTML data etc) but new parts such as hiding files and getting acquainted with NPM has also been challenging and time consuming. Also learning about how to use tokens and API rate limits has given me some grey hair. + +But! Being finished with this project, that REALLY has had its ups and downs, in retrospect I know that I have learned A LOT. I'm obviously still on the surface when it comes to understanding everything and if I did have more time with this project I think I would dive into nesting fetches, displaying the number of pull requests, trying out other API endpoints, create a different chart and also try out styling charts in different ways. + +This was a really challenging yet fun and rewarding project that I feel that I have learned a lot from! ## 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. +Here's a link to my tracker :) + +https://github-tracker-by-camilla.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..97198fbc 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,32 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (forkedRepos) => { + + const labels = [ + 'Completed Projects', + 'Remaining Projects', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My first dataset', + backgroundColor: ['#655D8A', '#D885A3'], + borderColor: '#FDCEB9', + borderWidth: 6, + data: [forkedRepos, 19-forkedRepos], + }] + }; + + const config = { + type: 'pie', + data: data, + options: {} + }; + + const myChart = new Chart( + document.getElementById('chart'), + config + ); +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..c6477c84 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,50 @@ - Project GitHub Tracker + + + + + + + + + + + + + + GitHub Tracker by Camilla + -

GitHub Tracker

-

Projects:

-
+
+
+

GitHub Tracker

+
+
+ +
+ + +
+

Technigo Projects 👇🏽

+
+ +
- +
+ +
- + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..844eabd1 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,85 @@ +// DOM selectors +const projectsContainer = document.getElementById('projects') + +const username = 'CamillaHallberg' +let reponame = '' + +// Authentication +const API_TOKEN = TOKEN || process.env.API_KEY; +const options = { + method: 'GET', + headers: { + Authorization: `${API_TOKEN}` + } +} +// API's +const API_USER = `https://api.github.com/users/${username}` +const API_URL_REPO = `https://api.github.com/users/${username}/repos` + +// Function to fetch my user data +const getUser = () => { + fetch(API_USER, options) + .then(res => res.json()) + .then(user => { + userData.innerHTML = ` +
+ user image +
+
+

${user.login}

+

${user.bio}

+

Location: ${user.location}

+
` + }) +} +getUser() + +// Function to fetch my repositories +const getRepos = () => { + fetch(API_URL_REPO, options) + .then(res => res.json()) + .then(data => { + // Filter to get only my forked repos from Technigo + const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project-')) + + forkedRepos.forEach((repo) => { + // Creating unique ID for each forked repo + let projectID = repo.id + + projectsContainer.innerHTML += ` +
+

${repo.name}

+

Branch: ${repo.default_branch}

+

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

+
` + + // Invoking function to get the number of commits for the projects + getCommits(repo, projectID) + }) + getPullRequests(forkedRepos) + drawChart(forkedRepos.length) + }) +} + +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach(repo => { + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=150`, options) + .then(res => res.json()) + .then(data => { + const pulls = data.find((pull) => pull.user.login === repo.owner.login); + }) + }) +} + +const getCommits = (projectsContainer, projectID) => { + const GIT_COMMIT_API = projectsContainer.commits_url.replace("{/sha}", "") + fetch (GIT_COMMIT_API, options) + .then((res) => res.json()) + .then(data => { + let numberOfCommits = data.length + document.getElementById(projectID).innerHTML +=` +

Number of commits: ${numberOfCommits}

` + }) +} + +getRepos() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..74fe09a3 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,164 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: linear-gradient(rosybrown, floralwhite); +} + +h1 { + font-family: 'Devonshire', cursive; + font-size: 48px; + color: #EAEAEA; + text-align: center; + cursor: pointer; +} + +h2 { + font-family: 'Devonshire', cursive; + font-size: 28px; + color: #655D8A; + text-align: center; + cursor: pointer; +} + +h3 { + font-family: 'Shippori Antique B1', sans-serif; + font-size: 18px; + color: #886F6F; +} + +h4 { + font-family: 'Shippori Antique B1', sans-serif; + font-size: 14px; + color: #EAEAEA; +} + +.avatar { + text-align: center; +} + +.info { + text-align: center; +} + +.img { + width: 96px; + border-radius: 4px; + border: 4px solid #886F6F; + box-shadow: 4px 6px 4px #886F6F; +} + +.projects-card { + background: linen; + border: 6px solid #7897AB; + border-radius: 4px; + margin: 12px; + padding: 12px; + font-size: 12px; + font-family: 'Shippori Antique B1', sans-serif; + text-align: center; +} + +.default-branch { + font-family: 'Shizuru', cursive; + font-size: 14px; + color: #D885A3; +} + +a { + color: black; +} + +.chart-container { + padding: 20px; +} + +/* --- Footer --- */ +.made-by { + font-family: 'Shippori Antique B1', sans-serif; + font-size: 12px; + color: #694E4E; + text-align: center; +} + +/* --- TABLET VIEW --- */ +@media (min-width: 667px) and (max-width: 1024px) { + + h1 { + font-size: 96px; + } + + h2 { + font-size: 48px; + } + + h3 { + font-size: 36px; + } + + h4, p { + font-size: 18px; + } + + .img { + width: 200px; + } + + .default-branch { + font-size: 24px; + } + + .projects-wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 1rem; + } +} + +/* --- DESKTOP VIEW --- */ +@media (min-width: 1025px) { + .projects-wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 1rem; + } + + .projects-card { + transition: transform .6s; + } + + .projects-card:hover { + background-color:#D885A3; + transform: scale(1.2); + } + + .default-branch { + color: lightpink; + } + + .user-data { + display: flex; + justify-content: space-around; + padding: 48px; + } + + .img { + width: 150px; + } + + h1 { + font-size: 128px; + } + + h2 { + font-size: 80px; + } + + .chart-container { + position: relative; + left: 0; + right: 0; + margin: auto; + width: 600px; + padding: 100px; + } +}