diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..da23c180 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..cdc99c54 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,17 @@ # GitHub Tracker -Replace this readme with your own information about your project. +Users should be able to : +1. view the site in every screen size +2. see the information pulled from Github Res API +3. See the data visuallization through the bar chart -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +This project is built with: +1. JavaScript +2. Semantic html +3. CSS -## 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? ## 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://rawi-github-tracker.netlify.app/ \ No newline at end of file diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..2ca23055 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..41cf6475 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,38 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('myChart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (amount) => { + const config = { + type: "bar", + data: { + labels: ["Completed projects", "Remaining projects"], + datasets: [ + { + label: "Technigo projects", + data: [amount, 21 - amount], + backgroundColor: [ + "#c8cccf", + "#778088", + ], + barThickness: "30", + }, + ], + }, + options: { + scales: { + x: { + grid: { + display: false, + } + }, + y: { + grid: { + display: false + } + }, + } + } + } + new Chart(ctx, config) +} \ No newline at end of file diff --git a/code/github.png b/code/github.png new file mode 100644 index 00000000..a612fdb2 Binary files /dev/null and b/code/github.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..5c55b32d 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,28 @@ Project GitHub Tracker + + + + -

GitHub Tracker

-

Projects:

-
+
+
+
- - +
+
+
- - + +
+ +
+ + + + + \ No newline at end of file diff --git a/code/pointing-right.png b/code/pointing-right.png new file mode 100644 index 00000000..588c1fe9 Binary files /dev/null and b/code/pointing-right.png differ diff --git a/code/script.js b/code/script.js index e69de29b..b80dac85 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,87 @@ +// Github profile +fetch('https://api.github.com/users/rawisou') + .then((res) => res.json()) + .then((data) => { + const profile = document.getElementById('profile') + profile.innerHTML = ` +

GitHub Tracker

+

${data.name}

+ Github Profile Image +

Github account: ${data.login}

+ ` + }) + .catch((err) => console.log(err)) + +// Repos forked from Technigo +fetch('https://api.github.com/users/rawisou/repos') + .then((res) => res.json()) + .then((data) => { + const technigoRepos = data.filter( + (repos) => repos.fork && repos.full_name.includes('project-') + ) + getPullRequests(technigoRepos) + drawChart(technigoRepos.length) + }) + .catch((err) => console.log(err)) + +const getPullRequests = (repos) => { + const projectCard = document.getElementById('projectCard') + repos.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then((res) => res.json()) + .then((pull) => { + const myPullRequests = pull.find( + (pull) => pull.user.login === repo.owner.login + ) + + fetch(`https://api.github.com/repos/rawisou/${repo.name}/commits?per_page=100`) + .then((res) => res.json()) + .then((myCommits) => { + let num = myCommits.length + + if (myPullRequests != undefined) { + projectCard.innerHTML += ` +
+ +

${repo.full_name.replace('rawisou/project-', '').replace('-', ' ')}

+

Default branch: ${repo.default_branch}

+

Pushed at: ${new Date(repo.pushed_at).toDateString()}

+

Number of commits: ${num}

+

View the pull request

+
+ ` + } else if (repo.name === 'project-weather-app') { + projectCard.innerHTML += ` +
+

${repo.full_name.replace('rawisou/project-', '').replace('-', ' ')}

+

Default branch: ${repo.default_branch}

+

Pushed at: ${new Date(repo.pushed_at).toDateString()}

+

Number of commits: ${num}

+

View the pull request

+
+ ` + } else if (repo.name === 'project-music-releases') { + projectCard.innerHTML += ` +
+

${repo.full_name.replace('rawisou/project-', '').replace('-', ' ')}

+

Default branch: ${repo.default_branch}

+

Pushed at: ${new Date(repo.pushed_at).toDateString()}

+

Number of commits: ${num}

+

View the pull request

+
+ ` + } else { + projectCard.innerHTML += ` +
+

${repo.full_name.replace('rawisou/project-', '').replace('-', ' ')}

+

Default branch: ${repo.default_branch}

+

Pushed at: ${new Date(repo.pushed_at).toDateString()}

+

Number of commits: ${num}

+

Pull Request: No pull request

+
+ ` + } + }) + }) + }) +} diff --git a/code/style.css b/code/style.css index 7c8ad447..056271ef 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,109 @@ +* { + margin: 0; + border: 0; + padding: 0; + font-family: 'Montserrat', sans-serif; +} body { - background: #FFECE9; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #fff; +} +.ghlogo { + width: 30px; + height: 30px; + margin-right: 5px; +} +h1 { + padding: 20px; +} +h2 { + margin: 10px; +} + +h3 { + text-transform: uppercase; + width: 100%; + text-align: center; + border-bottom: 1px solid #000; + line-height: 0.1em; + margin: 10px 0 20px; + font-size: 20px; +} + + +h3 span { + background:#fff; + padding:0 10px; +} + +a { + text-decoration: none; + font-weight: 600; + color: black; +} + +a:hover { + color: #7a7a7c; +} +h3 a:hover { + color: #000; + font-size: 22px; + box-shadow: 5px 5px #7a7a7c; +} + +.bolded { + font-weight: 600; +} +.profile { + text-align: center; +} + +.profile-image { + height: 150px; + width: 150px; + border-radius: 50%; + padding: 30px; +} + +.card { + border: 1.5px solid rgb(27, 27, 27); + box-shadow: 10px 10px #4d4c4e; + padding: 20px; + margin: 20px; +} + +.chart-wrapper { + display: flex; + margin: auto; + padding: 20px; +} + +.pointing-right { + width: 20px; +} + +footer { + font-size: 12px; +} + +@media (min-width: 668px) { + .project-card { + display: grid; + grid-template-columns: 1fr 1fr; + } + .chart-wrapper { + width: 50%; + } +} + +@media (min-width: 1000px) { + .project-card { + grid-template-columns: 1fr 1fr 1fr; + } + .chart-wrapper { + width: 30%; + } } \ No newline at end of file