diff --git a/README.md b/README.md index 1613a3b0..e550ec2f 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,20 @@ # 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. +Creating a place to keep track of the GitHub repos made during my Boot Camp at Technigo. Using JavaScript, html, css and fetching data from API's from the JSON response. ## 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 page includes: + +- A list of all repos that are forked from Technigo +- Username and profile picture +- Most recent update (push) for each repo +- Name of default branch for each repo +- URL to the actual GitHub repo +- Number of commits for each repo +- It is responsive (mobile first) +- A visualisation, a donut chart, of how many projects I've done so far, compared to how many I will do. ## 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://elegant-pasteur-b7cf22.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..c1a0bb68 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,27 @@ //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", "Remaining Projects"], + datasets: [ + { + label: "My First Dataset", + data: [amount, 20 - amount], + backgroundColor: [ + "rgb(22, 35, 50)", + "rgba(222,207,168,255) ", + "rgb(255, 205, 86)", + ], + hoverOffset: 4, + }, + ], + }, + }; + + const myChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..77f98d7f 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,36 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + + + + - - + +
+
+
- - - - \ No newline at end of file +
+

GitHub Tracker

+
+ + +
+ +
+
+ + + + + diff --git a/code/script.js b/code/script.js index e69de29b..96d95dfd 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,85 @@ +const USER = "amandatilly"; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const USER_URL = `https://api.github.com/users/${USER}`; + +const projectContainer = document.getElementById("projects"); +const profileContainer = document.getElementById("userProfile"); + +// function to fetch and display user profile info +const fetchUser = () => { + fetch(USER_URL) + .then((res) => res.json()) + .then((data) => { + profileContainer.innerHTML = ` +
+ profile picture +

Hi I'm ${data.name}

+

An ${data.bio} based in ${data.location}

+ @${data.login} +
+ `; + }); +}; + +//function to fetch and display repos +const getRepos = () => { + fetch(REPOS_URL) + .then((res) => res.json()) + .then((data) => { + // filters out repos for user name and that starts with project- + const forkedRepos = data.filter( + (repo) => repo.fork && repo.name.startsWith("project-") + ); + + forkedRepos.forEach( + (repo) => + (projectContainer.innerHTML += ` +
+ ${repo.name} +

Branch: ${repo.default_branch}

+

Latest update: ${new Date(repo.pushed_at).toDateString()}

+

Number of commits:

+
+ `) + ); + drawChart(forkedRepos.length); // calling function and passing value to chart.js (amount) + getPullRequests(forkedRepos); // calling function and passing value + }); +}; + +//function to fetch pull +const getPullRequests = (repos) => { + repos.forEach((repo) => { + fetch( + `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` + ) + .then((res) => res.json()) + .then((data) => { + //compares repo user info to pull user info and title with my name + const userPullRequests = data.find( + (pull) => + repo.owner.login === pull.user.login || + pull.title.includes("Amanda") + ); + // displays number of commits if a pull request has been made, if not it displays message + if (userPullRequests) { + fetchCommits(userPullRequests.commits_url, repo.name); //calling function and passing values + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = + "No pull request yet"; + } + }); + }); +}; + +//function to fetch and display commits +const fetchCommits = (myCommitsUrl, myRepoName) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + document.getElementById(`commit-${myRepoName}`).innerHTML += data.length; + }); +}; + +getRepos(); +fetchUser(); diff --git a/code/style.css b/code/style.css index 7c8ad447..314738f1 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,182 @@ +* { + margin: 0; + padding: 0; + border: 0 none; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: #ce7f5a; + font-family: "Josefin Sans", sans-serif; + line-height: 1.5; +} + +/* Hero */ + +.header { + height: 90vh; + width: auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background-image: url("https://images.unsplash.com/photo-1456615074700-1dc12aa7364d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"); + background-size: cover; + background-repeat: no-repeat; + background-position: left; + position: relative; +} + +.header p, +h2 { + color: whitesmoke; +} + +.header a:link { + text-transform: lowercase; + color: whitesmoke; + text-decoration: none; +} + +.header a:visited { + color: whitesmoke; + text-decoration: none; +} + +.header a:hover { + text-decoration: underline; + color: #c9b597; +} + +.picture { + border-radius: 50%; + width: 100px; +} +.user { + text-shadow: 5px 5px 10px black; +} + +/* Main Section */ + +.projects { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; + grid-gap: 5px; + padding: 20px; +} + +.grid { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; + margin-top: 100px; + margin-bottom: 60px; +} + +.grid h1 { + font-size: 30px; + color: whitesmoke; + text-align: center; + text-transform: uppercase; +} + +.repo-card { + display: flex; + flex-direction: column; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + margin-top: 10px; + margin-bottom: 10px; + padding: 20px; + align-items: center; + background-color: #162332; + min-width: 200px; + max-width: 400px; + width: 80%; + color: whitesmoke; + gap: 10px; +} + +.repo-card a:link { + text-decoration: none; + text-transform: uppercase; + color: #c9b597; + font-weight: bold; +} + +.repo-card a:visited { + text-decoration: none; + color: #c9b597; +} + +.repo-card a:hover { + text-decoration: underline; + color: whitesmoke; + font-weight: bold; +} + +.chart-container { + max-width: 400px; +} + +/* Media Queries */ + +@media (min-width: 768px) { + .projects { + } + + .chart-container { + min-width: 400px; + } + + .grid h1 { + font-size: 40px; + } + + .repo-card p, + a { + font-size: 20px; + } + + .header h2 { + font-size: 30px; + } + + .header p { + font-size: 20px; + } +} + +@media (min-width: 992px) { + .projects { + gap: 10px; + } + + .chart-container { + min-width: 600px; + } + + .repo-card p, + a { + font-size: 25px; + } + + .header h2 { + font-size: 35px; + } + + .header p { + font-size: 25px; + } + + .grid h1 { + font-size: 50px; + } + + .picture { + width: 130px; + } +}