diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..ad08d525 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ + +code/secret.js diff --git a/README.md b/README.md index 1613a3b0..25bfc5d3 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,21 @@ # GitHub Tracker -Replace this readme with your own information about your project. +Assignment is to build a site that shows info about our github account and the projects we've created to far. +The following points is what is required to be shown. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +- A list of all repos that are forked ones from Technigo +- Your username and profile picture +- Most recent update (push) for each repo +- Name of your default branch for each repo +- URL to the actual GitHub repo +- Number of commit messages for each repo +- All pull requests +- A chart of how many projects you've done so far, compared to how many you will have done. ## 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 used fetch to get the user data, which required 3 fetches - user data, pull requests, and commits. The styling was kept simple since the focus was to be able to display all the different data that was required. The biggest problem was data retrieval and getting it to actually show up on the site. The second biggest problem I had was that I had set up the fetches to all finish before moving on to displaying the data so the site took a very long time to load. That has been slightly remedied by splitting up the code into separate fetches but it still takes a fairly long time for the site to load. ## 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-at.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..96acf6eb 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,18 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const myChart = (numberOfProjects) => { + new Chart(ctx, { + type: 'pie', + data: { + labels: ['Completed', 'To be done'], + datasets: [{ + label: 'My First dataset', + backgroundColor: ['#cc5500', '#3a3a3a'], + borderColor: '#F4F4F4', + data: [numberOfProjects, 19 - numberOfProjects], + }] + } + }) +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..7d613e31 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,34 @@ Project GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
+
+ +

@amandatange

+
- - +
+ +
+ + +
+ +
+ + - + + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..2ee1069e 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,93 @@ +//DOM selectors +const main = document.getElementById("projects"); // main portion of the site, contains all projects +const usr = document.getElementById("usr"); // section in header that holds username and profile pic + +//Global variables +const usrName = 'amandatange'; +let forkedRepos = []; // will contain filtered list of repos that have been forked +let projectRepos = []; // will contain filtered list of forked repos with names that start with "project" + +const API_REPOS = `https://api.github.com/users/${usrName}/repos` + +const options = { + method: 'GET', + headers: { + Authorization: `token ${API_TOKEN}` + } +} + +const fetchData = () => { + fetch(API_REPOS, options) + .then((res) => res.json()) + .then((data) => { + forkedRepos = data.filter(repo => repo.fork); + projectRepos = forkedRepos.filter(repo => repo.name.startsWith('project')); + + const profilePic = data[0].owner.avatar_url; + const LinkToProfile = data[0].owner.html_url; + + // for the user presentation + usr.innerHTML = ` + +

@${usrName}

+ `; + + //Send completed projects length to build chart + myChart(projectRepos.length) + + //Call function to fetch pull requests + fetchPR() + }) +} + +const fetchPR = () => { + for (let i = 0; i < projectRepos.length; i++) { + const repo = projectRepos[i]; + const API_PR = `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` + + // since not all projects have a PR I don't have access to the commits from the PR API for all of them + // so I chose to use the commits api from the first fetch + // but I think this way the number of commits includes those made by the technigo team before I forked the project? + const API_COMMITS = repo.commits_url.replace("{/sha}", ""); + + fetch(API_PR, options) + .then((resPR) => resPR.json()) + .then((dataPR) => { + //filter for every PR to match my profile (or in the case of the weather app, to michael's profile and id for the PR) + const pull = dataPR.filter(pr => pr.url.includes(repo.name) + && (pr.user.login === repo.owner.login || pr.user.login === "michaelchangdk" && pr.id === 856976386)) + + fetch(API_COMMITS, options) + .then((commits_res) => commits_res.json()) + .then((commits_data) => { + // sending the PR, repo and number of commits to the function that posts the data on the site + postInfo(pull, repo, commits_data.length) + }) + }) + } +} + + +const postInfo = (pull, repo, numberOfCommits) => { + + const update = new Date(repo.pushed_at).toLocaleDateString('en-GB'); + + // the tags have classes that aren't used right now + // but I would like to try using them to style the layout with a more a advanced grid layout + main.innerHTML += ` +
+

${repo.name}

+

Link to repo: here

+

Default branch: ${repo.default_branch}

+

Most recent update: ${update}

+

Number of commits: ${numberOfCommits}

+
`; + //If the repo doesn't have a PR it won't add this data + if (pull.length !== 0) { + const PRLink = pull[0].html_url; + document.getElementById(`${repo.name}`).innerHTML += ` +

Pull request: here

` + } +} + +fetchData() diff --git a/code/style.css b/code/style.css index 7c8ad447..2299f94e 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,106 @@ +:root { + --primary: #cc5500; + --secondary: #272727; +} + + body { - background: #FFECE9; -} \ No newline at end of file + letter-spacing: .1rem; + font-family: monospace; + margin: 0; +} + +header { + display: flex; + align-content: center; + justify-content: center; + font-family: 'Montserrat', sans-serif; + background-color: var(--primary); + color: var(--secondary); + margin: 0; + padding: 5vw; + height: 20vh; +} + +h1 { + + font-size: max(1.5rem, 5vw); + margin: 0; + font-weight: 400; + text-shadow: 3px 3px 5px #27272666; +} + +a { + text-decoration: none; + color: #f4f4f4; +} + +h2 { + margin-left: 1rem; +} + +span { + color: var(--primary); +} + +.project a { + font-weight: bolder; +} + +.usr-name-img-container { + display: flex; + align-items: center; +} + +.avatar_url_pic { + max-width: max(10vw, 100px); + border-radius: 100%; + margin: 1rem; + box-shadow: 3px 3px 5px #CF750066; +} + +.project-container { + display: grid; + grid-template-columns: 1fr; + justify-items: center; + width: 100vw; + font-size: 1.5em; +} + +.project { + background-color: #F4F4F4; + padding: 1rem; + margin: 1rem; +} + +.project:hover { + transition: background-color 500ms ease; + background-color: #f0d9c7; +} + +.chart-container { + display: grid; + grid-template-columns: 1fr; + justify-items: center; +} + +.chart { + max-width: min(80vw, 400px); + max-height: min(80vh, 400px); +} + +@media (min-width: 667px) and (max-width: 1024px) { + .project-container { + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 1025px) { + .project-container { + grid-template-columns: 1fr 1fr 1fr; + } + + h2 { + margin-left: 5vw; + } +}