diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..58702a2e --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +// .gitignore file +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..4056550b 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,17 @@ # GitHub Tracker -Replace this readme with your own information about your project. +This week I create a place to keep track of the GitHub repos. +HTML,CSS and javascript. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. ## The problem +I started with fetching the information through API. +then I tried to figure out how to filter the information I needed. +When I had information i displayed it on the site. +Styled with CSS (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 try to include a search bar and also which languages the projects includes. ## 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://silly-mestorf-a038ed.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..c42ef84b 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') -//"Draw" the chart here 👇 + +//Chart +const activateChart = (projects) => { +console.log(projects) +const labels = [ + 'Completed projects', + 'Total projects', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'Progress', + backgroundColor: ['rgb(57, 138, 185)','rgb(28, 101, 140)'], + borderColor: 'rgb(238, 238, 238)', + data: [projects, 19-projects], + }] + }; + + const config = { + type: 'doughnut', + data: data, + options: {} + }; + + new Chart( + document.getElementById('chart'), + config + ); + } + \ No newline at end of file diff --git a/code/github.png b/code/github.png new file mode 100644 index 00000000..8b25551a Binary files /dev/null and b/code/github.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..c1cd4152 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,46 @@ + Project GitHub Tracker + + + -

GitHub Tracker

-

Projects:

-
+
+

GitHub Tracker

+ +
+
+
+
+
+

Progress

+ +
+
- - +
+

Projects

+
+
+
+
+ - + + + + \ No newline at end of file diff --git a/code/output b/code/output new file mode 100644 index 00000000..a337fb57 --- /dev/null +++ b/code/output @@ -0,0 +1,89 @@ +allow_forking: true +archive_url: "https://api.github.com/repos/toal13/project-business-site/{archive_format}{/ref}" +archived: false +assignees_url: "https://api.github.com/repos/toal13/project-business-site/assignees{/user}" +blobs_url: "https://api.github.com/repos/toal13/project-business-site/git/blobs{/sha}" +branches_url: "https://api.github.com/repos/toal13/project-business-site/branches{/branch}" +clone_url: "https://github.com/toal13/project-business-site.git" +collaborators_url: "https://api.github.com/repos/toal13/project-business-site/collaborators{/collaborator}" +comments_url: "https://api.github.com/repos/toal13/project-business-site/comments{/number}" +commits_url: "https://api.github.com/repos/toal13/project-business-site/commits{/sha}" +compare_url: "https://api.github.com/repos/toal13/project-business-site/compare/{base}...{head}" +contents_url: "https://api.github.com/repos/toal13/project-business-site/contents/{+path}" +contributors_url: "https://api.github.com/repos/toal13/project-business-site/contributors" +created_at: "2022-01-23T16:12:15Z" +default_branch: "master" +deployments_url: "https://api.github.com/repos/toal13/project-business-site/deployments" +description: null +disabled: false +downloads_url: "https://api.github.com/repos/toal13/project-business-site/downloads" +events_url: "https://api.github.com/repos/toal13/project-business-site/events" +fork: true +forks: 0 +forks_count: 0 +forks_url: "https://api.github.com/repos/toal13/project-business-site/forks" +full_name: "toal13/project-business-site" +git_commits_url: "https://api.github.com/repos/toal13/project-business-site/git/commits{/sha}" +git_refs_url: "https://api.github.com/repos/toal13/project-business-site/git/refs{/sha}" +git_tags_url: "https://api.github.com/repos/toal13/project-business-site/git/tags{/sha}" +git_url: "git://github.com/toal13/project-business-site.git" +has_downloads: true +has_issues: false +has_pages: false +has_projects: true +has_wiki: true +homepage: null +hooks_url: "https://api.github.com/repos/toal13/project-business-site/hooks" +html_url: "https://github.com/toal13/project-business-site" +id: 451158190 +is_template: false +issue_comment_url: "https://api.github.com/repos/toal13/project-business-site/issues/comments{/number}" +issue_events_url: "https://api.github.com/repos/toal13/project-business-site/issues/events{/number}" +issues_url: "https://api.github.com/repos/toal13/project-business-site/issues{/number}" +keys_url: "https://api.github.com/repos/toal13/project-business-site/keys{/key_id}" +labels_url: "https://api.github.com/repos/toal13/project-business-site/labels{/name}" +language: "CSS" +languages_url: "https://api.github.com/repos/toal13/project-business-site/languages" +license: null +merges_url: "https://api.github.com/repos/toal13/project-business-site/merges" +milestones_url: "https://api.github.com/repos/toal13/project-business-site/milestones{/number}" +mirror_url: null +name: "project-business-site" +node_id: "R_kgDOGuQgrg" +notifications_url: "https://api.github.com/repos/toal13/project-business-site/notifications{?since,all,participating}" +open_issues: 0 +open_issues_count: 0 +owner: {login: 'toal13', id: 91566202, node_id: 'U_kgDOBXUweg', avatar_url: 'https://avatars.githubusercontent.com/u/91566202?v=4', gravatar_id: '', …} +private: false +pulls_url: "https://api.github.com/repos/toal13/project-business-site/pulls{/number}" +pushed_at: "2022-01-29T19:48:50Z" +releases_url: "https://api.github.com/repos/toal13/project-business-site/releases{/id}" +size: 19693 +ssh_url: "git@github.com:toal13/project-business-site.git" +stargazers_count: 0 +stargazers_url: "https://api.github.com/repos/toal13/project-business-site/stargazers" +statuses_url: "https://api.github.com/repos/toal13/project-business-site/statuses/{sha}" +subscribers_url: "https://api.github.com/repos/toal13/project-business-site/subscribers" +subscription_url: "https://api.github.com/repos/toal13/project-business-site/subscription" +svn_url: "https://github.com/toal13/project-business-site" +tags_url: "https://api.github.com/repos/toal13/project-business-site/tags" +teams_url: "https://api.github.com/repos/toal13/project-business-site/teams" +topics: [] +trees_url: "https://api.github.com/repos/toal13/project-business-site/git/trees{/sha}" +updated_at: "2022-01-29T19:36:22Z" +url: "https://api.github.com/repos/toal13/project-business-site" +visibility: "public" +watchers: 0 +watchers_count: 0 +[[Prototype]]: Object +2: {id: 454313860, node_id: 'R_kgDOGxRHhA', name: 'project-chatbot', full_name: 'toal13/project-chatbot', private: false, …} +3: {id: 462003502, node_id: 'R_kgDOG4mdLg', name: 'project-github-tracker', full_name: 'toal13/project-github-tracker', private: false, …} +4: {id: 456101513, node_id: 'R_kgDOGy-OiQ', name: 'project-guess-who', full_name: 'toal13/project-guess-who', private: false, …} +5: {id: 448514498, node_id: 'R_kgDOGrvJwg', name: 'project-news-site', full_name: 'toal13/project-news-site', private: false, …} +6: {id: 462883011, node_id: 'R_kgDOG5cIww', name: 'project-weather-app', full_name: 'toal13/project-weather-app', private: false, …} +7: {id: 462241115, node_id: 'R_kgDOG409Ww', name: 'unit-tests', full_name: 'toal13/unit-tests', private: false, …} +length: 8 +[[Prototype]]: Array(0) +fiveserver.js:1 [Five Server] connected. + + diff --git a/code/script.js b/code/script.js index e69de29b..121c1cfe 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,95 @@ + +//-----DOM-----// +const profileInfo = document.getElementById("profile-info") +const projectsContainer = document.getElementById("projects") + + +//-----Global variables -----// +const userName = 'toal13' +const authorName = 'Tomoyo Alvåg' +const API_URL = `https://api.github.com/users/${userName}/repos`; +const USER_API = `https://api.github.com/users/${userName}`; + + +//-----Token-----// +const options = { + method: 'GET', //POST, PATCH, DELETE + headers: { + Authorization: `token ${TOKEN}` + } +} + + +//------Profile-----// +const getUser = () => { + fetch(USER_API, options) + .then(res => res.json()) + .then((data) => { + profileInfo.innerHTML += ` +

${data.login}

+ + ` + }) +} + + +//-----Repos-----// +const getRepos = () => { + fetch(API_URL, options) + .then(res => res.json()) + .then(data => { + //-----Filter repos-----// + const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project-')); + + //-----Show repos in projectsContainer-----// + forkedRepos.forEach((repo) => { + projectsContainer.innerHTML += + `
+

${repo.name}

+

Default branch: ${repo.default_branch}

+

Latest push: ${repo.pushed_at.slice(0, 10)}, ${repo.pushed_at.slice(11, 16)}

+

+

Commits:

+
`; + }); + //-----Initiate next function and chart-----// + fetchPullRequests(forkedRepos) + activateChart(forkedRepos.length) + }); +}; + + +//-----My pull request-----// +const fetchPullRequests = (allRepos) => { + allRepos.forEach((repo) => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + fetch(PULL_URL, options) + .then((res) => res.json()) + .then((data) => { + //-----Check if i have a pullrequest for that repo user login and repo owner-----// + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login); + //-----If yes, start function getCommits-----// + if (myPullRequest) { + getCommits(myPullRequest.commits_url, repo.name); + //----If not, assume and print Group project-----// + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = 'Group project'; + } + }); + }); +}; + + +//-----Function to get amount of commit. Print on page.-----// +const getCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl, options) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += [data.length]; + }); +}; + +//-----Initiate on page load-----// +getRepos(); +getUser(); \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..bcdb2a78 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,185 @@ -body { - background: #FFECE9; + body { + color: #2C3844; + min-width: 325px; + font-family: 'Oswald', sans-serif; + background-color: #BBBFCA; +} + +a { + text-decoration: none; + display: inline-block; + padding: 0.3em; + transition: .3s; + transform: scale(1); + color: #2C3844; +} + +h2 { + text-align: center; + font-size: 30px; + margin-top: 0; +} + +.big-container a:hover { + transform: scale(1.20); + color: #ff9800; +} + +.big-container { + margin: 2%; + } + +/* =============== + Header +=============== */ + +h1 { + text-align: center; + font-size: 50px; +} + +/* =============== + Profile +=============== */ +.profile-container { + text-align: center; +} + + +.user-picture{ + width: 40%; + height: 40%; + border-radius: 50%; + border: 1px solid white; + filter: grayscale(40%); +} + +/* =============== + Chart +=============== */ + +.chart-container { + width: 70%; + margin: 10% 0 10% 15%; +} + +/* =============== + Project +=============== */ + +.projects { + display: block; + padding: 20px; + box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); + border-radius: 25px; + text-align: center; + margin: 10px; + background: #E8E8E8; +} + +footer { + height: 80px; + background-color: #495464; + text-align: center; + font-size: 20px; + color: #E8E8E8; + padding-top: 5PX; + width: 100%; + bottom: 0; +} + +/* ================= +Tablet layout +================= */ +@media (min-width: 668px) and (max-width: 1024px) { + .projects-list { + text-align: center; + } + .chart-container { + margin: 10% 0 10% 15%; + } + + .user-picture{ + width: 40%; + height: 40%; + } + + .chart-container { + width: 50%; + margin: 5% 0 5% 27%; + } + .projects{ + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: auto; + grid-gap: 1rem; + padding: 20px; + box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); + border-radius: 5px; + backdrop-filter: blur(5px); + border-radius: 25px; + text-align: center; + margin: 10px; + flex-wrap: wrap; + background: #E8E8E8; + } + +} +/* ================= +Desktop layout +================= */ +@media (min-width:1025px) { + + h3 { + font-size: 30px; + text-decoration: none; + } + + .big-container { + display: grid; + grid-template-columns: 1fr 2fr; + margin: 2%; + } + + .projects{ + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: auto; + grid-gap: 1rem; + padding: 20px; + box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); + border-radius: 5px; + backdrop-filter: blur(5px); + border-radius: 25px; + text-align: center; + margin: 10px; + flex-wrap: wrap; + background: #E8E8E8; +} + + .user-picture{ + width: 60%; + height: 60%; + } + + .info-contain { + margin-top: -14px; + } + + .chart-container { + width: 70%; + margin: 30% 0 10% 15%; + } + + footer { + clear: both; + height: 80px; + background-color: #495464; + text-align: center; + font-size: 20px; + color: #E8E8E8; + padding-top: 10PX; + width: 100%; + bottom: 0; + } } \ No newline at end of file diff --git a/code/token.js b/code/token.js new file mode 100644 index 00000000..e69de29b