diff --git a/README.md b/README.md index 1613a3b0..b2119f63 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,9 @@ # 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 create a GitHub tracker using Javascript and the GitHub API. ## 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 the project with doing a list of all the things I wanted to fetch from the API. I then started to fetch that data. My main struggle this week was Javascript, I find it hard to know how to create more complex structure of it. To solve my problems I googled, used StackOverflow and programmed togheter with classmates. If I had more time I would like to fetch some more data to display on my page to practice to use Javascript more. ## 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://emmas-github-tracker.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..2deac33c 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,28 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (amount) => { + console.log("Draw chart with amount: " + amount) + const data = { + labels: [ + 'Completed', + 'Remaining' + ], + datasets: [ + { + backgroundColor: ['#A8DADC', '#457B9D'], + data: [amount, 19 - amount], + hoverOffSet: 4, + }, + ], + }; + + const config = { + type: 'doughnut', + data: data + }; + const myChart = new Chart(ctx, config); +} + + + diff --git a/code/index.html b/code/index.html index 2fb5e0ae..77db8134 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,35 @@ - Project GitHub Tracker + Project 7: GitHub Tracker + + + + -

GitHub Tracker

-

Projects:

-
+
+

My GitHub Tracker

+
- - +
+ +
+
+
+
+ + +
+
+ + +
+
+
- + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..a4068c43 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,96 @@ +//DOM selectors +const profileInfo = document.getElementById('profile') +const allProjects = document.getElementById('projects') + +const username = 'EmmaaBerg' +const API_PROFILE = `https://api.github.com/users/${username}` +const API_URL_REPOS = `https://api.github.com/users/${username}/repos` + +//Function to get the username and profilepicture +const userProfile = () => { + fetch(API_PROFILE) + .then((res) => res.json()) + .then(profileData => { + profileInfo.innerHTML += ` + profile image of Emma Berg +
+

${profileData.name}

+

${profileData.login}

+
+ ` + }) +} + +// Repos +const repositories = () => { + fetch(API_URL_REPOS) + .then((resp) => resp.json()) + .then((allRepos) => { + //A function for filtering out the forked projects from technigo. + //Repo is the "name for each object" in the array. Fork and name are two properties within + // the object + const forkedRepos = allRepos.filter((repo) => repo.fork && repo.name.startsWith('project-')) + + forkedRepos.forEach((repo) => { + allProjects.innerHTML += ` +
+
+

${repo.name}

+
+ +
+ ` + commits(repo.commits_url, repo.name) + }) + pullRequests(forkedRepos); + drawChart(forkedRepos.length); + + }) +} + +const pullRequests = (forkedRepos) => { + forkedRepos.forEach((repo) => { + const PULL_PR = `https://api.github.com/repos/Technigo/${repo.name}/pulls? + per_page=100` + + fetch(PULL_PR) + .then((res) => res.json()) + .then((pullReqs) => { + let groupProject = true + pullReqs.forEach((pull) => { + if (pull.user.login === username) { + groupProject = false + document.getElementById(`pull-${repo.name}`).innerHTML = ` + Go to pull request + ` + } + }) + + if (groupProject === true) { + document.getElementById(`pull-${repo.name}`).innerHTML = ` +

No pull request, group project

+ ` + } + }) + }) +} + +//function to get commit number for each project +const commits = (myCommits, repoName) => { + let commitUrl = myCommits.replace('{/sha}', '') + fetch(commitUrl) + .then((res) => res.json()) + .then((commitNumber) => { + document.getElementById(`commit-${repoName}`).innerHTML += commitNumber.length; + }) +} + +//Invok the userProfile function and repositorie fetch +userProfile() +repositories() + diff --git a/code/style.css b/code/style.css index 7c8ad447..7978e3e5 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,166 @@ +/* Global CSS variables for colors */ +:root { + --primary: #F1FAEE; + --secondary: #A8DADC; + --tertiary:#1D3557; +} + +* { + box-sizing: border-box; + margin: 0; +} + body { - background: #FFECE9; + background: var(--primary); + color: var(--tertiary); + font-family: 'Roboto', sans-serif; +} + +/* Header styling */ +header { + background: var(--secondary); + color: var(--primary); + width: 100%; + min-height: 25vh; + display: flex; + flex-direction: column; +} + +h1{ + font-size: 1.5rem; + text-transform: uppercase; + text-align: center; + margin-top: 2rem; + padding: 0.5rem; +} + +/* Main page */ +.container { + display: flex; + flex-direction: column; +} + +/* Profile section */ +.profile-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 2rem; + margin-bottom: 1rem; +} + +img { + border-radius: 50%; + max-width: 20vw; + border: 2px solid var(--secondary); +} + +.profile-name h3{ + font-size: 1rem; + text-align: center; + padding: 0.5rem; +} + +.profile-name h4 { + font-size: 0.8rem; + text-align: center; +} + +.profil-name h4, a { + text-decoration: none; + color: inherit; +} + +.chart-container { + max-width: 20vh; + max-height: 20vh; + margin-bottom: 1rem; +} + + +/* Styling of the project section */ +.projects { + display: flex; + flex-direction: column; + align-items: center; + margin: 2rem; +} + +.card { + background-color: var(--primary); + width: 60vw; + border: 2px solid var(--tertiary); + padding: 1.2rem; + margin: 0.5rem; + box-shadow: 4px 6px 6px #36454F; +} + +.card h3 { +text-transform: uppercase; +text-align: center; +} + +.card:hover { + background-color: var(--tertiary); + color: var(--primary); + border: 5px solid var(--secondary); +} + +.card a:hover { + color: var(--secondary); +} + + +/* Media query for tablet */ +@media screen and (min-width: 768px) { + + h1{ + font-size: 3rem; + } + + .profile-name h3{ + font-size: 1.5rem; + } + + .profile-name h4 { + font-size: 1rem; + } + + .profile-container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + } + + .chart-container { + min-width: 20vw; + min-height: 20vh; +} + +.projects { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.5rem; + place-items: center; +} + +.card { + max-width: 40vw; +} + +} + +/* Media query for desktop */ +@media screen and (min-width:1024px) { + .projects { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: (auto, 1fr); + gap: 0.2rem; + align-items: center; + } + + .card { + max-width: 30vw; + } } \ No newline at end of file