diff --git a/README.md b/README.md index 1613a3b0..de4fb098 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,12 @@ -# 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 - Week 7 +The assignment this week was to create a git hub tracker with a list of all Technigo Repositories. +Used languages: javascript, CSS and some html. ## 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? +My biggest blockers was to fetch my data from github. + ## 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. +Please view at: https://mamites-github-tracker.netlify.app/ diff --git a/code/assets/Ink - 67358.mp4 b/code/assets/Ink - 67358.mp4 new file mode 100644 index 00000000..8829b0bc Binary files /dev/null and b/code/assets/Ink - 67358.mp4 differ diff --git a/code/assets/hello_hero_img.jpg b/code/assets/hello_hero_img.jpg new file mode 100644 index 00000000..af57b761 Binary files /dev/null and b/code/assets/hello_hero_img.jpg differ diff --git a/code/assets/sky.jpg b/code/assets/sky.jpg new file mode 100644 index 00000000..6fd05cb5 Binary files /dev/null and b/code/assets/sky.jpg differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..16573418 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,25 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('chart').getContext('2d'); -//"Draw" the chart here 👇 + +const drawChart = (amount) => { + const config = { + type: 'doughnut', + data: { + labels: [ + 'Completed projects', + 'Projects left to build', + ], + datasets: [{ + label: 'My Technigo projects', + data: [amount, 19-amount], + backgroundColor: [ + 'rgb(235, 14, 14)', + 'rgb(64, 19, 19)', + ], + hoverOffset: 4 + }], + }, + }; + + const projectsChart = new Chart(ctx, config); +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..30d7506d 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,51 @@ + - Project GitHub Tracker + Mamites GitHub Tracker + + + + + + -

GitHub Tracker

-

Projects:

-
+
+

My GitHub Tracker

+
+ +
+
+

+
+
+

This GitHub tracker displays my progress during the Technigo Boot Camp aug 2021- feb 2022

+
- - +
+ +
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..8f5f135c 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,99 @@ + +const USER = 'mamite100'; + +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; + +const PROFILE_URL = `https://api.github.com/users/${USER}` + +const profileContainer = document.getElementById('profileContainer') +const projectsContainer = document.getElementById('projects'); +const profileImage = document.getElementById('profileImage') + +const fetchProfile = () => { + fetch(PROFILE_URL) + .then(res => res.json()) + .then(profileData => { + + profileContainer.innerHTML +=` + +

${profileData.name}

+

${profileData.login}

` + }); + } + +const fetchRepositories = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + const technigoRepositories = data.filter( + (repo) => repo.name.includes('project-') && repo.fork + ); + + technigoRepositories.forEach((repo) => { + fetch(`${repo.languages_url}`) + .then((language) => language.json()) + .then((data) => { + + const language = Object.keys(data)[0]; + + projectsContainer.innerHTML += ` +
+ ${ + repo.name + } +
${ + repo.default_branch + }
+

Last updated: ${new Date( + repo.updated_at + ).toDateString()}

+
${language}
+
+ `; + }) + .catch((err) => console.log(err)); + }); + + fetchPullRequestsArray(technigoRepositories); + + + drawChart(technigoRepositories.length); + }); +}; + + +const fetchPullRequestsArray = (allRepositories) => { + allRepositories.forEach((repo) => { + const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`; + + fetch(PULL_URL) + .then((res) => res.json()) + .then((data) => { + const myPullRequest = data.find( + (pull) => pull.user.login === repo.owner.login + ); + + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + 'No pull request yet done :('; + } + }); + }); +}; + +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((response) => response.json()) + .then((data) => { + console.log(data); + document.getElementById( + `${repo.name}` + ).innerHTML += `

Number of commits: ${data.length}

`; + }) + .catch((err) => console.log(err)); +}; + +fetchRepositories(); +fetchProfile(); \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..8cff5018 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,109 @@ body { - background: #FFECE9; -} \ No newline at end of file + background:rgb(243, 214, 223); + box-sizing: border-box; + font-size: 1.5rem; + font-family: 'Montserrat', sans-serif; + color: #dd1c1c; +} + +.intro-text{ + align-items: center; +} +a{ + text-transform: uppercase; + color: #401313; + font-size: 0,5em; +} + +header { + text-align: center; + font-size: 1.6em; +} + +.profile-container { + font-size: 1.0rem; + display: flex; + align-items: center; + flex-direction: column; + width: 90%; + margin: 0 auto; +} + +.intro-text{ + color: #401313; + text-align: center; +} + +.profile-image { + border-radius: 50%; + width: 320px; + align-content: center; + border: 1px solid #401313; + } +.projects { + margin-top: 10px; +} + +a:hover { + text-decoration: underline; +} +.repo-title{ +font-size: 1.3em; +} +.repo-item2,branch { + display: flex; + flex-direction: column; + flex-direction:inherit; + padding: 2px; + margin-top: 15px; + font-size: 1.2em; +} + +.updated{ + display: flex; + flex-direction: column; + padding: 2px; + font-size: 1.1em; +} + +.language { + display: flex; + flex-direction: column; + padding: 2px; + font-size: 1.2em; + margin-bottom: 15px; + margin-top: 15px; +} + +hr { + border: 0,3px solid #401313 +} +.footer{ + margin-top: 25px; + margin-bottom: 25px; + font-size: medium; + text-align: center; + +} + +/*** MEDIA QUERIES ***/ + +@media (min-width: 327px) { + .repo{ + display:flex; + flex-direction:column; + margin: 30px; + border: 1px solid #401313; + border-radius: 6px; + } +} + +@media (min-width: 1200px) { + .repo{ + display:flex; + flex-direction:column; + margin: 30px; + border: 1px solid #401313; + border-radius: 6px; + } +}