diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..62636c51 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..c80900c9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..77480f02 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 goal of this project was to create a simple portfolio looking website, displaying information about yourself and your projects. The challenge was that all the info would be fetched from Github. ## 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? +In this project I found it challenging to correctly source the information that I wanted to display. I solved this by console loging all my fetched data and taking the time to understand the data returned to me. I also found the styling of the chart tricky. If I would have had more time I would have wanted to style the chart more and display more information about the projects, fetched 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. +https://hopeful-jennings-863724.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..ca25dcea 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,39 @@ -//DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +//DOM-selector for the canvas +const ctx = document.getElementById("chart").getContext("2d"); + +//General styling of chart +Chart.defaults.font.size = 8; +Chart.defaults.color = "#1E1E24"; + +//Amount of repos fetched from fetchRepos function in JS file +const drawChart = (amount) => { + const labels = [ + 'Projects done', + 'Projects to do', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'Technigo projects', + data: [amount, 19-amount], + backgroundColor: ['#90A955', '#C4B2BC' ], + borderColor: '#FFF8F0', + }] + }; + + const config = { + type: 'doughnut', + data: data, + options: { + responsive: true, + maintainAspectRatio: false, + } + }; + + const myChart = new Chart( + document.getElementById('chart'), + config + ); + } -//"Draw" the chart here 👇 diff --git a/code/index.html b/code/index.html index 2fb5e0ae..b7745731 100644 --- a/code/index.html +++ b/code/index.html @@ -5,17 +5,38 @@