diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..f1e74019 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..9ed4ad52 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ # 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. +This week's project was to build a site that keep track of all my repositories that I have created during my time at Technigo. The main purpose of this project was to display information about the projects that I have built, using GitHub API. ## 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 started off by fetching all of my repositories and data from the GitHub API. Once I had all the data I needed I dispayed it on the page. Then I started to do a quick scetch in Figma on how I wanted to style the page and then tried to come as close as possible. Of course with the mind set of mobile first. + +I struggled a lot with the API token this week, and I had a hard time to publish the site on Netlify. + +If I had more time, or less trouble with token-issues, I would add a sort function and a search field. And also I had investigated more time with the styling, as always :) ## 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://spontaneous-moxie-b26bd5.netlify.app/ diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..2acf5207 Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/.gitignore b/code/.gitignore new file mode 100644 index 00000000..1c453411 --- /dev/null +++ b/code/.gitignore @@ -0,0 +1 @@ +token.js \ No newline at end of file diff --git a/code/android-chrome-192x192.png b/code/android-chrome-192x192.png new file mode 100644 index 00000000..3ee6ffd2 Binary files /dev/null and b/code/android-chrome-192x192.png differ diff --git a/code/android-chrome-512x512.png b/code/android-chrome-512x512.png new file mode 100644 index 00000000..7945a325 Binary files /dev/null and b/code/android-chrome-512x512.png differ diff --git a/code/apple-touch-icon.png b/code/apple-touch-icon.png new file mode 100644 index 00000000..0c79288f Binary files /dev/null and b/code/apple-touch-icon.png differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..90c541da 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,36 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +// font family & color for the chart +Chart.defaults.font.family = "Roboto, sans-serif"; +Chart.defaults.color = "#333"; -//"Draw" the chart here 👇 +// DOM-selector for the chart +const ctx = document.getElementById("chart").getContext("2d"); + +// function to draw the chart, with the "completed projects" as an argument +const renderChart = (projects) => { + const data = { + labels: ["completed projects", "not yet completed projects"], + datasets: [ + { + data: [projects, 19 - projects], + backgroundColor: ["#2FC5EE", "#FF1E00"], + borderColor: "#FEFBF3", + hoverOffset: 8, + }, + ], + }; + + const config = { + type: "doughnut", + data: data, + options: { + font: { + size: 10, + }, + layout: { + padding: 15, + }, + }, + }; + + new Chart(ctx, config); +}; diff --git a/code/favicon-16x16.png b/code/favicon-16x16.png new file mode 100644 index 00000000..6ba31147 Binary files /dev/null and b/code/favicon-16x16.png differ diff --git a/code/favicon-32x32.png b/code/favicon-32x32.png new file mode 100644 index 00000000..71c4020a Binary files /dev/null and b/code/favicon-32x32.png differ diff --git a/code/favicon.ico b/code/favicon.ico new file mode 100644 index 00000000..407ac62b Binary files /dev/null and b/code/favicon.ico differ diff --git a/code/icons8-star-48.png b/code/icons8-star-48.png new file mode 100644 index 00000000..8049609f Binary files /dev/null and b/code/icons8-star-48.png differ diff --git a/code/index.html b/code/index.html index 2fb5e0ae..4e3f6be4 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,56 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

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

my github projects

+
+

bootcamp status

+ +
+ +
+ + + + + + + diff --git a/code/script.js b/code/script.js index e69de29b..faf20d31 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,96 @@ +// DOM-selectors +const chart = document.getElementById("chart"); +const projects = document.getElementById("projects"); +const header = document.getElementById("header"); +const API_REPOS = "https://api.github.com/users/sieurin/repos"; +const API_USER = "https://api.github.com/users/sieurin"; + +// my token +const options = { + method: "GET", + headers: { + Authorization: TOKEN, + }, +}; + +// fetch all information for the user-API and print them out +fetch(API_USER, options) + .then((res) => res.json()) + + .then((json) => { + header.innerHTML += ` +
+ avatar +

${json.login}

+
+
+
+
+
+
+
+
+
+

HI! ${json.bio}

+ `; + }); + +// fetch all information for each repo and print them out +fetch(API_REPOS, options) + .then((res) => res.json()) + + .then((json) => { + const filterProjects = json.filter((project) => { + return project.fork === true && project.name.startsWith("project"); + }); + + renderChart(filterProjects.length); + + filterProjects.forEach((project) => { + // print out the project name, branch, latest push, url + projects.innerHTML += ` +
+
+
+

last updated
${new Date( + project.pushed_at + ).toLocaleDateString("en-GB", options)}

+
+

${project.name + .replace("project-", "") + .replace("-", " ")}

+
+

${project.default_branch} branch

+ link to repo +
+
+
+ `; + + // fetch all the pull requests and print them out + const reponame = project.name; + const API_PR = `https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`; + fetch(API_PR, options) + .then((res) => res.json()) + + .then((json) => { + const filteredPR = json.filter((PR) => { + return PR.user.login === "sieurin"; + }); + + const singleProject = document.getElementById(project.name); + singleProject.innerHTML += `

Pull requests: ${filteredPR.length}

`; + + // fetch all commits and print them out + const API_COMMITS = `https://api.github.com/repos/sieurin/${reponame}/commits`; + fetch(API_COMMITS, options) + .then((res) => res.json()) + + .then((json) => { + singleProject.innerHTML += `

Commits: ${json.length}

`; + }); + }); + }); + }); diff --git a/code/site.webmanifest b/code/site.webmanifest new file mode 100644 index 00000000..45dc8a20 --- /dev/null +++ b/code/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..c71ddeab 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,297 @@ +/* Color scheme */ +:root { + --main-bg-color: #fbf9eb; + --my-black: #333; + --main-accent-color: #ff1e00; + --sec-accent-color: #2fc5ee; +} + +/* CSS below is to reset default values such as margin, padding and box-sizing + and increase the resolution of the text */ +* { + 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; +} + body { - background: #FFECE9; -} \ No newline at end of file + background: var(--main-bg-color); + border: solid var(--sec-accent-color) 8px; + width: 100%; + font-family: "Poppins"; +} + +p { + font-size: 8px; +} + +a { + text-decoration: none; + font-family: "poppins"; + font-size: 8px; + color: var(--main-accent-color); +} + +.header { + display: flex; + flex-direction: row; + align-items: flex-end; +} + +img { + width: 45%; +} + +.user-name { + writing-mode: vertical-rl; + font-family: "Playfair Display"; + font-size: 13vw; + color: var(--main-accent-color); +} + +span { + color: var(--main-accent-color); + font-size: 5vw; +} + +.circles { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 45%; + font-family: "poppins"; + color: var(--main-bg-color); +} + +.circle { + width: 5vw; + height: 9vw; + margin: 2px; + border-radius: 50%; + background-color: var(--sec-accent-color); + animation: bounce alternate infinite cubic-bezier(0.42, 0, 0.58, 1); +} + +/* Animation */ +@keyframes bounce { + from { + transform: translateY(0px); + } + to { + transform: translateY(var(--bounce-offset)); + } +} + +.one { + --bounce-offset: -4px; + animation-duration: 400ms; +} + +.two { + --bounce-offset: -6px; + animation-duration: 550ms; +} + +.three { + --bounce-offset: -8px; + animation-duration: 400ms; +} + +.four { + --bounce-offset: -10px; + animation-duration: 450ms; +} + +.five { + --bounce-offset: -12px; + animation-duration: 500ms; +} + +.six { + --bounce-offset: -4px; + animation-duration: 400ms; +} + +.bio { + display: block; + color: var(--my-black); + font-family: "Playfair Display"; + font-size: 2vw; + font-style: normal; + font-weight: normal; + text-align: center; + margin: 5rem; + border-top: 0.5px solid var(--my-black); + border-bottom: 0.5px solid var(--my-black); + padding: 20px 0; +} + +.project-header { + font-size: 4vw; + font-weight: 500; + text-align: center; + text-transform: uppercase; + padding-bottom: 20px; + margin-top: 50px; + border-bottom: 3px solid var(--my-black); +} + +.projects { + border-bottom: 1px solid var(--my-black); +} + +.projects:hover { + background-color: var(--my-black); + color: var(--sec-accent-color); + transition: all 1.5s ease; + cursor: pointer; +} + +.projects-right { + text-align: right; + min-width: 20%; + line-height: 12px; + display: flex; + flex-direction: column; + align-items: end; + text-align: -webkit-right; +} + +.projects-left { + min-width: 20%; + text-align: left; +} + +.project-info { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 10px; + height: 70px; +} + +.project-name { + font-size: 17px; + text-align: center; + font-weight: 600; +} + +.pull-requests { + text-align: center; +} + +.commits { + text-align: center; + margin-bottom: 10px; +} + +.project-url { + line-height: 12px; +} + +.process-header { + font-size: 4vw; + font-weight: 500; + text-align: center; + text-transform: uppercase; + margin-top: 50px; +} + +.chart-wrapper { + width: 57%; + margin: 22px auto; + margin-bottom: 60px; +} + +.footer-text { + font-size: 12px; + font-family: "poppins"; + font-weight: normal; + text-align: center; + margin: 2rem 0 1rem 0; + color: var(--my-black); +} + +footer { + height: 80px; + background-color: var(--sec-accent-color); + display: flex; + justify-content: center; +} + +/* Media Query - Tablet */ +@media screen and (min-width: 768px) { + body { + border: solid var(--sec-accent-color) 22px; + } + + a, + p { + font-size: 10px; + } + + .one { + --bounce-offset: -30px; + animation-duration: 400ms; + } + + .two { + --bounce-offset: -15px; + animation-duration: 250ms; + } + + .three { + --bounce-offset: -20px; + animation-duration: 300ms; + } + + .four { + --bounce-offset: -25px; + animation-duration: 350ms; + } + + .five { + --bounce-offset: -30px; + animation-duration: 400ms; + } + + .six { + --bounce-offset: -35px; + animation-duration: 450ms; + } + + .bio { + margin: 15rem 8rem; + padding: 50px; + font-size: 2.5vw; + } + + .project-name { + font-size: 3rem; + } + + .project-header { + padding-bottom: 45px; + } + + .project-info { + height: 120px; + } + + .process-header { + margin-top: 100px; + } + + .chart-wrapper { + width: 30%; + } + + footer { + height: 80px; + } +}