diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..01625912 Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json index e8783bfe..c21f2fdb 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,8 @@ { - "liveServer.settings.port": 5505 + "liveServer.settings.port": 5505, + "cSpell.words": [ + "Malik", + "Naushin", + "technigo" + ] } \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..4d809eff 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. - +This project is to track the github repositories created during Technigo Boot Camp ## 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? +The challenge for this week was the limit of 60 request per hour for github API. Therefore, first, I worked on functionality without any styling, then, I did styling with placeholders and at the end i merged both of them to have the final version. + +I have completed most of the requirements. If i had more time, I would have add sorting and more visual representation of data. ## 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://naushin-github.netlify.app/ \ No newline at end of file diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..d6a03bc9 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/assets/cardbg.jpeg b/code/assets/cardbg.jpeg new file mode 100644 index 00000000..f06cb662 Binary files /dev/null and b/code/assets/cardbg.jpeg differ diff --git a/code/assets/eye-30.png b/code/assets/eye-30.png new file mode 100644 index 00000000..96783181 Binary files /dev/null and b/code/assets/eye-30.png differ diff --git a/code/assets/html-50.png b/code/assets/html-50.png new file mode 100644 index 00000000..702bbddf Binary files /dev/null and b/code/assets/html-50.png differ diff --git a/code/assets/javascript.svg b/code/assets/javascript.svg new file mode 100644 index 00000000..e6184185 --- /dev/null +++ b/code/assets/javascript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..4768fa7b 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,31 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('chart').getContext('2d'); //"Draw" the chart here 👇 +const drawChart = (repoCount) =>{ + const config = { + type: 'pie', + data: { + labels: [ + 'Remaining', + 'Completed', + ], + datasets: [{ + label: 'My First Dataset', + data: [(19 - repoCount), repoCount], + backgroundColor: [ + '#333', + '#fff' + ], + hoverOffset: 4 + }] + }, + options: { + responsive:true, + maintainAspectRatio: false, + }, + + }; + + new Chart(ctx, config) +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..ee0e43c9 100644 --- a/code/index.html +++ b/code/index.html @@ -6,14 +6,43 @@ Project GitHub Tracker + -

GitHub Tracker

-

Projects:

-
+ +
+

GitHub Tracker

+
+
+ + +
+ +
+ +
+

Progress:

+
+ +
+
+ +
+ + +
+

Projects:

+
+
+ +
+
+ + + - - diff --git a/code/script.js b/code/script.js index e69de29b..e8427ef4 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,234 @@ +// DOM selectors +const userProfile = document.getElementById('profile'); +const userProjects = document.getElementById('projects'); +const progressChart = document.getElementById('chart') +const searchRepo = document.getElementById("search-repo") + +//Global Variables +let userName = "nama0027"; +//let cardBack; +let cardFront; +// API variables +const USER_REPO_URL = `https://api.github.com/users/${userName}/repos`; +const USER_URL = `https://api.github.com/users/${userName}`; + + +//-------------functions deceleration----------------------------// + +//---- for fetch----// + +const getUser = () => { + fetch(USER_URL) + .then((res)=>{return res.json()}) + .then((data) => { + console.log('user', data) + userProfile.innerHTML = ` +
+ ${data.name} avatar +

${data.name}

+
+ + My GitHub Page + + ` + + }) +} + +const getRepos = () =>{ + fetch(USER_REPO_URL) + .then ((res) => { + return res.json(); + + }) + .then((data) => { + console.log(data); + const technigoProjects = data.filter(item => (item.fork && item.name.startsWith('project-') )) + technigoProjects.forEach((repo) => { + console.log(repo.name); + getPullRequests(repo) + let date = formateDate(repo.pushed_at) + getLanguageIcon(repo.languages_url, repo.name ) + + userProjects.innerHTML += ` +
+
+
+

Github repository:

+

Updated on:

+

Commits:

+
+
+

+ + Click me! +

+

${date}

+
+
+
+
+
+

${repo.name}

+

${repo.default_branch}

+
+
+

+

+
+
+ + ` + }) + drawChart(technigoProjects.length) + + }) + +} + +const getPullRequests = (repo) => { + //Get all the PRs for each project. + fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`) + .then(res => res.json()) + .then(data => { + console.log(data); + const userPullReq = data.find((pull) => + (repo.owner.login === pull.user.login || pull.title.includes('Naushin')) + ); + if (userPullReq) { + getCommits(userPullReq.commits_url, repo.name); + getComments(userPullReq.review_comments_url,repo.name ); + } else { + document.getElementById(`commitNum-${repo.name}`).innerHTML += ` +

No pull request yet!

+ ` + document.getElementById(`review-${repo.name}`).innerHTML = + `No review yet` + } + + + + }) +} + + + + +function getCommits (commitUrl, repoName) { + + fetch(commitUrl) + .then(res => res.json()) + .then(data => { + const commitMessages = Array.from(data, msg => msg.commit.message) + displayCommitMessages(commitMessages, repoName) + document.getElementById(`commitNum-${repoName}`).innerHTML += ` +

${data.length}

+ ` + + }) + +} +const formateDate = (date) => { + + const formattedDate = new Date(date).toDateString() + +return formattedDate + + +} + +const getLanguageIcon = (langURL, repoName) => { + + fetch(langURL) + .then(res => res.json()) + .then(data => { + console.log('lang', data) + const keys = Object.keys(data) + const largest = Math.max.apply(null, keys.map(x => data[x])); + const result = keys.reduce((result, key) => { if (data[key] === largest) { result.push(key); } return result; }, []); + + + if (result[0] === "HTML") { + console.log('lang text', result[0]) + document.getElementById(`lang-${repoName}`).innerHTML += ` + + ${result[0]} + ` + + } else if (result[0] === "JavaScript") { + document.getElementById(`lang-${repoName}`).innerHTML += ` + + ${result[0]} + ` + + + } else { + document.getElementById(`lang-${repoName}`).innerHTML += ` + + ${result[0]} + ` + } + }) + +} + + + + +const displayCommitMessages= ((commitData, repoName ) => { + console.log ('commitData', commitData) + document.getElementById(`commit-${repoName}`).innerHTML += `Latest commit: "${commitData[commitData.length-1]}"` + +}) + +const getComments = (commentsUrl,repoName) => { + + console.log(commentsUrl) + fetch(commentsUrl) + .then(res => res.json()) + .then(data => { + if (data.length!== 0){ + console.log('review', data); + document.getElementById(`review-${repoName}`).innerHTML += `From reviewer: "${data[0].body}"` + } else { + document.getElementById(`review-${repoName}`).innerHTML = `No review yet` + } + + }) +} + +//----------- search--------------------// +const search = () => { + console.log('i am here') + let src = searchRepo.value.toLowerCase() + console.log(src) + const allRepo = document.getElementsByClassName('card front') + for (i = 0; i < allRepo.length; i++) { + if (allRepo[i].innerHTML.toLowerCase().includes(src)) { + allRepo[i].style.display = "flex"; + } else { + allRepo[i].style.display = "none"; + } + } +} + + +//event listener + +searchRepo.addEventListener('keyup', search) + + + + +//function calls on loading +getRepos(); +getUser(); diff --git a/code/style.css b/code/style.css index 7c8ad447..a8f2a7c2 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,314 @@ +:root{ + --primary-color :#333; + --secondary-color:#dba93d; + +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + body { - background: #FFECE9; + font-family: Arial, Helvetica, sans-serif; + background-color: #d3d7da; + justify-content: center; + align-items: center; + min-height: 100vh; + min-width: 350px; + +} + +a{ +text-decoration: none; +cursor: pointer; + +} +.header{ + width: 100%; + height: 50px; + background-color: var(--primary-color); + color: white; + position: relative; + + z-index: 1; + padding-top: 10px; + +} +.profile{ + display: flex; + flex-direction: column; + order:1; + +} +.user-info{ + height:30vh; + display: flex; + flex-direction: column; + margin: 0 auto; + color: var(--secondary-color); +} + + +.user{ + display: flex; + padding: 20px; +} +.photo { + border: solid 1px var(--secondary-color); + border-radius: 50%; + width: 100px; + height: 100px; + margin-right: 20px; +} +.name{ + + margin-top: 20px; + + +} + + + +.link-github{ + display: block; + cursor: pointer; + width: 160px; + height:30px; + background: #333; + color: #fff; + font-size: 16px; + text-align: center; + text-decoration: none; + border-radius: 4px; + line-height: 19px; + padding-top: 10px; + margin: 10px; +} +.search{ + font-size: 14px; + line-height: 24px; + vertical-align: middle; + border: 1px solid var(--secondary-color ); + border-radius: 6px; + outline: none; + +} +.tracker { +display:flex; +flex-direction: column; +} +.repos{ + display: flex; + flex-direction: column; + padding: 0 20px 0 20px; + order:2; +} +.projects-detail{ + + display: flex; + flex-direction: column; + gap: 20px; +} +.card{ +background: url("./assets/cardbg.jpeg"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + width: 350px; + height: 400px; + position: relative; + box-shadow: 0 0 50px rgba(0, 0, 0, 0.315); + border-radius: calc(40 * 1px); + overflow: hidden; + transition: transform 1s; +transform-style: preserve-3d; + +} + + +.container__info { + + bottom: 20%; + display: flex; + align-items: flex-end; + padding: 15px 30px; + color: #333; + } + + + + + + .card-header { + display: flex; + align-items: center; + position: relative; + gap: 1em; + padding: 2em; + border-radius: calc(40 * 1px) 0 0 0; + background-color: #fff; + transform: translateY(-100%); + transition: .2s ease-in-out; + + } + + .card-overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + border-radius: calc(40 * 1px); + background-color: #fff; + transform: translateY(100%); + transition: .2s ease-in-out; + } + + .card:hover .card-overlay { + transform: translateY(0); + } + .card:hover .card-header { + transform: translateY(0); + } +.language { +border-radius: 50%; +object-position: center; +align-self:flex-start ; +object-fit: cover; +right: 0; + left: 0; + bottom: 0; + order:1; + } +.repo-info{ +order: 2; +} + .repo-name { + color: #dba93d; + font-size: 1.2rem; + text-transform: capitalize; + } + .repo-branch { + color: #333; + font-size: 0.8rem; + font-style: italic; + text-transform:uppercase; + } + + + .repo-comment { + padding: 0 1.2em 1.2em; + margin: 0; + color: #dba93d; + font-family: "MockFlowFont"; + overflow: hidden; + font-size: 0.9rem; + } + .content { + position: relative; + width: 100%; + display: block; + font-size: 14px; + line-height: 1.2; + letter-spacing: 1px; + color: #333; + margin-top: 30px; + + } + + .labels { + margin-left: 20px; + } + .value{ + margin-right: 20px; + text-decoration: none; + } + .card-body{ + display: flex; + } + .commit{ + margin-left: 20px; + } + .title{ + + padding: 10px; + color: var(--secondary-color); + } + + .progress{ + order:3; + padding: 20px 20px 0 20px; + } +.chart{ + padding: 20px; +} +.footer{ + width: 100%; + height: 50px; + background-color: var(--primary-color); + color: white; + position: relative; + text-align: center; + z-index: 1; + margin-top: 50px; + padding-top:10px ; +} + +@media (min-width: 1200px) { +.tracker{ + + display: block; +} +.profile{ +height: 400px; +float: left; +width: 75%; +left: -250px; +margin-left: 0; +padding: 0; +position: absolute; +top: 100px; +} +.photo { + + width: 350px; + height: 350px; + +} + .repos{ + float:none; + margin-top: 500px; + margin-left: 20px; + margin-right: 20px; + padding: 20px; + border-top: dashed 8px var(--primary-color); + + } + .projects-detail{ + + flex-direction: row; + gap: 20px; + flex-wrap: wrap; + } + +.progress { + float: right; + width:25%; + height: 400px; + top: 20px; + right: 0; + position: absolute; + margin-right:20px; + + + } + .title-chart{ + display:none; + } +.chart{ + + margin: 50px 10px; + + } } \ No newline at end of file