diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..eab2ad05 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ # GitHub Tracker +The gitHub tracker project was all about fetching the repositories from my gitHub that was forked from Technigo, and get some user info and project info. -Replace this readme with your own information about your project. +## The problem -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +I really liked this project, even if I have a really hard time with the javascript syntax. This week I gave the live sessions a repetition which gave a lot. I decided how I wanted to structure tha page and had to make som changes and additions in both html file and inner.html in the javascript file. I also managed to change the type of chart I used. -## The problem +If I hade more time I would like to look at how to implement a searchfield to be able to search for repos. Did try to implement a popup. But actually gave up 😅 and decided to try out a more simple tooltip. -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? +It was a bit frustrating to work with only 60 requests per hour... Need to learn how to get past that 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 is my deployed site on Netifly. +https://vigilant-mestorf-12aeff.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..9379ded4 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/GitHub-Icon-White-Logo.wine.svg b/code/GitHub-Icon-White-Logo.wine.svg new file mode 100644 index 00000000..c4febfb0 --- /dev/null +++ b/code/GitHub-Icon-White-Logo.wine.svg @@ -0,0 +1,4 @@ + + + + diff --git a/code/arrow-right.svg b/code/arrow-right.svg new file mode 100644 index 00000000..b70116ab --- /dev/null +++ b/code/arrow-right.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/code/chart.js b/code/chart.js index 92e85a30..deb0c4f8 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,33 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const drawChart = (amount)=> { +const config = { + type: 'bar', + data: { + labels: [ + 'Finished', + 'Left', + 'Total', + ], + datasets: [{ + label: 'Bootcamp projects', + data: [amount, 19-amount, 19], + barPercentage: 100, + barThickness: 60, + maxBarThickness: 100, + borderRadius: 4, + // minBarLength: 10, + backgroundColor: [ + 'rgba(60, 179, 113)', + 'rgba(255, 99, 132)', + 'rgba(255, 159, 64)', + ], + + hoverOffset: 4 + }] + }, +} +const theChart = new Chart (ctx, config) +} diff --git a/code/f_logo_RGB-White_250.png b/code/f_logo_RGB-White_250.png new file mode 100755 index 00000000..adcfea03 Binary files /dev/null and b/code/f_logo_RGB-White_250.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..d59d5a7a 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,58 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + + + + Project GitHub Tracker + + + + - - + +
+

GitHub Tracker

+ +
+ +
+
+
+
+ +
+
+ +
+

Project repositories / Technigo Frontend Bootcamp 2021/22

+
+
+
+ + - - \ No newline at end of file + + \ No newline at end of file diff --git a/code/instagram.png b/code/instagram.png new file mode 100644 index 00000000..401ecdad Binary files /dev/null and b/code/instagram.png differ diff --git a/code/linkedIn.png b/code/linkedIn.png new file mode 100644 index 00000000..fcdda1c9 Binary files /dev/null and b/code/linkedIn.png differ diff --git a/code/logo.svg b/code/logo.svg new file mode 100644 index 00000000..45d37354 --- /dev/null +++ b/code/logo.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..506c697b 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,110 @@ +const USER = 'hemmahosjessi' +const REPOS_URL = `https://api.github.com/users/${USER}/repos` +const projectsContainer = document.getElementById('projects') +const profileContainer = document.getElementById('profile') + + + +// ---- PROFILE -----// + +const getProfile = () => { + fetch (`https://api.github.com/users/${USER}`) + .then (response => response.json()) + .then(data => { + profileContainer.innerHTML += ` +
+
+ +
+
+

Jessi Nygren Walhed

+ ${data.login} +
+
+
+

${data.bio}

+ +
+ ` + }) +} +getProfile() + +// ---- REPOS -----// + +const getRepos = () => { + fetch(REPOS_URL) + .then(response => (response.json())) + .then(data => { + const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project-')) + console.log('My forked repos', forkedRepos) + + forkedRepos.forEach(repo => projectsContainer.innerHTML += ` +
+
+ “You only live once, but if you do it right, once is enough.” — Mae West. + +
+ ${repo.name} +
+

Most recent push

+

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

+
+
+

Default branch name

+

${repo.default_branch}

+
+
+

No of commits

+

+
+
`) + + drawChart(forkedRepos.length) + + fetchPullRequests(forkedRepos) + }) +} + +// ---- PULL REQUESTS PER PROJECT / COMMIT MESSAGES PER PULL REQUEST -----// + +const fetchPullRequests = (allRepositories) => { + allRepositories.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`) + .then(response => (response.json())) + .then(data => { + const myPullRequests = data.find( + (pull) => pull.user.login === repo.owner.login) + console.log('My Pull requests', myPullRequests) + + if (myPullRequests) { + fetchCommits(myPullRequests.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + '-' + } + + }) + }) + +} + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then(response => (response.json())) + .then(data => { + console.log('My commits', data) + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length + }) +} + +getRepos() + + diff --git a/code/style.css b/code/style.css index 7c8ad447..99c8894f 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,470 @@ + +html { + box-sizing: border-box; + } + +*:before, *:after { + box-sizing: inherit; + } + body { - background: #FFECE9; -} \ No newline at end of file + background-color: #0d1117; + font-family: poppins; + color: #c9d1d9; + padding-bottom: 0; + margin: 0; + min-height: 100%; +} + +.main { + display: flex; + flex-direction: row; + padding-left: 5%; + padding-right: 5%; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 0 1rem 0; + margin: 0; + border-bottom: 0.5px solid #31363C; +} + +.github-logo { + width: 48px; + height: 48px; + margin-right: 2rem; + margin-bottom: 0; +} + +h1 { + font-size: 1.5rem; + font-weight: 300; + padding-left: 2rem; +} + +h2 { + font-size: 1.5rem; + font-weight: 100; + margin-top: 0; +} + +h3 { + font-size: 1rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: #58a6ff; +} + +h4 { + font-size: 1rem; + margin: 0; +} + +p { + font-size: 12px; + font-weight: 100; + margin: 0.5rem 0 0 0; +} + +a { + color: #58a6ff; + font-weight: 600; + text-decoration: none; + position: relative; +} + +a:hover { + color: #dedede; +} + + +a::before { + transform: scaleX(0); + transform-origin: bottom right; +} + +a:hover::before { + transform: scaleX(1); + transform-origin: bottom left; +} + +a::before { + content: " "; + display: block; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + inset: 0 0 0 0; + color: #dedede; + background: #4694ee; + z-index: -1; + transition: transform .3s ease; +} + +.main { + padding-right: 5%; + padding-left: 5%; +} + +/* LEFT AREA */ + +.left-area { + width: 25%; + padding-top: 4rem; +} + +.user-name { + margin-top: 0; +} + +.profile h2 { + margin-bottom: 0; +} + +.user-img { + border-radius: 50%; + width: 50%; + height: auto; + margin-bottom: 1rem; +} + +.button { + width: 100%; + height: 48px; + background-color: #21262d; + color: #dedede; + border: none; + border-radius: 12px; + font-size: 1.125rem; + margin-top: 1rem; +} + +.chart { + width: 100%; + height: auto; + padding-top: 3rem; +} + + +/* RIGHT AREA */ + +.right-area { + width: 100%; + padding-left: 3rem; + padding-top: 4rem; +} + +.project-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-gap: 1.5rem; +} + +.project-card { + background-color: #161b22; + padding: 1.5rem 1rem 1.5rem 1.5rem; + border-radius: 12px; + min-width: auto; + border: 1px solid #31363C; +} + +.open-modal { + float: right; + width: 48px; + height: 48px; + border-radius: 50%; + background-color: #21262d; + border: none; +} + +.link-arrow { + width: 1.5rem; + height: 1.5rem; + margin: 0; +} + + +/* TOOL-TIP */ + +/* Tooltip container */ +.tooltip { + position: relative; + float: right; +} + +/* Tooltip text */ +.tooltip .tooltiptext { + visibility: hidden; + width: 200px; + background-color: #555; + color: #fff; + text-align: left; + padding: 1.5rem; + border-radius: 12px; + + /* Position the tooltip text */ + position: absolute; + z-index: 1; + bottom: 125%; + left: 0; + margin-left: -100px; + + /* Fade in tooltip */ + opacity: 0; + transition: opacity 0.3s; +} + +/* Tooltip arrow */ + +.tooltip .tooltiptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; +} + +/* Show the tooltip text when you mouse over the tooltip container */ +.tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +} + + +/* FOOTER */ + +.footer { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: 2rem 1rem 2rem 2rem; + margin-top: 100px; + border-top: 0.5px solid #31363C; +} + +.footer p { + font-size: 1rem; + font-weight: 300; + margin-top: 0; + margin-right: 1rem; +} + +.footer a { + font-weight: 300; + color: #dedede; +} + +.technigo-logo { + width: 40px; + height: auto; + margin-right: 1rem; +} + +.technigo { + display: flex; + flex-direction: row; + align-items: center; +} + +.social-logo { + width: 32px; + height: auto; + padding: 0.5rem; +} + +.more-about-me { + display: flex; + flex-direction: row; + align-items: center; +} + + +@media (min-width: 768px) and (max-width: 991px) { + + .main { + display: flex; + flex-direction: column; + } + + .left-area { + box-sizing: border-box; + display: flex; + flex-direction: row; + padding-top: 2rem; + width: 100%; + } + + .user { + font-size: 1.5rem; + } + + .bio { + font-size: 1rem; + } + + h2 { + font-size: 1rem; + } + + .profile { + width: 50%; + padding-right: 1.5rem; + } + + .chart { + width: 50%; + } + + .right-area { + padding-left: 0; + padding-top: 3rem; + } + + .project-grid { + grid-template-columns: 1fr 1fr; + grid-auto-rows: auto; + gap: 1.5rem; + } + + .project-card { + padding: 1rem; + } + + .tooltip { + display: none; + } + +} + + + @media (max-width: 767px) { + + body { + max-width: 100%; + } + + .header { + width: 100%; + padding: 0; + border-bottom: 0.5px solid #31363C; + } + + .github-logo { + width: 32px; + margin-right: 1rem; + } + + h1 { + font-size: 1rem; + padding-left: 1rem; + margin: 0; + } + + h2 { + font-size: 1rem; + font-weight: 300; + } + + h3 { + margin-top: 0; + } + + h4 { + font-size: 1rem; + } + + + .main { + flex-direction: column; + margin: 1rem; + padding: 0; + } + + .left-area { + width: 100%; + align-content: flex-start; + padding: 0; + margin-top: 1rem; + } + + .profile-area { + width: 100%; + display: flex; + flex-direction: row; + } + + .profile h2 { + font-size: 1.5rem; + } + + .user { + display: flex; + flex-direction: column; + margin-left: 1rem; + } + + .user-img { + border-radius: 50%; + width: 64px; + height: auto; + margin-bottom: 1rem; + } + + p { + font-size: 14px; + } + + .chart { + padding-top: 1rem; + } + + .right-area { + padding-left: 0; + padding-top: 2rem; + } + + .project-grid { + grid-template-columns: 1fr; + grid-auto-rows: auto; + gap: 1rem; + } + + .project-card { + padding: 1rem; + border-radius: 12px; + width: auto; + } + + .tooltip { + display: none; + } + + .footer { + padding: 1rem; + margin-top: 2rem; + } + + .footer a { + font-size: 14px; + font-weight: 100; + } + + .technigo-logo { + width: 40px; + } + + .social-logo { + width: 24px; + } + + .footer p { + display: none; + } + + }