diff --git a/.vscode/settings.json b/.vscode/settings.json index e8783bfe..2e941084 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,4 @@ { - "liveServer.settings.port": 5505 -} \ No newline at end of file + "liveServer.settings.port": 5505, + "prettier.arrowParens": "avoid" +} diff --git a/README.md b/README.md index 1613a3b0..61db2b2d 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. +The assignment was to create a tracker website for my github and fetch the projects and relevant information. ## 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 a problem with knowing how to start writing the JavaScript. I took a look at last week's project (project-weather-app) and used that as a guide for the API fetch. ## 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. +Link to deployed website: https://githubtrackerefstasia.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..9b296c43 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,29 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById("chart").getContext("2d"); //"Draw" the chart here 👇 +Chart.defaults.font.size = 16; +Chart.defaults.color = "#5f939a"; + +const drawChart = amount => { + const config = { + type: "pie", + data: { + labels: ["finished projects", "projects left"], + + datasets: [ + { + label: "My First Dataset", + data: [amount, 20 - amount], + backgroundColor: ["#5F939A", "#D8AC9C"], + hoverOffset: 4, + hoverOpacity: 1, + borderColor: "#161616", + responsive: true, + maintainAspectRatio: false, + }, + ], + }, + }; + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..5d507e8f 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,49 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

GitHub Tracker

+
- - - - \ No newline at end of file +
+
+
+
+
+ +
+ Projects +
+
+
+ + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..0293ff64 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,98 @@ +const USER = "efstasia"; +const GITHUB_URL = `https://api.github.com/users/${USER}/repos`; +const projectsContainer = document.getElementById("projects"); +const pullContainer = document.getElementById("pull-requests"); +const profileInfo = document.getElementById("profile"); + +// function to get profile info +const profile = () => { + fetch(`https://api.github.com/users/${USER}`) + .then(response => { + return response.json(); + }) + .then(json => { + profileInfo.innerHTML += ` + + +

+ ${json.login}

+

Current location: ${json.location}

+

This account has a total of ${json.public_repos} repos

+ `; + }); +}; +profile(); // invoking the profile function + +// function to get all of the repos and commits +const getRepos = () => { + fetch(GITHUB_URL) + .then(response => { + return response.json(); + }) + .then(json => { + // this filters out ONLY the forked projects from technigo + const forkedRepos = json.filter( + repo => repo.fork && repo.name.startsWith("project-") + ); + + // this creates a forEach function to get all of the projects + inner HTML for the project section + forkedRepos.forEach( + repo => + (projectsContainer.innerHTML += `

${ + repo.name + }

+ LINK TO THE REPOSITORY ON GITHUB +
+

Most recent push + ${new Date(repo.pushed_at).toDateString()} at ${repo.pushed_at.slice( + 11, + 16 + )}

+
+

${repo.default_branch}

+

Number of commits:

`) + ); + fetchPullRequestsArray(forkedRepos); + drawChart(forkedRepos.length); + }); +}; + +// this fetches all of the pull requests +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(json => { + const myPullRequest = json.find( + pull => pull.user.login === repo.owner.login + ); + // Detect if we have pull request or not. + // If yes - call fetchCommits function + // If no - inform user that no pull request was yet done + if (myPullRequest) { + fetchCommits(myPullRequest.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + "No pull requests done / team project"; + } + }); + }); +}; +// this is a function to fetch number of commits made +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then(res => res.json()) + .then(json => { + document.getElementById(`commit-${myRepoName}`).innerHTML += json.length; + }); +}; +getRepos(); // invoking the function + +// function to toggle the dark mode, connected to the button in HTML +const myFunction = () => { + const element = document.body; + element.classList.toggle("dark-mode"); +}; diff --git a/code/style.css b/code/style.css index 7c8ad447..1f3612af 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,232 @@ +* { + box-sizing: border-box; + text-align: center; +} +/* variables to style the dark mode, add these in another variable in dark mode and add those to the selectors */ +:root { + --borderColor: 2px solid white; + --linkColor: white; + --usernameColor: white; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: #f9f3ec; + font-family: "Stick No Bills", sans-serif; + letter-spacing: 2px; + margin: 0; + transition: 0.6s ease, color 1s ease; +} + +.dark-mode { + background: rgba(0, 0, 0, 0.8); + color: white; + --borderImgColor: var(--borderColor); + --colorOfLink: var(--linkColor); + --colorOfUsername: var(--usernameColor); +} + +.toggleBtn { + font-family: "Stick No Bills", sans-serif; + border-radius: 20px; + padding: 8px; + cursor: pointer; + font-size: 20px; +} + +.toggleBtn:hover { + border: 2px solid #fff; + background: #5f939a; + color: #fff; +} + +header { + background: #5f939a; + padding: 10px; + width: 100%; + margin-bottom: 30px; + text-transform: uppercase; +} + +.username { + color: var(--colorOfUsername); + font-size: 24px; +} + +.username-link { + text-decoration: none; + color: var(--colorOfLink); +} + +.username-link:hover { + transition: all 1s; + background: #5f939a; + border-radius: 30px; + padding: 5px; +} + +.repo-amount { + font-style: italic; +} + +.repo-title { + text-transform: uppercase; +} + +.push-date { + width: 100%; +} + +.push-title { + font-weight: bold; + display: block; +} + +.cards { + border: 2px solid #5f939a; + background-color: #dbd7d298; + display: grid; + width: 90%; + text-align: center; + margin: 10px auto; + border-radius: 20px; + padding: 0 5px; +} + +.branch { + border: 2px solid black; + border-radius: 30px; + width: 30%; + margin: auto; + background: #5f939a; + color: white; +} + +.grid-container { + margin: auto; +} + +fieldset { + border: 4px solid; + border-color: #5f939a; + border-radius: 20px; + margin: 0 10px; +} + +legend { + text-transform: uppercase; + font-size: 28px; +} + +img { + border: var(--borderImgColor); + width: 70%; + border-radius: 50%; +} + +.chart { + margin: 10px auto; + height: 200px; + width: 200px; +} + +.links { + color: var(--colorOfLink); + width: 80%; + margin: auto; + text-decoration: none; + font-size: 12px; +} + +.links:hover { + transition: all 1s; + background: #5f939a; + border-radius: 30px; +} + +footer { + background: #5f939a; + padding: 10px; + margin-top: 20px; +} + +/* MEDIA QUERIES */ + +/* TABLET */ +@media (min-width: 767px) and (max-width: 1023px) { + .cards { + font-size: 28px; + margin: 20px auto; + } + .links { + font-size: 24px; + } + .repo-amount { + font-size: 24px; + } + .location { + font-size: 22px; + } + .chart { + margin: 10px auto; + height: 275px; + width: 275px; + } +} + +/* DESKTOP */ +@media (min-width: 1024px) { + /* container for the whole page (profile section and cards) */ + .grid-container { + display: grid; + grid-template-columns: 1fr 2fr; + } + + /* class from HTML / container for all of the cards only */ + .project-cards { + display: grid; + grid-template-columns: 1fr 1fr; + padding-top: 45px; + } + + /* class from JS / container for each card */ + .cards { + display: grid; + width: 90%; + margin: 10px auto; + font-size: 18px; + } + + .cards:hover { + transform: scale(1.05); + box-shadow: 4px 8px 16px -3px rgba(0, 0, 0, 0.459); + } + + .chart { + margin-top: 40px; + width: 300px; + height: 300px; + } + + .links { + font-size: 12px; + } + /* class from js */ + .repo-amount { + margin: 30px 0; + } + + img { + animation: myAnim 2s ease 0s 1 normal forwards; + } + + @keyframes myAnim { + 0% { + transform: rotate(0) scale(0.3); + opacity: 0.5; + } + + 100% { + transform: rotate(360deg); + } + } +}