diff --git a/README.md b/README.md index 1613a3b0..3f70a400 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,10 @@ # 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. +Assigment was about to make a github tracker ## 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://stoic-archimedes-d36d72.netlify.app diff --git a/code/chart.js b/code/chart.js index 92e85a30..bf9c9f5e 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,36 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const drawChart = (repos) => { + +const labels = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My Github dataset', + backgroundColor: ['#f3722c', '#f8961e'], + borderColor: '#f7e9e7', + data: [repos, 19-repos], + }] + }; + + const config = { + type: 'bar', + data: data, + options: {} + }; + + const myChart = new Chart( + document.getElementById('chart'), + config + ); + } diff --git a/code/github-universe.jpg b/code/github-universe.jpg new file mode 100644 index 00000000..f8e71b6c Binary files /dev/null and b/code/github-universe.jpg differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..085bce3b 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,40 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
- - - - - - - - \ No newline at end of file + + + + + + + + + + Project GitHub Tracker + + + + + +
+ +
+ +
+ + + + + +
+ +
+ + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..625d0401 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,117 @@ +const username = 'NabeelMansour' +const container = document.getElementById('container') +const header = document.getElementById('header') +const technigoRepos = document.getElementById('technigoRepos') + + +// DOM selectors +const userName = document.getElementById('username') +const project = document.getElementById('projects') +const chart = document.getElementById('chart'); + +const options = { + method: 'GET', + headers: { + Authorization: `token ${token}` + } +} + + + + +// API'S +const USER_API = `https://api.github.com/users/${username}` +const API_REPOS = `https://api.github.com/users/${username}/repos` + + + +// fetch for the user info + +fetch(USER_API, ) +.then(res => res.json()) +.then(data => { + + header.innerHTML += ` +
+ +

${data.name}

+

${data.login}

+

GitHub Tracker

+

${data.bio}

+
+ ` + + }) + +// fetch the users reposetories + +fetch(API_REPOS) + .then(res => res.json()) + .then(data => { + + const technigoRepositories = data.filter(repo => repo.name.includes('project-') && repo.fork) + + technigoRepositories.forEach((repo) => { + container.innerHTML += ` +
+

${repo.name}

+

${repo.description}

+ +
+

Last push: ${new Date(repo.pushed_at).toDateString()}

+

Branch: ${repo.default_branch}

+

Main language: ${repo.language}

+

Number of commits:

+
+

My Repo

+
+ ` + }) + drawChart(technigoRepositories.length) + getPullRequests(technigoRepositories) // Calling the pull req and commits function + }) + + + +// Gets the pull request for the projects +const getPullRequests = (forkedRepos) => { + forkedRepos.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then(res => res.json()) + .then(data => { + + + + const filteredPulls = data.find((pull) => pull.user.login === repo.owner.login) + if (filteredPulls) { + fetchCommits(filteredPulls.commits_url, repo.name) + } else { + document.getElementById(`commits-${repo.name}`).innerHTML = "No pulls from this user yet." + } + + }) + }) + } + +// fetches the commits +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then(res => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + }) + } + + + + + + + + + + + + + + diff --git a/code/style.css b/code/style.css index 7c8ad447..85dedf0f 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,223 @@ body { - background: #FFECE9; -} \ No newline at end of file +background-repeat: no-repeat; +background-size: contain; +background-image: url('github-universe.jpg'); +font-family: 'Raleway', sans-serif; +width: 100vh; +height: 100%; +} + +.header { + width: 100vw; + /* display: flex; + flex-direction: row; + align-items: flex-start; */ + justify-content: center; + gap: 50px; + margin-top: 100px; +} + + + +.image { + border-radius: 50%; + width: 200px; + margin-top: 1rem; + -webkit-box-shadow: 5px 5px 10px 5px #000000; + box-shadow: 5px 5px 10px 5px #000000; + transition: width 2s, height 2s, background-color 2s, transform 2s; + +} + +.header-text { + display: flex; + flex-direction: column; + line-height: 10px; + font-size: large; + color: #f5eeed; +} + +.header-text span { + color: white; + text-shadow: 4px 5px 8px rgba(0, 0, 0, 0.308); +} + +.image:hover { + transform: rotate(360deg); +} + +.container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; + grid-gap: 5px; + padding: 20px; + margin: 150px; + width: 80vw; + +} + +.repo-info p { + color: #000; +} + +.repo-link { + text-decoration: none; + +} + +a.repo-link{ + padding: 10px 20px; + border-radius: 10px; + background-color: rgba(255, 255, 255, 0.37); + color: rgb(141, 132, 132); +} + +.container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; + grid-gap: 5px; + padding: 20px; + margin: 150px; + width: 80vw; +} + +.technigo-repos { + display: flex; + flex-direction: column; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + margin-top: 10px; + margin-bottom: 30px; + padding: 20px; + align-items: center; + background-image: linear-gradient(120deg, #807474 0%, #ebedee 100%); + border-radius: 1rem; + min-width: 200px; + max-width: 400px; + width: 70%; + color: black; + gap: 0.5rem; +} + +.chart-container { + display: flex; + justify-content: center; + width: 600px; +} + + +/* -------------- media queries for mobile mode---------------*/ + +@media (max-width:667px) { + body { + background-repeat: no-repeat; + width: 100vw; + height: 100%; + margin: 0; + } + + .myDiv { + left: 0; + width: 100vw; + } + + .container { + width: 90vw; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 100px 0; + } + + .header { + + flex-direction: column; + margin-left: 20px; + color: #fff; + } + + .header img { + width: 100px; + margin-top: -80px; + + } + + .header-text { +/* line-height: 10px; */ +/* margin-top: 0px; */ + font-size: 100%; + line-height: 1px; + margin-top: -10px; + +} + +.chart-container { + width: 400px; + +} + +} + + +/* -------------- media queries for tablet mode---------------*/ + +@media (min-width:668px){ + body { + background-repeat: no-repeat; + width: 100vw; + height: 100%; + margin: 0; + } + + .myDiv { + left: 0; + width: 100vw;; + } + + .container { + width: 95vw; + display: flex; + flex-direction: row; + margin: 110px 0; + gap: 20px; + } + + .technigo-repos { + width: 90vw; + } + + .header-text { + color: #fff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .header-text { + line-height: 30px; + margin-top: -60px; + font-size: 120%; + + + } + + .header-text h1 { + line-height: 10px; + margin: 20px; + } + + .header p { + margin: 10px; + } + .chart-container { + width: 600px; + margin: 0 auto; + } + +} diff --git a/code/token.js b/code/token.js new file mode 100644 index 00000000..1f334ad5 --- /dev/null +++ b/code/token.js @@ -0,0 +1 @@ +const token = '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'; \ No newline at end of file