diff --git a/README.md b/README.md index 1613a3b0..7b62fff8 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,23 @@ # GitHub Tracker -Replace this readme with your own information about your project. +I used an API to get hold on my information on github. A sorted out the infomation I wanted to have on my page. After that did I style the page. +I used a chart for the first time. + + -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. ## 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 had som problems wiht the js, that I could't se my fetches in the browser, my team mate helped me, I had mist the letter s in two places, had been wrightng commit instead om commits, and it was some more of this small but very importet thigs I had missed. -## View it live +I had som problems as well then I did the css, I was trying to style the wrong class ones. And I got help form team mates here as well. I have goolged a lot. + +I thougt it was messy to have classes in html and js. -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. +It was a struggle to get the chart on the right place, and the border around the chart to stay as a circel. + +If I had more time would I made "Link to repository" in to a button. + + +## View it live +https://lovisasgithubtracker.netlify.app/ diff --git a/code/.gitignore b/code/.gitignore new file mode 100644 index 00000000..07dda7ed --- /dev/null +++ b/code/.gitignore @@ -0,0 +1,2 @@ +token.js + diff --git a/code/chart.js b/code/chart.js index 92e85a30..8dbfa1e9 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') +Chart.defaults.font.family = 'Roboto Mono, monospace'; + //"Draw" the chart here 👇 + + + +const drawChart = (numberOfProjects) => { + const config = { + type: "pie", + data: { + labels: ["Project done", "Project left"], + datasets:[{ + label: "Technigo Projects", + data: [numberOfProjects, 19 - numberOfProjects], + backgroundColor:["rgb(0,0,250)", "rgb(27,27,119)"], + hoverOffset: 4, + + }] + + } + } + + const myChart = new Chart(ctx, config); + +} diff --git a/code/github-cat.png b/code/github-cat.png new file mode 100644 index 00000000..9490ffc6 Binary files /dev/null and b/code/github-cat.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..91cbc15e 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,44 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

Welcome to my Github Tracker!

+
+ +
- - - +
+
+
+ +
+
+ +
+ + +
+ + + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..761b9ab2 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,105 @@ + + +const username = 'LovisaBrorson' +const USER_INFO = `https://api.github.com/users/${username}` //Profilepicture and username +const API_URL_REPOS = `https://api.github.com/users/${username}/repos` // Get the forked repos +const userContainer = document.getElementById('userContainer') +const projectsContainer = document.getElementById('projectsContainer') + + +const options = { //opject + method: 'GET', //Kan också var post, patch, delete + headers: { + Authorization: `token ${API_TOKEN}` + } +} + +//User information = profilepicture and username + const profileInfo = () => { + fetch(USER_INFO, options) + .then((res) => res.json()) + .then((profileData) => { + userContainer.innerHTML += + `
+ Profile picture +
+
+

${profileData.name}

+

Username: ${profileData.login}

+ +
+ ` + + console.log(profileData) + }) + } + profileInfo() + +//Funktion that get the repos from Github +const getRepos = () => { + + fetch(API_URL_REPOS, options) + .then((res) => res.json()) + .then((reposData) => { + console.log(reposData) + const forkedRepos = reposData.filter((repo) => repo.fork && repo.name.startsWith("project-")) + forkedRepos.sort((oldestRepo, newestRepo) => new Date(newestRepo.pushed_at) - new Date(oldestRepo.pushed_at)); + + forkedRepos.forEach(repo => { + + console.log('test', repo) + + projectsContainer.innerHTML += ` +
+

${repo.name}

+

Default branch: ${repo.default_branch}

+

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

+

Amount of commits:

+ Link to repository +
+ ` + }) + + getPullRequests(forkedRepos) + drawChart(forkedRepos.length) + // + }) + +} +getRepos() + +//Funciton that shows the pull requests that has been done by the user to Technigo project +const getPullRequests = (repos) => { + repos.forEach(repo => { + fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options) + .then(res => res.json()) + .then((pullData) => { + let myPullRequest = pullData.find((pull) => pull.user.login === repo.owner.login) + if (myPullRequest) { + displayCommits(myPullRequest.commits_url, repo.name) + } else { + document.getElementById(`commits-${repo.name}`).innerHTML = `No pulls from this user yet.` + } + }) + }) +} + + + + +const displayCommits = (commitsUrl, repo) => { + fetch(commitsUrl, options) + .then(res => res.json()) + .then((data) => { + + document.getElementById(`commits-${repo}`).innerHTML += data.length + +}) +} + + + + + + + diff --git a/code/space-blue.jpg b/code/space-blue.jpg new file mode 100644 index 00000000..20d63e2d Binary files /dev/null and b/code/space-blue.jpg differ diff --git a/code/style.css b/code/style.css index 7c8ad447..145267fc 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,198 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + text-decoration: none; +} + body { - background: #FFECE9; -} \ No newline at end of file + background:rgb(68, 68, 247); + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + +} + + +/* -------- HEADER --------- */ + +.video-header { + height: 40vh; + width: 100vw; + position: relative; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + margin-bottom: 30px; +} + +.video-header video { + position: absolute; + left: 0; + top: 0; + object-fit: cover; + height: 100%; + width: 100%; +} + +h1, header { + position: absolute; + color: blanchedalmond; + text-align: center; + font-size: 3rem; +} + +/* ------- USER PIC AND NAME + CHART ------- */ + +.profile-pic { + border-radius: 50%; + border: 7px solid darkblue; + padding: 20px; + margin: 20px; + width: 80%; + display: grid; + grid-template-columns: 1fr; + justify-self: center; +} + +.user-info { + display: grid; + grid-template-columns: 1fr; + justify-self: center; +} + +.name { + font-weight: bold; + font-size: 2em; + display: grid; + grid-template-columns: 1f; + justify-self: center; +} + +.user-name { + font-size: 1em; + display: grid; + grid-template-columns: 1f; + justify-self: center; +} + +.github { + height: 35px; + display: grid; + grid-template-columns: 1fr; + justify-self: center; + margin-top: 5px; +} + +.user-text { + display: grid; + grid-template-columns: 1fr; + justify-self: center; +} + +.my-chart { + width: 80%; + max-width: fit-content; +} + +.chart-container { + display: grid; + grid-template-columns: fr; + justify-self: center; + padding: 20px; + width: 20em; + border: 7px solid darkblue; + border-radius: 50%; + margin: 20px; +} + +/* ------- PROJECTS ------- */ + +.forkedrepo-div { + background-color: lightblue; + border-radius: 20px; + padding: 20px; + margin: 25px; + border: 7px solid darkblue; +} + +.projects-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} + + +.project-name { + color: darkblue; + font-size: 1,8em; + text-transform: capitalize; +} + +.project-info { + color: rgb(68, 68, 247); + padding-top: 7px; +} + +.project-info:hover { + font-weight: bold; +} + + +footer { + background-color: darkblue; + height: 80px; + font-size: 1rem; + font-weight: bold; + text-align: center; + padding: 2em; +} + + +/* ------- TABLET AND LAPTOP -------*/ +@media (min-width:667px) { + + .container-chart-name-pic { + display: grid; + grid-template-columns: 1fr 1fr; + justify-self: center; + } + + .name { + font-weight: bold; + font-size: 2.5em; + display: grid; + grid-template-columns: 1f; + justify-self: center; + } + + .user-name { + font-size: 1.2em; + display: grid; + grid-template-columns: 1f; + justify-self: center; + } + + .github { + height: 45px; + display: grid; + grid-template-columns: 1fr; + justify-self: center; + margin-top: 5px; +} + + .my-chart { + width: 80%; + max-width: fit-content; +} + + .chart-container { + border: 7px solid darkblue; + border-radius: 50%; + margin: 20px; + height: 300px; + width: auto; + object-fit: cover; +} diff --git a/code/video-film.mp4 b/code/video-film.mp4 new file mode 100644 index 00000000..3263022a Binary files /dev/null and b/code/video-film.mp4 differ