diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..ac2e55f5 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..4af72467 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 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 weeks project was to create a place to keep track of the GitHub repos that we're using at Technigo. ## 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? +To solve the problem we practiced JavaScript and learned more about API with the help of GitHubs own documentation. +I started with looking deeper into the documentation and by using the fetch and forEach functions with the filter method I could get hold of the information that I wanted to display. I created a donut chart displaying all the finished projects and the ones I have left to do during this Boot Camp. After that I moved on to the styling of the website using mobile first method. I spend a lot of time getting the desktop view accordingly to my sketch and used both flex box and grid to get the result that I wanted. It was a really good practice for me to develope my styling skills and I am proud of the result especially for the repository cards. +If I had more time I would have continued by adding an other chart and displaying more information on the site. ## 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-camillaekman.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..aaa3d3f7 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/ToDo b/code/ToDo new file mode 100644 index 00000000..288ec6fd --- /dev/null +++ b/code/ToDo @@ -0,0 +1,11 @@ +ToDo: + +1) Fetch the repos +2) Consol log them +3) Get them to show in the browser +4) Filter out the Technigo repos +5) Test chart library + +6) Fetch pull requests +7) Display Profile pic + user name +8) Styling \ No newline at end of file diff --git a/code/assest/img_github.png b/code/assest/img_github.png new file mode 100644 index 00000000..19f5f387 Binary files /dev/null and b/code/assest/img_github.png differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..0523a449 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,27 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 +// console.log("Chart is heart"); + +const drawChart = (amount) => { + const config = { + type: "doughnut", + data: { + labels: ["Finished Projects", "Projects Left"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 20 - amount], + backgroundColor: [ + "rgb(0, 130, 204)", + "rgb(160, 0, 204)", + "rgb(255, 205, 86)", + ], + hoverOffset: 4, + }, + ], + }, + }; + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..50c2fc5a 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,45 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + + +
+ +
+
+
+ +

+
- - +
+

Popular repositories

+
+
+
- - - - \ No newline at end of file + +
+
+ +
+
+ + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..1023e798 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,81 @@ +// DOM selectors - store the URL +// My username to GitHub + URL to repos +const USER = "camekman"; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const INFO_URL = `https://api.github.com/users/${USER}`; +const projectsContainer = document.getElementById("projects"); +const profileContainer = document.getElementById("profile-container"); +const image = document.getElementById("image"); + +// Function with the fetch wrapped inside +const getRepos = () => { + fetch(REPOS_URL) + .then((response) => response.json()) + .then((data) => { + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith("project-") + ); + forkedRepos.forEach( + (repo) => + (projectsContainer.innerHTML += `
+

${repo.name}

+
${repo.default_branch}
+
latest update: ${new Date( + repo.updated_at + ).toLocaleDateString()}
+
Git URL: ${repo.name}
+
`) + ); + drawChart(forkedRepos.length); + getPullRequests(forkedRepos); + }); +}; + +getRepos(); + +const getInfo = () => { + fetch(INFO_URL) + .then((response) => response.json()) + .then((data) => { + console.log(data); + image.src = data.avatar_url; + profileContainer.innerHTML += `
+

${data.name}

+
${data.login}
+
${data.bio}
+
Location @${data.location}
+
Website@ ${data.blog}
+
`; + }); +}; + +getInfo(); + +// pull requests +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach((repo) => { + fetch( + `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` + ) + .then((response) => response.json()) + .then((data) => { + const myPulls = data.filter( + (pulls) => pulls.user.login === repo.owner.login + ); + const commitsURL = myPulls[0].commits_url; + getCommits(commitsURL, repo); + }); + }); +}; + +const getCommits = (commitsURL, repo) => { + fetch(commitsURL) + .then((response) => response.json()) + .then((data) => { + document.getElementById( + `${repo.name}` + ).innerHTML += `
number of commits: ${data.length}
`; + }); +}; diff --git a/code/style.css b/code/style.css index 7c8ad447..f1d4c043 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,250 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #f3f0ef; + font-family: Arial, Helvetica, sans-serif; + color: rgb(45, 64, 75); +} + +.header { + display: flex; + background: rgb(80, 99, 110); + padding: 10px; + justify-content: center; +} + +.github-icon { + width: 10%; + height: 10%; +} + +.profile-container { + display: flex; + border-bottom: solid rgb(153, 160, 165); + border-width: 1px; + align-items: center; + padding: 10px; + justify-content: left; +} + +.profile-container h5 { + font-weight: lighter; + font-size: 10px; + margin: 5px; +} + +.profile-pic { + width: 20%; + height: 20%; + object-fit: cover; + border-radius: 70%; + margin-right: 10px; + border-bottom: solid rgb(0, 130, 204); + border-top: solid rgb(160, 0, 204); + border-width: 1px; + padding: 5px; +} + +h1 { + display: none; +} + +.repo-container { + display: flex; + flex-direction: column; + background-color: #e2e4e5; + border-radius: 6px; + padding: 10px; + padding-bottom: 30px; +} + +h3 { + font-size: 16px; + margin-left: 5px; +} + +h2 { + font-size: 20px; + display: block; + border-bottom: solid rgb(153, 160, 165); + border-width: 1px; + padding-bottom: 10px; +} + +.repositories { + background: #f3f0ef; + display: flex; + flex-direction: column; + border: solid rgb(153, 160, 165); + border-radius: 6px; + border-width: 1px; + padding-left: 10px; + padding-bottom: 10px; + margin-top: 10px; +} + +.repositories:hover { + background: rgb(80, 99, 110); + color: #cbcecf; +} + +.repositories h5 { + font-size: 12px; + margin: 5px; +} + +.chart-container { + display: flex; + background-color: #e2e4e5; + border-radius: 6px; + justify-content: center; + margin-top: 10px; +} +.canvas-container { + display: flex; + justify-content: center; + width: 300px; +} + +canvas { + padding: 20px; +} + +footer { + background: rgb(80, 99, 110); + text-align: center; + padding: 5px; + font-size: 10px; +} + +@media (min-width: 668px) { + .github-icon { + width: 5%; + height: 5%; + } + + .profile-container { + padding: 10px; + justify-content: left; + } + + .profile-pic { + width: 12%; + height: 12%; + } + + .profile-container h5 { + font-size: 14px; + margin: 5px; + } + + .repo-container { + padding: 20px; + padding-bottom: 30px; + text-align: center; + } + + .repositories { + width: 70%; + height: 30%; + margin: auto; + margin-top: 10px; + } + + .canvas-container { + width: 500px; + } + + canvas { + padding: 30px; + } +} + +@media (min-width: 1024px) { + .header { + justify-content: right; + } + + .github-icon { + width: 2.5%; + height: 2.5%; + } + + .main-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + } + + .profile-container { + grid-column: span 1; + height: 1500px; + display: table-column; + text-align: center; + padding: 20px; + margin-top: 20px; + margin-right: 5px; + } + + .profile-pic { + width: 250px; + height: 250px; + align-items: center; + padding: 20px; + margin-bottom: 50px; + } + + h1 { + display: contents; + } + + .profile-container h5 { + margin: 20px; + } + + h2 { + text-align: left; + padding-bottom: 20px; + } + + .repo-container { + grid-column: 2/ 5; + height: 1550px; + padding: 10px; + } + + .projects-container { + display: flex; + flex-direction: row; + height: 700px; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .repositories { + display: flex; + width: 45%; + height: 20%; + text-align: left; + flex-wrap: wrap; + justify-content: space-evenly; + flex-grow: 1; + margin: 5px; + } + + h3 { + margin-left: 0; + } + + .repositories h5 { + font-size: 10px; + margin: 0; + } + + .canvas-container { + width: 800px; + } + + canvas { + max-width: 600px; + max-height: 600px; + } +}