diff --git a/README.md b/README.md index 1613a3b0..664653a5 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,12 @@ # 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. +I created a tracker to show the GitHub repositories for the projects I have done for Technigo's web development boot camp. The user can see my user name, GitHub profile image, every project repo I have forked, and info about the individual 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 was the first time I used an API in an individual project. I was very confused about the Javascript concepts, and found it hard to understand how to complete the project. After some googling and help from team mates, I managed to finish the project. +I played around more with the design, but still don't feel comfortable creating a design from scratch. If I had more time I would search for more inspiration on the design part of the project. I would also like to add more data from the API into the repo cards. ## 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://britishswede-githubtracker.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..45c69d26 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,24 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); +// 19 weekly projects //"Draw" the chart here 👇 + +const drawChart = (amount) => { + const config = { + type: "doughnut", + data: { + labels: ["Finished Projects", "Projects Left"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 19 - amount], + backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)"], + hoverOffset: 10, + }, + ], + }, + }; + + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..191cbb6a 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,30 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + + + + - - + + +
- - - - \ No newline at end of file + +
+ + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..31825147 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,90 @@ +const USER = 'rebeccablixt'; +const USER_URL = `https://api.github.com/users/${USER}`; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; + +// Used to write innerHTML after fetches +const profileInfo = document.getElementById('profileInfo'); +const projectsContainer = document.getElementById('projectsContainer'); + +// Fetches user info from GitHub profile +const userProfile = () => { + fetch(USER_URL) + .then((res) => res.json()) + .then((data) => { + profileInfo.innerHTML += ` + + + + ${data.login} + + + `; + }); +}; + +userProfile(); + +// Fetching all repos done by user +const getRepos = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + // filters Technigo projects from other GitHub repos + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith('project-') + ); + + // Inserts fetched info from API into HTML + forkedRepos.forEach( + (repo) => + (projectsContainer.innerHTML += ` +
+ +

+ ${repo.name} +

+ +

Default Branch: ${repo.default_branch}

+

Recent Push: ${new Date(repo.pushed_at).toDateString()}

+

Amount of Commits:

+
+ `) + ); + getPullRequests(forkedRepos); + drawChart(forkedRepos.length); + }); +}; + +getRepos(); + +// Pull requests for each project +const getPullRequests = (repos) => { + repos.forEach((repo) => { + const PULLREQUEST_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + fetch(PULLREQUEST_URL) + .then((res) => res.json()) + .then((pull) => { + const myPullRequest = pull.find( + (pull) => pull.user.login === repo.owner.login + ); + + // If pull request done by user, getCommits function is invoked + if (myPullRequest) { + getCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No pull request done by user'; + } + }); + }); +}; + +// If commits done by user, number of commits is added in HTML +const getCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((commit) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += + commit.length; + }); +}; diff --git a/code/style.css b/code/style.css index 7c8ad447..d532ed75 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,94 @@ body { - background: #FFECE9; -} \ No newline at end of file + background-color: black; + /* background-image: url('../Images/chalkboard-background.jpg'); + background-repeat: no-repeat; */ + width: 100%; + font-family: 'Gochi Hand', cursive; + /* font-family: 'Shadows Into Light', cursive; */ + color: #fbf7f5; + letter-spacing: 0.3em; +} + +p { + font-size: 24px; + font-weight: bold; + color: #e9c9d1; +} + +a { + color: #f5f9ad; + text-decoration: none; + border-bottom: 4px solid #f5f9ad; + border-radius: 5px; +} + +/* Heading */ +.heading { + display: inline; + text-align: center; + font-size: 30px; +} + +/* Info from GibHub profile */ +.profile-info { + width: 70%; + margin: 10px auto; + text-align: center; + color: #bcdf8a; +} + +.profile-image { + width: 28px; + height: 28px; + border-radius: 25px; + bottom: 0; +} + +.profile-name { + font-size: 28px; +} + +/* Projects/repos */ + +.repo-card { + width: 80%; + margin: 10px auto; + padding: 5px; + border: 10px solid rgba(255, 255, 255, 0.8); + border-image: url('https://www.unicefusa.org/sites/default/files/answer-box.png') + 25; + padding: 5px; +} + +/* grid */ +/* responsive (mobile first) */ + +@media (min-width: 768px) { + .projects-container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: max-content; + } + + .repo-card { + width: 90%; + } +} + +@media (min-width: 1200px) { + .profile-name { + font-size: 32px; + } + + .projects-container { + grid-template-columns: repeat(4, 1fr); + } + + .repo-card { + width: 80%; + } + + p { + font-size: 28px; + } +}