diff --git a/README.md b/README.md index 1613a3b0..c9c5c88d 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. +Github tracker project - This projects purpose is to show my accomplishments during the bootcamp. Every finished project will be documented in a graph(with the design of a doughnut). ## 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? +Every week has been a struggle for me, due to personal obsticles. I spent a lot of time at hospital, have moved two times, and personal matters. My focus is doing one thing at the time, and catch up with every criteria for each project to finish everything. ## 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://jessicas-github-tracker.netlify.app/ diff --git a/code/Todo.txt b/code/Todo.txt new file mode 100644 index 00000000..20175c01 --- /dev/null +++ b/code/Todo.txt @@ -0,0 +1,7 @@ +To do: + +1) Fetch the repos and console.log them +2) get them in the browser +3) filter out the Technigo repos, so only Technigo is shown +4) test chart-library +5) learn tgo make a token.js \ No newline at end of file diff --git a/code/chart.js b/code/chart.js index 92e85a30..7503fb43 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,28 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('myChart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (amount) => { + const config = { + type: "doughnut", + data: { + labels: ["Completed projects", "Remaining projects"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 20-amount], + backgroundColor: [ + "rgb(255, 192, 203)", + "rgb(135,190,231)", + ], + hoverOffset: 4, + }, + ], + }, + }; + + const myChart = new Chart(ctx, config); + }; + + + diff --git a/code/index.html b/code/index.html index 2fb5e0ae..7e048b94 100644 --- a/code/index.html +++ b/code/index.html @@ -5,17 +5,26 @@ Project GitHub Tracker + -

GitHub Tracker

-

Projects:

-
+
+

My GitHub-Tracker

+

This site displays my projects from GitHub, and updates whenever I complete a new project

+
+
+
+

Projects:

+
+
- - - - +
+ +
+ + + \ No newline at end of file diff --git a/code/package-lock.json b/code/package-lock.json new file mode 100644 index 00000000..48e341a0 --- /dev/null +++ b/code/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +} diff --git a/code/script.js b/code/script.js index e69de29b..9bf1823c 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,80 @@ +const USER = 'JessicaNordahl'; +const USER_URL = `https://api.github.com/users/${USER}` +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; + +const projectsContainer = document.getElementById('projects'); +const profileContainer = document.getElementById('profile-container') + +const userProfile = () => { + fetch(USER_URL) + .then((res) => res.json()) + .then((data) => { + profileContainer.innerHTML+= /*html*/` +
+
+ Profile Picture of User +
+
+
GitHub username: ${data.login}
+
Name: ${data.name}
+
+
+
+

${data.bio}

+
` + }); +}; +userProfile() + +const fetchRepositories = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + const myTechnigo = data.filter((repo => + repo.name.includes("project-") && + repo.fork) + ); + + myTechnigo.forEach((repo => { + projectsContainer.innerHTML += /*html*/` +
+ ${repo.name} with default branch ${repo.default_branch} +

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

+

Commits amount:

+
+ `; + })); +fetchPullRequests(myTechnigo); +drawChart(myTechnigo.length); + }); +}; + +const fetchPullRequests = (allRepositories) => /*html*/{ +console.log('allRepositories', allRepositories); + allRepositories.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then((res) => res.json ()) + .then((data) => { + const myPullRequest = data.find(pull => pull.user.login===repo.owner.login + ); + +fetchCommits(myPullRequest.commits_url, repo.name); + }); + }); +}; + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json ()) + .then(data => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); + console.log(fetchCommits) +}; + +fetchRepositories(); + + + + + diff --git a/code/style.css b/code/style.css index 7c8ad447..88625fa0 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,76 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: #caffed; +} + +.projectsContainer { + width: 90%; + display: flex; + flex-direction: column; + margin: 0 auto; +} + +.profile-card { + display: flex; + flex-direction: row; + align-items: center; + max-width: 500px; + margin: 20px auto 40px auto; +} + +.profile-photo { + width:30%; +} + +.profile-photo img{ + width: 100%; + border-radius: 50%; + border: 2px solid black; +} + +.profile-username{ + width: 50%; + margin-left: 25px; + box-shadow: 2px 2px 4px; +} + +.user-name { + margin: 10px; + padding: 10px; + border-bottom: 3px solid rgb(93, 208, 243); +} + +.real-name { + margin: 10px; + padding: 10px; +} + +.doughnut { + width: 50%; + height: 50%; + padding: 75px; +} + +p { +display: block; +margin-block-start: 1em; +margin-block-end: 1em; +margin-inline-start: 0px; +margin-inline-end: 0px; +} + +.repos { +display: grid; +grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +gap: 1rem; +border: 1px solid; +padding: 5px 5px 5px 5px; +} + + + + + + + + + diff --git a/code/token.js b/code/token.js new file mode 100644 index 00000000..e69de29b