From b9e1b9a0486901066a33dfa0d11dfd4b56da05fb Mon Sep 17 00:00:00 2001 From: Skrosen <76884712+Skrosen@users.noreply.github.com> Date: Wed, 29 Sep 2021 19:11:29 +0200 Subject: [PATCH 1/5] started the project, added all information required on blue level in script.js, added chart in chart.js, added aside in html and started adding and styling classes in style.css --- code/chart.js | 64 +++++++++++++++++++++++++++ code/index.html | 7 ++- code/script.js | 112 ++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 46 ++++++++++++++++++++ 4 files changed, 227 insertions(+), 2 deletions(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..1066baa3 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,67 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const repoChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: [ + 'Projects done', + 'Projects left', + //'Blue' + ], + datasets: [{ + label: 'My Projects', + data: [amount, 19-amount], + backgroundColor: [ + 'rgb(255, 99, 132)', + 'rgb(255, 205, 86)', + //'rgb(54, 162, 235)' + ], + hoverOffset: 4 + }] + }, + }; + const repositoryChart = new Chart(ctx, config); +} + + +// const repoChart = new Chart(ctx, config); + +// const delayed +// new Chart(ctx,) = { +// type: 'bar', +// data: { +// labels, +// datasets: [ +// { +// data, +// backgroundColor: ['#d5a7b6', '#5c7fe9'], +// }, +// ], +// }, +// options: { +// animation: { +// onComplete: () => { +// delayed = true; +// }, +// delay: (context) => { +// let delay = 0; +// if (context.type === 'data' && context.mode === 'default' && !delayed) { +// delay = context.dataIndex * 300 + context.datasetIndex * 100; +// } +// return delay; +// }, +// }, +// scales: { +// x: { +// stacked: true, +// }, +// y: { +// stacked: true +// } +// } +// } +// } +// } //denna tillhör \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..79735e64 100644 --- a/code/index.html +++ b/code/index.html @@ -6,14 +6,17 @@ Project GitHub Tracker +

GitHub Tracker

+ +

Projects:

-
+
- + diff --git a/code/script.js b/code/script.js index e69de29b..d340f0db 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,112 @@ +const repoContainer = document.getElementById('projects') +const projectInfo = document.getElementById('profile-info') + +const USER = 'Skrosen' +const USER_INFO = `https://api.github.com/users/${USER}` +const USER_REPOS = `https://api.github.com/users/${USER}/repos` + +const profileInfo = () => { + fetch(USER_INFO) + .then(res => res.json()) + .then(userProfile => { + // console.log('profilinfo:', userProfile) + projectInfo.innerHTML += /* html */` +
+ Profile picture +

${userProfile.name}


+

${userProfile.login}

+
+ ` + }) +} +profileInfo() + +const getRepos = () => { + fetch(USER_REPOS) + .then(res => res.json()) + .then(repos => { + // console.log('repositories:', repos) + + const forkedRepos = repos.filter (repo => repo.fork && repo.name.startsWith('project-')) + // can use .includes instead of startsWith + // repo.fork är samma som repo.fork === true + forkedRepos.forEach(repo => console.log(repo.name)) + forkedRepos.forEach(repo => {repoContainer.innerHTML += /* html */ ` +
+

${repo.name} (default branch ${repo.default_branch})

+

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

+

Number of commits:

+
+ ` + }) + fetchPullRequest(forkedRepos) + repoChart(forkedRepos.length) + }) +} + +const fetchPullRequest = (allRepositories) => { + allRepositories.forEach((repo) => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then(res => res.json()) + .then((info) => { + // console.log(`Mother repo for pull request ${repo.name}`, info) + //find instead of filter because filter will keep in array even if only one element + const myPullRequest = info.find( + (pull) => pull.user.login === repo.owner.login + ) + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name) + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No commits yet :(' + } + }) + }) +} + +const fetchCommits = (myCommitsUrl, repo) => { + fetch(myCommitsUrl) + .then(res => res.json()) + .then((info) => { + document.getElementById(`commit-${repo}`).innerHTML += info.length + }) +} +getRepos() + +// To get the comments from a PR, you need to get the URL from the review_comments_url property in the PR json object. +// It might look something like this: https://api.github.com/repos/Technigo/project-news-site/pulls/247/comments +// and then do a fetch with that url. + +// To get the commits from a PR, you need to get the URL from the commits_url property in the PR json object. It might look something like this: +// https://api.github.com/repos/Technigo/project-news-site/pulls/227/commits +// and then do a fetch with that url. + + + +// ### **🔵 Blue Level (Minimum Requirements)** + +// Your page should include: + +// - A list of all repos that are forked from Technigo +// - Your username and profile picture +// - Most recent update (push) for each repo +// - Name of your default branch for each repo +// - URL to the actual GitHub repo +// - Number of commits for each repo +// - It should be responsive (mobile first) +// - A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do +// (in total it will be 19 weekly projects 🥳) using [Chart.js](https://www.chartjs.org/). + +// ### **🔴 Red Level (Intermediary Goals)** + +// - Sort your list in different ways. +// **Example of what you can sort by:** creation date, name, most commits, followers or stargazers +// - Create the opportunity to filter the repos based on a condition, e.g. only JavaScript repos +// - Display the actual commit messages for each repo in a good way. Maybe by adding a modal (popup) or an accordion? +// - Display the comments you got from each pull request +// - When you're browsing through the repo object, you'll see that there's a lot of data that we can use. Create a chart over some of the data. +// **Example of data to use:** Repo size, people that starred your repo (stargazers) or amount of commits on each repo. + +// ### **⚫ Black Level (Advanced Goals)** + +// - Implement a search field to find a specific repo based on name \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..0b7e6457 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,49 @@ +/* mobile first styling */ body { background: #FFECE9; + display: grid; +} + +.profile { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1rem; + padding: 0.5rem; + margin: 2rem; +} + +.profile-div { + grid-column: span 4; + display: flex; + align-items: center; + margin: auto; + justify-content: space-around; +} + +.profile-img { + width: 50%; + height: inherit; + border-radius: 50%; +} + +.project-container { + +} + +.repo-div { + +} + +.repo-chart { + +} + +/* styling for tablet */ +@media min max { + +} + +/* styling for desktop */ +@media min { + } \ No newline at end of file From 35dcc7e662f9aa11226891673e11c4551427150f Mon Sep 17 00:00:00 2001 From: Skrosen <76884712+Skrosen@users.noreply.github.com> Date: Fri, 1 Oct 2021 13:54:08 +0200 Subject: [PATCH 2/5] added styling for profile aside, styled divs for repos, styled piechart, added header with github logo --- code/chart.js | 10 ++--- code/index.html | 18 +++++++-- code/script.js | 15 ++++---- code/style.css | 99 +++++++++++++++++++++++++++++++++++++++++-------- 4 files changed, 112 insertions(+), 30 deletions(-) diff --git a/code/chart.js b/code/chart.js index 1066baa3..d91cdf7b 100644 --- a/code/chart.js +++ b/code/chart.js @@ -5,7 +5,7 @@ const ctx = document.getElementById('chart').getContext('2d') const repoChart = (amount) => { const config = { - type: 'doughnut', + type: 'pie', data: { labels: [ 'Projects done', @@ -13,12 +13,12 @@ const repoChart = (amount) => { //'Blue' ], datasets: [{ - label: 'My Projects', + // label: 'My Projects', data: [amount, 19-amount], backgroundColor: [ - 'rgb(255, 99, 132)', - 'rgb(255, 205, 86)', - //'rgb(54, 162, 235)' + 'rgb(63, 185, 79)', + '#161b22', + // 'rgb(88, 166, 255)', ], hoverOffset: 4 }] diff --git a/code/index.html b/code/index.html index 79735e64..8b1f116c 100644 --- a/code/index.html +++ b/code/index.html @@ -7,16 +7,28 @@ Project GitHub Tracker + -

GitHub Tracker

+
+ +
+ -

Projects:

+

Technigo repositories:

- +
+ +
+ diff --git a/code/script.js b/code/script.js index d340f0db..dee3873c 100644 --- a/code/script.js +++ b/code/script.js @@ -11,11 +11,11 @@ const profileInfo = () => { .then(userProfile => { // console.log('profilinfo:', userProfile) projectInfo.innerHTML += /* html */` -
Profile picture -

${userProfile.name}


-

${userProfile.login}

-
+
+

${userProfile.name}

 + +
` }) } @@ -33,9 +33,10 @@ const getRepos = () => { forkedRepos.forEach(repo => console.log(repo.name)) forkedRepos.forEach(repo => {repoContainer.innerHTML += /* html */ `
-

${repo.name} (default branch ${repo.default_branch})

-

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

-

Number of commits:

+ ${repo.name} +

Default branch: ${repo.default_branch}

+

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

+

Number of commits:

` }) diff --git a/code/style.css b/code/style.css index 0b7e6457..f33b3a3a 100644 --- a/code/style.css +++ b/code/style.css @@ -1,49 +1,118 @@ /* mobile first styling */ body { - background: #FFECE9; + background: #161b22; display: grid; + color: #f0f6fc; + /* har inte importerat något i hmtl, behövs inte det? */ + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; +} + +header { + background: #161b22; + margin: auto; + padding: 0.5rem; +} + +header a { + color: #f0f6fc; +} + +header a:hover { + color: #30363d; } .profile { display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - padding: 0.5rem; - margin: 2rem; + grid-template-columns: repeat(6, 1fr); + align-items: center; +} + +.profile-img { + display: inline-flex; + grid-column: span 1; + width: 100%; + border-radius: 50%; + border-style: solid; + border-color: #30363d; + border-width: 0.1rem; + margin: 0.5rem; } .profile-div { + display: inline; + align-items: center; grid-column: span 4; + padding: 2rem; +} + +.profile-div a{ + text-decoration: none; +} + +.username { display: flex; - align-items: center; + color: #f0f6fc; + font-size: x-large; margin: auto; - justify-content: space-around; } -.profile-img { - width: 50%; - height: inherit; - border-radius: 50%; +.login { + display: flex; + color: #8B949E; + font-size: large; + margin: auto; } .project-container { - + display: grid; + grid-template-columns: repeat(4, 1fr); } .repo-div { + display: grid; + grid-column: span 5; + color: #8B949E; + margin: 0.5rem; + padding: 0.5rem; + border-radius: 5px; + border-width: 0.1rem; + border-color: #30363d; + border-style: solid; +} +.repo-a { + color: #388bfd; + text-decoration: none; + padding-bottom: 0.5rem; } -.repo-chart { +.repo-p { + margin: 0px; +} +.repo-chart { + display: inline-flex; + align-items: center; + width: 20em; } /* styling for tablet */ -@media min max { +@media (min-width:668px) and (max-width:1024px) { + body { + background: #0d1117; + } + + header { + visibility: visible; + } } /* styling for desktop */ -@media min { +@media (min-width:1025px) { + body { + + } + } \ No newline at end of file From 60efb6f99829595371767c28aff272081eefc66f Mon Sep 17 00:00:00 2001 From: Skrosen <76884712+Skrosen@users.noreply.github.com> Date: Fri, 1 Oct 2021 17:36:45 +0200 Subject: [PATCH 3/5] moved files to first folder instead of code folder to depoly on netlify --- .DS_Store | Bin 0 -> 6148 bytes code/chart.js => chart.js | 0 code/index.html => index.html | 0 code/script.js => script.js | 0 code/style.css => style.css | 0 5 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 .DS_Store rename code/chart.js => chart.js (100%) rename code/index.html => index.html (100%) rename code/script.js => script.js (100%) rename code/style.css => style.css (100%) diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 Date: Sat, 2 Oct 2021 17:34:27 +0200 Subject: [PATCH 4/5] added styling for tablet and desktop, made header in tablet and desktop span the whole page --- chart.js | 6 ++--- index.html | 10 ++++---- script.js | 10 +++++--- style.css | 74 ++++++++++++++++++++++++++++++++++++++++++++++-------- 4 files changed, 78 insertions(+), 22 deletions(-) diff --git a/chart.js b/chart.js index d91cdf7b..2e2f9e43 100644 --- a/chart.js +++ b/chart.js @@ -5,7 +5,7 @@ const ctx = document.getElementById('chart').getContext('2d') const repoChart = (amount) => { const config = { - type: 'pie', + type: 'bar', data: { labels: [ 'Projects done', @@ -13,11 +13,11 @@ const repoChart = (amount) => { //'Blue' ], datasets: [{ - // label: 'My Projects', + label: 'Technigo projects', data: [amount, 19-amount], backgroundColor: [ 'rgb(63, 185, 79)', - '#161b22', + '#8B949E', // 'rgb(88, 166, 255)', ], hoverOffset: 4 diff --git a/index.html b/index.html index 8b1f116c..e15c9344 100644 --- a/index.html +++ b/index.html @@ -20,16 +20,16 @@ - -

Technigo repositories:

-
- -
+ +
+

Technigo repositories:

+
+
diff --git a/script.js b/script.js index dee3873c..864fa754 100644 --- a/script.js +++ b/script.js @@ -25,12 +25,13 @@ const getRepos = () => { fetch(USER_REPOS) .then(res => res.json()) .then(repos => { - // console.log('repositories:', repos) + console.log('repositories:', repos) const forkedRepos = repos.filter (repo => repo.fork && repo.name.startsWith('project-')) + // can use .includes instead of startsWith // repo.fork är samma som repo.fork === true - forkedRepos.forEach(repo => console.log(repo.name)) + // forkedRepos.forEach(repo => console.log(repo.name)) forkedRepos.forEach(repo => {repoContainer.innerHTML += /* html */ `
${repo.name} @@ -58,8 +59,9 @@ const fetchPullRequest = (allRepositories) => { if (myPullRequest) { fetchCommits(myPullRequest.commits_url, repo.name) } else { - document.getElementById(`commit-${repo.name}`).innerHTML = - 'No commits yet :(' + document.getElementById(`commit-${repo.name}`).innerHTML = /* html */ ` + No pulls from this user yet 🚫 + ` } }) }) diff --git a/style.css b/style.css index f33b3a3a..5b836240 100644 --- a/style.css +++ b/style.css @@ -9,8 +9,15 @@ body { header { background: #161b22; - margin: auto; + margin-left: -1rem; + margin-right: -1rem; + margin-top: -0.5rem; padding: 0.5rem; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + min-width: 100%; } header a { @@ -41,7 +48,7 @@ header a:hover { .profile-div { display: inline; align-items: center; - grid-column: span 4; + grid-column: span 5; padding: 2rem; } @@ -56,6 +63,10 @@ header a:hover { margin: auto; } +.username:hover { + color: #30363d; +} + .login { display: flex; color: #8B949E; @@ -63,17 +74,37 @@ header a:hover { margin: auto; } +.login:hover { + color: #30363d; +} + +.repo-chart { + display: flex; + width: 20rem; + margin: 1rem; +} + .project-container { display: grid; grid-template-columns: repeat(4, 1fr); + margin: 0.5rem; +} + +.project-container h2 { + grid-column: span 4; + display: flex; + color: #8B949E; + font-size: large; + margin-bottom: 0.5rem; + justify-content: center; } .repo-div { display: grid; - grid-column: span 5; + grid-column: span 4; color: #8B949E; - margin: 0.5rem; padding: 0.5rem; + margin: 0.5rem; border-radius: 5px; border-width: 0.1rem; border-color: #30363d; @@ -90,22 +121,37 @@ header a:hover { margin: 0px; } -.repo-chart { - display: inline-flex; - align-items: center; - width: 20em; -} /* styling for tablet */ -@media (min-width:668px) and (max-width:1024px) { +@media (min-width:668px) { body { background: #0d1117; + grid-template-columns: repeat(4, 1fr); } header { visibility: visible; + grid-column: span 4; } + .profile { + grid-column: span 3; + } + + .repo-chart { + grid-column: span 1; + } + + .project-container { + grid-column: span 4; + grid-template-columns: repeat(4, 1fr); + } + + .repo-div { + grid-column: span 2; + } + + } /* styling for desktop */ @@ -114,5 +160,13 @@ header a:hover { } + header { + + } + + + .project-container { + grid-column: span 4; + } } \ No newline at end of file From 3b990b4b56e23911e63b89de4aba2affd72b01d0 Mon Sep 17 00:00:00 2001 From: Skrosen <76884712+Skrosen@users.noreply.github.com> Date: Sun, 3 Oct 2021 22:32:48 +0200 Subject: [PATCH 5/5] updated README and cleaned out the code, also commented the code a bit more --- README.md | 8 +++----- chart.js | 49 +++---------------------------------------------- index.html | 1 - script.js | 50 +++++--------------------------------------------- style.css | 15 +-------------- 5 files changed, 12 insertions(+), 111 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..a4b9868a 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 assignment was to create a GitHub tracker using API's from GitHub to display information about forked projects done during Technigo Boot Camp. ## 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? +I started working with the blue requirements and after I had completed the tasks on blue level I continued working on the styling in CSS to make the page look like GitHub. However, if I had more time I would work more with getting the page more similar to GitHub and also adding some of the red and black requirements. ## 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://linneawilhelmsson-week7-github-tracker.netlify.app/ \ No newline at end of file diff --git a/chart.js b/chart.js index 2e2f9e43..491dafeb 100644 --- a/chart.js +++ b/chart.js @@ -1,8 +1,7 @@ -//DOM-selector for the canvas 👇 +//DOM-selector for the canvas const ctx = document.getElementById('chart').getContext('2d') -//"Draw" the chart here 👇 - +// Chart showing completed projects and how many there is left const repoChart = (amount) => { const config = { type: 'bar', @@ -10,7 +9,6 @@ const repoChart = (amount) => { labels: [ 'Projects done', 'Projects left', - //'Blue' ], datasets: [{ label: 'Technigo projects', @@ -18,51 +16,10 @@ const repoChart = (amount) => { backgroundColor: [ 'rgb(63, 185, 79)', '#8B949E', - // 'rgb(88, 166, 255)', ], hoverOffset: 4 }] }, }; const repositoryChart = new Chart(ctx, config); -} - - -// const repoChart = new Chart(ctx, config); - -// const delayed -// new Chart(ctx,) = { -// type: 'bar', -// data: { -// labels, -// datasets: [ -// { -// data, -// backgroundColor: ['#d5a7b6', '#5c7fe9'], -// }, -// ], -// }, -// options: { -// animation: { -// onComplete: () => { -// delayed = true; -// }, -// delay: (context) => { -// let delay = 0; -// if (context.type === 'data' && context.mode === 'default' && !delayed) { -// delay = context.dataIndex * 300 + context.datasetIndex * 100; -// } -// return delay; -// }, -// }, -// scales: { -// x: { -// stacked: true, -// }, -// y: { -// stacked: true -// } -// } -// } -// } -// } //denna tillhör \ No newline at end of file +} \ No newline at end of file diff --git a/index.html b/index.html index e15c9344..070e2e92 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,6 @@

Technigo repositories:

-
diff --git a/script.js b/script.js index 864fa754..e148340f 100644 --- a/script.js +++ b/script.js @@ -5,11 +5,11 @@ const USER = 'Skrosen' const USER_INFO = `https://api.github.com/users/${USER}` const USER_REPOS = `https://api.github.com/users/${USER}/repos` +// Profile information const profileInfo = () => { fetch(USER_INFO) .then(res => res.json()) .then(userProfile => { - // console.log('profilinfo:', userProfile) projectInfo.innerHTML += /* html */` Profile picture
@@ -21,17 +21,13 @@ const profileInfo = () => { } profileInfo() +// Function that filters out the repos starting with 'project-' to only show technigo projects const getRepos = () => { fetch(USER_REPOS) .then(res => res.json()) .then(repos => { - console.log('repositories:', repos) - const forkedRepos = repos.filter (repo => repo.fork && repo.name.startsWith('project-')) - // can use .includes instead of startsWith - // repo.fork är samma som repo.fork === true - // forkedRepos.forEach(repo => console.log(repo.name)) forkedRepos.forEach(repo => {repoContainer.innerHTML += /* html */ `
${repo.name} @@ -46,6 +42,7 @@ const getRepos = () => { }) } +// Function that shows the pull requests that has been done by the user to Technigo projects const fetchPullRequest = (allRepositories) => { allRepositories.forEach((repo) => { fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) @@ -67,6 +64,7 @@ const fetchPullRequest = (allRepositories) => { }) } +// Function that counts and returns the amount of commits for the pull requests done in function fetchPullRequests const fetchCommits = (myCommitsUrl, repo) => { fetch(myCommitsUrl) .then(res => res.json()) @@ -74,42 +72,4 @@ const fetchCommits = (myCommitsUrl, repo) => { document.getElementById(`commit-${repo}`).innerHTML += info.length }) } -getRepos() - -// To get the comments from a PR, you need to get the URL from the review_comments_url property in the PR json object. -// It might look something like this: https://api.github.com/repos/Technigo/project-news-site/pulls/247/comments -// and then do a fetch with that url. - -// To get the commits from a PR, you need to get the URL from the commits_url property in the PR json object. It might look something like this: -// https://api.github.com/repos/Technigo/project-news-site/pulls/227/commits -// and then do a fetch with that url. - - - -// ### **🔵 Blue Level (Minimum Requirements)** - -// Your page should include: - -// - A list of all repos that are forked from Technigo -// - Your username and profile picture -// - Most recent update (push) for each repo -// - Name of your default branch for each repo -// - URL to the actual GitHub repo -// - Number of commits for each repo -// - It should be responsive (mobile first) -// - A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do -// (in total it will be 19 weekly projects 🥳) using [Chart.js](https://www.chartjs.org/). - -// ### **🔴 Red Level (Intermediary Goals)** - -// - Sort your list in different ways. -// **Example of what you can sort by:** creation date, name, most commits, followers or stargazers -// - Create the opportunity to filter the repos based on a condition, e.g. only JavaScript repos -// - Display the actual commit messages for each repo in a good way. Maybe by adding a modal (popup) or an accordion? -// - Display the comments you got from each pull request -// - When you're browsing through the repo object, you'll see that there's a lot of data that we can use. Create a chart over some of the data. -// **Example of data to use:** Repo size, people that starred your repo (stargazers) or amount of commits on each repo. - -// ### **⚫ Black Level (Advanced Goals)** - -// - Implement a search field to find a specific repo based on name \ No newline at end of file +getRepos() \ No newline at end of file diff --git a/style.css b/style.css index 5b836240..6add9c0f 100644 --- a/style.css +++ b/style.css @@ -3,7 +3,6 @@ body { background: #161b22; display: grid; color: #f0f6fc; - /* har inte importerat något i hmtl, behövs inte det? */ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; } @@ -150,23 +149,11 @@ header a:hover { .repo-div { grid-column: span 2; } - - } -/* styling for desktop */ +/* specific styling for desktop */ @media (min-width:1025px) { - body { - - } - - header { - - } - - .project-container { grid-column: span 4; } - } \ No newline at end of file