diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index e8783bfe..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5505 -} \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..d7fd20e8 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,10 @@ # GitHub Tracker -Replace this readme with your own information about your project. +A simple copy of GitHub. With that project I learned how to fetch an API, how JavaScript functions communicate with each others and how to display data from API. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +UPDATE 2.0 +For this update of ther project, I added a search functionality. -## The problem +# View it live -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. +Demo: https://github-tracker-by-darya.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..8dfb8629 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,19 @@ -//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 = (number) => { + const config = { + type: 'doughnut', + data: { + labels: ['Done', 'Todo'], + datasets: [ + { + label: 'My first Dataset', + data: [number, 20 - number], // divide donut to 2 different parts + backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)'], + hoverOffset: 4, + }, + ], + }, + }; + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..4078fe5a 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,53 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

SOME FANCY STATS

+
+ +
+
+
+
+
- - - - \ No newline at end of file + + + + diff --git a/code/script.js b/code/script.js index e69de29b..550a42e5 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,97 @@ +// main fetch and function and put the DOM here +const projectsContainer = document.getElementById('projects'); +const headerContainer = document.getElementById('header'); +const USER = 'DALA746'; +const ALL_MY_REPOS = `https://api.github.com/users/${USER}/repos`; + +const button = document.getElementById('button'); + +const searchProject = () => { + let input = document.getElementById('searchbar').value; + input = input.toLowerCase(); + let repo = document.getElementsByClassName('repo'); + + for (i = 0; i < repo.length; i++) { + if (!repo[i].innerHTML.toLowerCase().includes(input)) { + repo[i].style.display = 'none'; + } else { + repo[i].style.display = 'block'; + } + } +}; + +const renderHTML = (repos) => { + console.log(repos); + repos.forEach((repo) => { + headerContainer.innerHTML = ` +
+ +
+

${repo.owner.login}

+
SOME STATS
+ + `; + projectsContainer.innerHTML += ` +
+

${ + repo.name + }

 +

Commits amount:

+

Language: ${repo.language}

+

Latest push update: ${new Date( + repo.pushed_at + ).toDateString()}

+

Default branch: ${repo.default_branch}

+
+ `; + }); +}; + +const getRepos = () => { + fetch(ALL_MY_REPOS) + .then((res) => res.json()) + .then((json) => { + console.log(json); + const forkedRepos = json.filter( + (repo) => repo.fork && repo.name.startsWith('project-') + ); + drawChart(forkedRepos.length); + renderHTML(forkedRepos); + // getPullRequests(forkedRepos); + }); +}; + +getRepos(); + +// GETTING ALL MY PULL REQUESTS +// const getPullRequests = (forkedRepos) => { +// forkedRepos.forEach((repo) => { +// fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`) +// .then((res) => res.json()) +// .then((data) => { +// console.log(data); +// const myPullRequests = data.find( +// (pull) => pull.user.login === repo.owner.login +// ); +// console.log(myPullRequests, 'data'); +// getCommits(myPullRequests.commits_url, repo.name); +// }); +// }); +// }; + +const getCommits = (url, myRepoName) => { + fetch(url) + .then((res) => res.json()) + .then((data) => { + const numberOfCommits = data.length; + document.getElementById(`commit-${myRepoName}`).innerHTML += + numberOfCommits; + }); +}; + +button.addEventListener('click', (e) => { + e.preventDefault(); + searchProject(); +}); diff --git a/code/style.css b/code/style.css index 7c8ad447..9561c5e6 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,171 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic'); +* { + box-sizing: border-box; +} + +:root { + --dark: #161b22; + --darker: #0d1117; + --white: #fafafa; + --light-grey: #c9d1d9; + --grey: #8b949e; + --blue: #58a6ff; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: var(--darker); + color: var(--grey); + font-family: 'Montserrat'; + margin: 0; +} + +p { + font-size: 16px; +} + +a { + color: var(--blue); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +.bold { + font-weight: 700; +} + +/* navbar */ +.topnav { + overflow: hidden; + background-color: var(--dark); + padding: 10px 30px; + display: flex; + flex-direction: column; + gap: 10px; +} + +.logo-container { + display: flex; + gap: 15px; +} + +.input-container { + display: flex; + width: 100%; + max-width: 250px; + margin: 10px auto; +} + +input { + width: 100%; + border-radius: 10px 0 0 10px; + border: none; +} + +button { + border-radius: 0 10px 10px 0; + border: none; + background-color: var(--light-grey); +} + +input, +button { + padding: 10px; +} + +.statistics-container { + padding: 15px; + display: flex; + flex-direction: column; + max-width: 1500px; + margin: 0 auto; +} + +.user-information { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 30px; +} + +.info-about-user { + display: flex; + flex-direction: column; + align-items: start; +} + +.profile-img { + width: 200px; + border-radius: 50%; + margin: 10px; +} + +.project-container { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; +} + +.stats-and-project-wrapper { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; + gap: 30px; +} + +.repo { + border: 1px solid var(--grey); + border-radius: 5px; + padding: 10px; + width: 100%; + max-width: 491px; +} + +.doughnut { + width: 100%; +} + +.logo-img { + height: 30px; +} + +.icon-container { + display: flex; + align-items: center; + gap: 18px; +} + +.chart-container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +@media screen and (min-width: 610px) { + .topnav { + flex-direction: row; + justify-content: space-between; + } + + .input-container { + display: flex; + align-items: center; + margin: 0; + } +} + +@media screen and (min-width: 768px) { +} + +@media screen and (min-width: 1115px) { + .statistics-container { + flex-direction: row; + align-items: start; + } +}