diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..01625912 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..68ff2979 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. +GitHub tracker to follow our forked projects from Technigo ## 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? +REally challanged week for me because of sickness in family. Have spend half the time I use to. Javascript felt good as I often think, good practice fetch functions and API. Have better control of passing around arguments. Styling and CSS is the challange for me. Would really like to have more time to play around with info from API ## 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://ajliins-githubtracker.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..f10092a7 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..2b123b0b 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,33 @@ //DOM-selector for the canvas 👇 const ctx = document.getElementById('chart').getContext('2d') -//"Draw" the chart here 👇 +//'Draw' the chart here 👇 +console.log('Pie chart is here') + +const drawChart = (x) => { + + const data = { + labels: [ + 'Done!', + 'Not done, yet!', + + ], + datasets: [{ + label: 'My First Dataset', + data: [x, 19-x], + backgroundColor: [ + '#7B6079', + '#DE8971', + + ], + hoverOffset: 4 + }] + }; + + const config = { + type: 'doughnut', + data: data, + }; + + let myChart = new Chart(ctx,config); +} \ No newline at end of file diff --git a/code/img/background.jpg b/code/img/background.jpg new file mode 100644 index 00000000..476c4fb5 Binary files /dev/null and b/code/img/background.jpg differ diff --git a/code/img/background.png b/code/img/background.png new file mode 100644 index 00000000..d07c2120 Binary files /dev/null and b/code/img/background.png differ diff --git a/code/img/background2.jpg b/code/img/background2.jpg new file mode 100644 index 00000000..49d5334a Binary files /dev/null and b/code/img/background2.jpg differ diff --git a/code/img/background2.png b/code/img/background2.png new file mode 100644 index 00000000..b0ebcede Binary files /dev/null and b/code/img/background2.png differ diff --git a/code/img/github.png b/code/img/github.png new file mode 100644 index 00000000..15043568 Binary files /dev/null and b/code/img/github.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..77f9ad84 100644 --- a/code/index.html +++ b/code/index.html @@ -4,16 +4,32 @@ + + + + + + Project GitHub Tracker + -

GitHub Tracker

-

Projects:

-
- - +
+
+
+
+ +
+
+
+
+ + diff --git a/code/script.js b/code/script.js index e69de29b..e35faf00 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,92 @@ +const USER = `Ajliin` +const REPOS_URL = `https://api.github.com/users/${USER}/repos` + +const firstContainer = document.getElementById('first') +const projectContainer = document.getElementById('projects') + +// ------------FIRST FETCH FUNCTION------------ +const fetchRepos =() => { +fetch(REPOS_URL) + .then ((response) => { + return response.json() + }) + .then ((data) => { + repoInfo(data) + }) +} +fetchRepos() + +// ------------function for first lines inside FIRST FETCH FUNCTION------------ + +const repoInfo = ((data) =>{ + first.innerHTML = ` +
+

Welcome to ${data[0].owner.login}s GitHub Tracker

+ profile pic Ajliin +
+
+

Elin Diczfalusy

+

User name: ${data[0].owner.login}

+

GitHub page: ${data[0].owner.html_url}

+
` + +// ------------function filters out the forked repos from Technigo + const forkedRepo = data.filter((repo) => repo.fork && repo.name.startsWith('project-')) +// ------------function to chart.js on how many repos + drawChart(forkedRepo.length) +// ------------forEach repo --> send to innerHTML + forkedRepo.forEach((repo) => { + let dateString = new Date(repo.pushed_at) + + projectContainer.innerHTML += `
+

Project name: ${repo.name}

+

Project url: ${repo.html_url}

+

Default branch: ${repo.default_branch}

+ +

Last push: ${dateString.toUTCString()} +

Commits amount:

` + }) + +getProjectInfo(forkedRepo) + +}) + +getProjectInfo = (allRepositories) => { + allRepositories.forEach((project)=>{ + const PULL_API = `https://api.github.com/repos/technigo/${project.name}/pulls?per_page=100` + +// ------------SECOND FETCH FUNCTION------------ + const fetchProjectinfo = (forkedRepo) => { + fetch(PULL_API) + .then ((response) => { + return response.json() + }) + .then ((json) => { + const myPullRequest = json.find((pull) => (pull.user.login === project.owner.login)) + // Första är alla användare, project.owner.login + + + if (myPullRequest) { + fetchCommits(myPullRequest.url, project.name) + + }else{ + console.log('else part in function works', myPullRequest) + document.getElementById(`commit-${project.name}`).innerHTML += 'No pull request done yet' + } + }) + } + fetchProjectinfo() +}) +} +// ------------THRID FETCH FUNCTION------------ +const fetchCommits = ((commitUrl, projectName) => { + fetch(commitUrl) + .then ((response) => { + return response.json() + }) + .then ((data) => { + document.getElementById(`commit-${projectName}`).innerHTML += `${data.commits}` + }) + +}) + diff --git a/code/style.css b/code/style.css index 7c8ad447..58417517 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,158 @@ +:root{ + --purple: #7B6079; + --orange:#DE8971; + --card-background: rgba(255, 255, 255, 0.531); +} + +*{ + box-sizing: border-box; +} + body { - background: #FFECE9; -} \ No newline at end of file + background-image: url(./img/background2.png); + font-family: raleway; + margin: 0; + +} + +h1 { + margin-top: 0; + text-align: center; + font-size: 34px; + line-height: 40px; + font-weight: 500; + margin-block-end:0.4em; + color: black; +} + +h2 { + color:black; + margin-top: 0; + text-align: center; + font-size: 34px; + line-height: 40px; + font-weight: 500; +} + +p{ + font-weight: 400; +} + + + +.main-container{ + display: flex; + flex-direction: column; + margin: 0 auto; + padding: 2vh; +} + +.first-coloumn{ + text-align: center; +} + +.profile-img{ + width: 70%; + border-radius: 50%; + border: 5px solid black; + margin: 1vh auto; + +} +.info-square{ + background: var(--card-background); + border-radius: 10pt; + padding: 2vh; + width: 80%; + margin: 1vh auto; + border-left: 4px solid black; + border-right: 4px solid black; +} + +.chart-container{ + width: 100%; + background-color: var(--card-background);; + border-radius: 10pt; + margin: 2vh auto; + width: 250px; +} + +.projects-grid { + display: flex; + flex-direction: column; + +} + +.project{ + background-color: var(--card-background); + padding: 2vh; + border-radius: 12px; + margin: 2vh auto; + width:80%; + border-left: 4px solid black; + border-right: 4px solid black; +} + + +a{ + text-decoration: none; + color: black; +} + +a:hover { + color: var(--orange); + font-size: larger; +} + +.footer{ + width: 100%; + background-color: rgba(255, 255, 255, 0.564); + height: auto; + padding: 2vh; + right: 0; + bottom: 0; + left: 0; + padding: 1rem; + +} + +@media (min-width: 1000px){ + +.main-container { + max-width: 1800px; + display: grid; + grid-template-columns: 1fr 3fr; +} + +.first-coloumn{ + text-align: center; +} +.profile-img{ + width: 80%; + +} +.info-square{ + width: 100%; + +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 1rem; + grid-row-gap: 1rem; + margin: 4vh 2rem 0 2rem; + padding: 1vh 4vh 4vh 4vh; + row-gap: 20px; + grid-auto-rows: max-content; + +} + +.project{ + min-width:300px; + margin: 0; + width:100%; +} + +} + +