diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..5282ce4a --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ + +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..783f2223 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 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 project was to build a website that keept track on my info on github :) ## 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? +This week i had alot of problems with the code, all kinds of error and more more, i had help from my my team Foxes to fix the problem :) ## 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. + +Here u can se my page live -----> https://github-trackar.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..c4629782 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,20 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (amount) => { + const configchart = { + type: 'doughnut', + data: { + labels: ['Complete', 'Not Complete'], + datasets: [ + { + label: 'Technigo projects rate ', + data: [amount, 19 - amount], + backgroundColor: ['#77E327', '#E33527'], + hoverOffset: 3, + }, + ], + }, + } + const myProjects = new Chart(ctx, configchart) +} diff --git a/code/github.png b/code/github.png new file mode 100644 index 00000000..1f67c1d0 Binary files /dev/null and b/code/github.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..8b7e76dc 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 + + + + + + + +
+

+ GitHub Tracker + logo +

+
+
+
+ +
+ +
+ + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..9193a4dc 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,108 @@ +// GITHUB API +const username = 'Kyparn' +const API_USER = `https://api.github.com/users/${username}` +const API_REPO = `https://api.github.com/users/${username}/repos` +const projects = document.getElementById('projects') +const personData = document.getElementById('personData') + +//token +const api_Token = apiToken || process.API_KEY + +const options = { + method: 'GET', + headers: { + Authorization: `${apiToken}`, + }, +} + +//Prints out the user info in the HTML + +const getUserData = () => { + fetch(API_USER) + .then((res) => res.json()) + .then((user) => { + personData.innerHTML = ` +
+ +

${user.name}

+

${user.location}

+

${user.bio}

+
` + }) +} +getUserData() + +// Function to fetch my repositories + +const getRepos = () => { + fetch(API_REPO, options) + .then((res) => res.json()) + .then((data) => { + // This function filters out my projects from technigo + + const repos = data.filter( + (repo) => repo.fork && repo.name.startsWith('project-'), + ) + + repos.forEach((repo) => { + //Her we create a unique ID for each of my forked repos and print them in the HTML + let projectID = repo.id + + projects.innerHTML += ` +
+ logo +

Project name: + ${repo.name.replace('project-', '').replace('-', ' ')} +

+

+

${new Date(repo.pushed_at).toDateString()}

+

Branch : ${repo.default_branch}

+

Repository ${repo.name}

+

+

+ Pull requests:

+ +
` + + // Invoking function to get the number of commits for the projects + getCommits(repo, projectID) + }) + getPullRequest(repos) + drawChart(repos.length) + }) +} +// This function +const getPullRequest = (repos) => { + repos.forEach((repo) => { + fetch( + `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, + options, + ) + .then((res) => res.json()) + .then((data) => { + //Filter out my pullrequests + const pulls = data.find((pull) => pull.user.login === repo.owner.login) + const myPullRequests = data.filter((pullRequest) => { + return pullRequest.user.login === username + }) + document.getElementById( + `pull-request-${repo.name}`, + ).innerHTML = `Pull Request: ${myPullRequests.length}` + }) + }) +} +// Function to get commits and print them out +const getCommits = (projects, projectID) => { + const GIT_COMMIT_API = projects.commits_url.replace('{/sha}', '') + fetch(GIT_COMMIT_API, options) + .then((res) => res.json()) + .then((data) => { + let numberOfCommits = data.length + document.getElementById(projectID).innerHTML += ` +

Number of commits: ${numberOfCommits}

` + }) +} + +getRepos() diff --git a/code/style.css b/code/style.css index 7c8ad447..3eb925b1 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,119 @@ +* { + padding: 0; + margin: 0; +} + body { - background: #FFECE9; -} \ No newline at end of file + animation: 10000ms ease-in-out infinite color-change; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + min-height: 100vh; +} +header { + padding: 50px; + text-align: center; + justify-content: center; +} + +footer { + background: linear-gradient(250deg, #191b1b, #736bc7, #3a09b5) fixed; + text-align: center; + padding: 50px; +} +.info { + text-align: center; +} +.userInfo { + padding: 10px; +} +.img { + margin: 20px; + border-radius: 250px; + width: 300px; + box-shadow: 1px 1px 5px black; +} +.personData { + justify-items: center; + display: grid; +} +.repoInfo { + box-shadow: 1px 1px 5px black; + background: linear-gradient(150deg, #191b1b, #736bc7, #3a09b5) fixed; + padding: 20px; + border-radius: 20px; + border: 1px black solid; + margin: 20px; + justify-items: center; + display: grid; +} +.cardInfo { + text-transform: uppercase; + font-size: 13px; + line-height: 20px; +} + +.chart { + aspect-ratio: 1 / 1; + margin: 0 auto; + max-height: 250px; + max-width: 250px; + padding: 25px; +} +.projects { + display: grid; + grid-template-columns: 1fr; +} +@keyframes color-change { + 0% { + background-color: rgb(7, 41, 152); + } + 10% { + background-color: rgb(65, 32, 153); + } + 20% { + background-color: rgb(142, 120, 240); + } + 30% { + background-color: rgb(176, 151, 235); + } + 40% { + background-color: rgb(149, 157, 233); + } + 50% { + background-color: rgb(172, 169, 232); + } + 60% { + background-color: rgb(149, 157, 233); + } + 70% { + background-color: rgb(176, 151, 235); + } + 80% { + background-color: rgb(142, 120, 240); + } + 90% { + background-color: rgb(65, 32, 153); + } + 100% { + background-color: rgb(7, 41, 152); + } +} +@media (min-width: 668px) { + .repoInfo { + justify-items: center; + display: grid; + } + + .personData { + justify-items: center; + display: grid; + } + .projects { + grid-template-columns: 1fr 1fr; + } + .cardInfo { + font-size: 16px; + padding: 5px; + } +}