diff --git a/README.md b/README.md index 1613a3b0..497cebff 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # 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 assignment is to create a tracker for technigo repositories fetched from GitHub API. ## The problem +This week I have googled so much and stack overflow has really helped me alot with my problems. Lectures helped as well where I learnt about the github token and how to set commits to 0. -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? +If I had more time I would change the tooltip to instead have the name of the languages written out at the top of the projects to the right and I would add a search bar for projects. ## 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. +Netlify: https://week7-githubtracker-jenquach.netlify.app ( diff --git a/code/chart.js b/code/chart.js index 92e85a30..75076592 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,30 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const drawChart = () => { + const config = { + type: 'doughnut', + data: { + labels: [ + 'Finished projects', + 'Projects left', + ], + datasets: [{ + label: 'My First Dataset', + data: [5, 20-5], + backgroundColor: [ + '#3dabcc', + 'rgb(160,168,175)' + ], + hoverOffset: 4 + }], + }, + }; + +const myChart = new Chart(ctx, config) +} + // These labels appear in the legend and in the tooltips when hovering different arcs + + + \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..3a1b310a 100644 --- a/code/index.html +++ b/code/index.html @@ -6,15 +6,34 @@ Project GitHub Tracker + + -

GitHub Tracker

-

Projects:

-
+
+ +
+ + +
+ +
+
+

repositories

+
+ - - +
+ +
+
+ +
+
+ diff --git a/code/script.js b/code/script.js index e69de29b..6740d009 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,125 @@ +// //GLOBAL VARIABLES +// const options = { +// method: 'GET', +// headers: { +// Authorization: `token ****`, +// }, +// }; + + +const USER = 'jenquach' +const USER_URL = `https://api.github.com/users/${USER}` +const REPOS_URL = `https://api.github.com/users/${USER}/repos` + +const headerContainer = document.getElementById('topnav') +const profileContainer = document.getElementById('user-info') +const projectsContainer = document.getElementById('projects') +const pullRequests = document.getElementById('pullrequests') + +// function to fetch the user data from GitHub API +const userProfile = () => { + fetch(USER_URL) + .then(res => res.json()) + .then(data => { + profileContainer.innerHTML = ` +
+ +
+

${data.name}

+ ${data.login} +

${data.location}

+
+ ` + }) +} +// function to fetch the technigo repositories +const getRepositories = () => { + fetch(REPOS_URL) + .then(res => res.json()) + .then(data => { + // filtering the technigo repositories + const technigoRepositories = data.filter( + repo => repo.fork && repo.name.includes('project-') + ) + technigoRepositories.forEach(repo => { + projectsContainer.innerHTML += ` +
+
+ ${repo.name} +

Recent push ${new Date(repo.pushed_at).toLocaleString("sv-SE", {dateStyle: 'short'})}

+
+
+
+

${repo.default_branch}

+

+
+
+ ` + getLanguages(repo) + }) + // Draw chart with technigoRepositories data + drawChart(technigoRepositories.length) + getPullRequests(technigoRepositories) + }) +} + +// function to fetch all pull requests +const getPullRequests = (allRepositories) => { + allRepositories.forEach(repo => { + const myRepoName = repo.name + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` + fetch(PULL_URL) + .then(res => res.json()) + .then(data => { //data is the array of all pull requests + // Detect if we have pull request or not. + const myPullRequest = data.find( + pull => pull.user.login === repo.owner.login + ) + // If yes - call fetchCommits function + if (myPullRequest) { + getCommits(myPullRequest.commits_url, repo.name); + // If no - commits 0 is shown. + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + ' 0'; + } + }) + }) +} + +// function to fetch number of commits +const getCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl, ) + .then(res => res.json()) + .then(data => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + }) +} + +// function to fetch all the languages used in the repository +const getLanguages = (repo) => { + const languages_URL = `https://api.github.com/repos/${USER}/${repo.name}/languages` + fetch(languages_URL, ) + .then(res => res.json()) + .then(data => { + const html = data.HTML || 0; + const css = data.CSS || 0; + const js = data.JavaScript || 0; + const sum = html + css + js; + // calculates the percentage used of each language + const htmlPercentage = ((html / sum) * 100).toFixed(1); + const cssPercentage = ((css / sum) * 100).toFixed(1); + const jsPercentage = ((js / sum) * 100).toFixed(1); + + document.getElementById(`language-${repo.name}`).innerHTML = ` +
+
+
+ ` + }) +} + + +userProfile() +getRepositories() diff --git a/code/style.css b/code/style.css index 7c8ad447..1a3d886c 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,199 @@ +:root { + --bg-color: rgb(13,17,23); + --primary-color: rgb(160,168,175); +} + body { - background: #FFECE9; + font-family: Helvetica,Arial; + margin: 0; + padding: 0; + background-color: var(--bg-color); +} + +.topnav{ + width: 100%; + height: 100%; + background-color: rgb(22,27,34); + border: 2px solid transparent; + color: var(--primary-color); +} + +h1 { + font-size: 40px; + text-align: center; +} + +.user-info { + margin: 40px 0; +} + +.picture { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.user-picture { + width: 250px; + border-radius: 50%; + margin: 20px 0px; +} + +.user-information { + color: var(--primary-color); +} + +.user-information a { + text-decoration: none; + color: rgb(42, 78, 98); + font-weight: bold; + font-size: 20px; + text-align: left; +} + +.projects { + display: grid; + justify-content: center; +} + +.repo-title { + font-size: 25px; + font-weight: 400; + color: var(--primary-color); + margin: 0; + padding-left: 12px; +} + +.project { + display: flex; + justify-content: space-between; + border: 1px solid rgb(156, 155, 155); + color: var(--primary-color); + padding: 10px; + border-radius: 10px; + + width: 420px; + margin-top: 20px; +} + +p { + font-size: 18px; +} +.chart-container { + display: flex; + justify-content: center; + align-items: center; + margin-top: 30px; + text-align: center; +} + +.project a { + text-decoration: none; + color: rgb(42, 78, 98); + font-weight: bold; + font-size: 20px; + text-align: left; + margin-top: 10px; + margin-left: 10px; +} + +.language { + margin: 0; + margin-left: 10px; + padding: 5px o; +} +#branch { + border: 1px solid black; + border-radius: 25px; + margin-top: 10px; + padding: 6px; + margin-right: 10px; + line-height: 12px; + border-color: grey; +} + +.repo-info { + margin-top: 10px; +} + +.repo-details { + display: flex; + justify-content: flex-end; + align-items: baseline; +} + +.push { + font-style: italic; + text-align: left; + font-size: 16px; + margin-top: 10px; + margin-left: 10px; +} + +.progress { + display: flex; + width: 100%; + margin-left: 10px; + padding-bottom: 10px; +} + +.language-html { + height: 10px; + border-radius: 5px 0 0 5px; + background-color: #4a24f1; +} + +.language-css { + height: 10px; + background-color: #71ce71; +} + +.language-js { + height: 10px; + border-radius: 0 5px 5px 0; + background-color: #3dabcc; +} + +.chartdiv { + width: 400px; + margin: 40px 0; +} + +.line { + display: none; +} + +@media only screen and (min-width: 1200px) { + .wrapper { + display: flex; + justify-content: space-around; + } + + .projects { + grid-template-columns: auto auto; + grid-column-gap: 20px; + + } + + .repo-title { + padding-top: 55px; + } + + .projects :first-child { + grid-column: 1 / -1; + } + + .chartdiv { + margin: 0 + } + + .line { + display: block; + width: 90%; + height: 0.2px; + color: var(--primary-color); + margin: 80px auto; + text-align: right; + } } \ No newline at end of file