diff --git a/README.md b/README.md index 1613a3b0..e86dc645 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 task was to create a GitHub tracker, that displays information related to the Technigo projects 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 wanted to try writing async functions, maybe the result is more complicated than using the .fetch method, but I learned a lot about the async of JS. Used flex and grid to display the data. ## 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://meeteyes.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..81cbabbf 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,22 @@ //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: ["Finished", "Upcoming"], + datasets: [ + { + label: "Bootcamp projects", + data: [amount, 20 - amount], + backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)"], + hoverOffset: 4, + }, + ], + }, + }; + + const MyChart = new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 2fb5e0ae..95c2013c 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,29 @@ -
- - - -