diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..2fc4260a Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 00000000..1c8fe91a --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "lior-chamla.google-fonts" + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..87993911 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,18 @@ # GitHub Tracker -Replace this readme with your own information about your project. +This week we learned +- How to debug Javascript +- More about how to use API's to fetch data +- More about how to get specific data from the JSON response +- Unit tests: What they are and how to run them +- Understand the role of Node & NPM for running javascript scripts -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +# The problem -## The problem +I had a hard time with JavaScript this week (and with styling). I also struggled with time management but have a project to hand in altough it´s not completly finnished, still have a grid layout for desktop & tablet to organize. +I used google, Stack Owerflow and YouTube this week as help and of course my team helped me a lot. -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://githubtracker-mariathomasson.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..96cba358 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..9aaf1452 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,25 @@ //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: ["Done", "Left"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 20-amount], + backgroundColor: [ + "#f687d7", + "#ffb55e", + ], + hoverOffset: 4, + }, + ], + }, + }; + + const myChart = new Chart(ctx, config); +}; \ No newline at end of file diff --git a/code/images/.DS_Store b/code/images/.DS_Store new file mode 100644 index 00000000..80cd1d49 Binary files /dev/null and b/code/images/.DS_Store differ diff --git a/code/images/GitHub-Mark-120px-plus.png b/code/images/GitHub-Mark-120px-plus.png new file mode 100644 index 00000000..ea6ff545 Binary files /dev/null and b/code/images/GitHub-Mark-120px-plus.png differ diff --git a/code/images/Octocat.png b/code/images/Octocat.png new file mode 100644 index 00000000..91057da4 Binary files /dev/null and b/code/images/Octocat.png differ diff --git a/code/images/language.png b/code/images/language.png new file mode 100644 index 00000000..222d8935 Binary files /dev/null and b/code/images/language.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..a3ea59d2 100644 --- a/code/index.html +++ b/code/index.html @@ -5,17 +5,43 @@ Project GitHub Tracker + + + + -

GitHub Tracker

-

Projects:

-
- - + + + + + +
+ + +
+ +
+
+
+
+
+ +
+ + +
+

Progress:

+ +
+ + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..c6d43e1f 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,90 @@ + //My API´s// + const USER = 'MariaThomasson'; + const REPOS_URL = `https://api.github.com/users/${USER}/repos`; + const USER_URL = `https://api.github.com/users/${USER}`; + + + //My variables// + const projectsContainer = document.getElementById('projects'); + const userData = document.getElementById('user-data') + + + //My GitHub Information// + const presentUserData = () => { + fetch(USER_URL) + .then((response) => { + return response.json(); + }) + .then((json) => { + console.log(json); + userData.innerHTML = + `
+ +

${json.name}

+

${json.login}

+

Location: ${json.location}

+ ` + }); + } + + //My Repositories// + const fetchRepositories = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + const technigoRepositories = data.filter( + (repo) => repo.name.includes('project-') && repo.fork + ); + + technigoRepositories.forEach((repo) => { + projectsContainer.innerHTML += + `
+

${repo.name}

+

GitHub repo

+

${repo.default_branch}

+

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

+

Commits:

+
`; + }); + + fetchPullRequestsArray(technigoRepositories); + + // Draw chart with technigoRepos data + drawChart(technigoRepositories.length); + }); + }; + + //My Pull Requests// + const fetchPullRequestsArray = (allRepositories) => { + allRepositories.forEach((repo) => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + + fetch(PULL_URL) + .then((res) => res.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login); + + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'Group project.'; + } + console.log(myPullRequest) + }); + }); + }; + +//My Commits// + const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); + }; + + +fetchRepositories(); +presentUserData() \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..7595aa2f 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,204 @@ +* { + box-sizing: border-box; + +} + + body { - background: #FFECE9; + background: linear-gradient(0deg, #ffb55e 0%, #f687d7 100%); + padding: 50px; + font-family: 'Cardo', serif; + text-align: center; + justify-content: center; +} + + +.navigation-bar { + width: 100%; + height: 80px; + margin-bottom: 50px; + + +} + + +.logo { + display: inline-block; + vertical-align: top; + width: 50px; + height: 50px; + margin-top: 15px; +} + +.navigation-bar > a { + vertical-align: text-top; + margin-right: 20px; + height: 80px; + line-height: 80px; + display: grid; + margin: 0 auto; + align-items: center; + justify-content: center; + +} + +h1, h2, h3, a { + font-family: 'Oswald', sans-serif; + text-transform: uppercase; + +} + +a, u { + text-decoration: none; + color: black; +} + +.avatar { + border-radius: 50%; + +} + +.languages { + width: 150px; + justify-content: center; + +} + +.top-section{ +display: grid; +margin: 0 auto; +align-items: center; + +} + +.my-info { + grid-area: grid; + grid-template-columns: 1fr; + gap: 20px; + padding: 20px; + margin: 20px; + box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); + border-radius: 5px; + backdrop-filter: blur(5px); + border-radius: 25px; + +} + +.projects { + display: grid; + grid-template-columns: 1fr; + gap: 20px; + +} + +.project-box { + padding: 20px; + box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); + border-radius: 5px; + backdrop-filter: blur(5px); + border-radius: 25px; + text-align: center; + margin: 10px; + grid-auto-flow: column; + flex-wrap: wrap; + +} + +.myChart { + max-width: 500px; + max-height: 500px; + padding: 10px; + margin: 20px; + box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); + backdrop-filter: blur(5px); + border-radius: 25px; + display: grid; + margin: 0, auto; + align-items: center; +} + +.chart-section { + display: grid; + gap: 20px; + margin: 0 auto; + align-items: center; + justify-content: center; +} + +/* mobile */ + @media (min-width: 0px) and (max-width: 668px){ + .navigation-bar > a { + display: grid; + margin: 0 auto; + align-items: center; + justify-content: center; + + } + + .avatar { + width: 150px; + } + + .my-info { + flex-direction: column; + + } + + .projects { + flex-direction: column; + } + + .myChart { + flex-direction: column; + } + +} + + /* tablet */ + @media (min-width: 669px) and (max-width: 1024px){ + .avatar { + width: 200px; + } + + .my-info { + grid-template-columns: 1fr; + gap: 20px; + } + + .projects { + grid-template-columns: repeat(2, 1fr); + gap: 20px; + } + + .myChart { + flex-direction: column; + + } + + } + + + /* desktop */ + @media (min-width: 1025px){ + + .avatar { + width: 300px; + + } + + .my-info { + grid-template-columns: 1fr; + gap: 20px; + } + + .projects { + grid-template-columns: repeat(4, 1fr); + gap: 20px; + } + + .myChart { + flex-direction: column; + + } + } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..1473d3ae --- /dev/null +++ b/package-lock.json @@ -0,0 +1,11 @@ +{ + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "@fortawesome/fontawesome-free": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", + "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==" + } + } +}