Technigo · Dorothea-B · Feb 24, 2022 · Feb 24, 2022 · Feb 25, 2022 · Feb 25, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+code/secret.js
diff --git a/README.md b/README.md
@@ -1,13 +1,10 @@
 # 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 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?
 
 ## 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://dorotheas-tracker.netlify.app
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/assets/.DS_Store b/code/assets/.DS_Store
diff --git a/code/assets/GitHub-Mark-64px.png b/code/assets/GitHub-Mark-64px.png
diff --git a/code/assets/GitHub-Mark-Light-64px.png b/code/assets/GitHub-Mark-Light-64px.png
diff --git a/code/assets/bubble-1.png b/code/assets/bubble-1.png
diff --git a/code/assets/bubble-2.png b/code/assets/bubble-2.png
diff --git a/code/assets/bubble-3.svg b/code/assets/bubble-3.svg
diff --git a/code/assets/bubble-4.svg b/code/assets/bubble-4.svg
diff --git a/code/assets/git_pull_request_icon_175163.svg b/code/assets/git_pull_request_icon_175163.svg
diff --git a/code/assets/mulan.gif b/code/assets/mulan.gif
diff --git a/code/assets/tvmask.png b/code/assets/tvmask.png
diff --git a/code/assets/tvmask.svg b/code/assets/tvmask.svg
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,52 @@
+const counterDiv = document.querySelector('projectCounter');
+
+
+Chart.defaults.font.family = 'Miriam Libre, sans-serif';
+Chart.defaults.font.size = 12;
+
+const drawCounter = (finishedProjects) => {
+
+  counterDiv.innerHTML += `Finished projects: ${finishedProjects} <br> Projects to go: ${19-finishedProjects}`
+
+}
+
 //DOM-selector for the canvas 👇
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+const drawChart = (finishedProjects) => {
+
+
+  const data = {
+    labels: ['Finished','Unfinished'],
+    datasets: [{
+      label: 'My First dataset',
+      backgroundColor: [
+        '#211d31d2',
+                         '#FFFFFF',
+                         ],
+
+      borderWidth: '0',
+      data: [finishedProjects, 19-finishedProjects],
+    }]
+  };
+
+  const config = {
+    type: 'pie',
+  data: data,
+  options: {
+      plugins: {
+
+        legend: {
+        display: false
+        },
+    },
+    responsive: true,
+
+    }
+
+  };
+
+  const myChart = new Chart( ctx, config );
+
+}
diff --git a/code/index.html b/code/index.html
@@ -4,18 +4,84 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Project GitHub Tracker</title>
+  <title>Dorothea's GitHub Tracker</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Miriam+Libre:wght@400;700&family=Urbanist:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./style.css" />
+
+  <!-- --------- external javascript for the chart -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+  <!-- --------------hidden API-token -->
+  <script src="./secret.js"></script>
+
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
+
+  <!-- HEADER -->
+  <!-- Header background block -->
+  <div class="square1"></div>
+
+  <header>
+  <!-- profile pic and username (dynamic) -->
+  <div id="user-info"></div> 
+
+<!-- the chart is placed inside of a mask to achieve the speech-bubble-look -->
+  <div class="progress-bubble"><div class="chartmask"><canvas id="chart"></canvas></div></div>
+  <div class="projectCounter"></div>
+
+  </header>
+
+  <!-- PROJECTS -->
   <main id="projects"></main>
+
+  <!-- BOTTOM -->
+  <div class="footer">
+  <!-- Footer background block -->
+  <div class="square2"></div>
+
+          <h2 class= "gettingthere">...getting there!<h2>
+          <div class="computer">
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+                <div class="gif" alt="Mulan at bootcamp" style="width:100%;height:0;padding-bottom:60%;position:absolute;">
+                  <img src="./assets/mulan.gif" width="100%" height="100%" style="position:absolute;"  frameBorder="0" >
+                </div>
+
+              <!-- Computer illustration. Instead of linking to an external svg I put it in directly -->
+              <svg viewBox="0 0 315 229" fill="none">
+                  <path d="M157.974 0.425384C139.597 0.366764 62.6288 0.366764 44.2515 0.366764C36.8068 0.366764 29.3328 0.513314 21.8881 0.337454C17.3157 0.220215 13.0365 3.50292 13.0365 9.33559C13.0365 14.67 13.0072 19.9751 13.0365 25.3095C13.0365 26.1302 13.1244 26.9802 13.3296 27.7715C13.4175 28.0939 13.9451 28.5922 14.1795 28.5336C14.5606 28.475 15.0882 28.0646 15.1468 27.7129C15.3519 26.6577 15.4399 25.5733 15.4399 24.5181C15.4692 19.4475 15.5864 14.3476 15.3813 9.27697C15.1761 5.496 17.9605 2.50639 22.0639 2.5357C47.2997 2.59432 131.185 2.56501 156.45 2.56501C156.889 2.56501 157.358 2.62363 158.003 2.68225C157.476 3.29775 156.919 3.88395 156.391 4.44084C157.915 3.53223 158.765 1.74433 159.82 0.220215C159.234 0.366764 158.648 0.425384 157.974 0.425384Z" fill="white"/>
+                  <path d="M291.305 20.4733C291.305 15.0216 287.319 11.0355 281.984 11.182C272.283 11.4458 262.552 11.2407 252.821 11.2407C243.794 11.2407 146.807 11.27 137.78 11.2407C138.63 11.9734 139.45 12.7062 140.242 13.4682C158.414 13.4682 264.545 13.4682 282.717 13.4682C286.674 13.4682 289.077 16.0768 289.077 20.2681C289.077 33.7507 289.077 47.2332 289.077 60.7158C289.077 100.079 289.077 139.471 289.077 178.835C289.077 183.202 286.615 185.635 282.277 185.635C206.57 185.635 130.863 185.635 55.1258 185.635C47.5638 185.635 39.9726 185.635 32.4106 185.635C28.4538 185.635 26.0211 183.231 26.0211 179.274C26.0211 126.135 26.0211 72.9966 26.0211 19.8285C26.0211 15.813 28.3952 13.4389 32.3813 13.4389C50.9345 13.4389 128.137 13.4389 146.69 13.4389C147.217 13.4389 147.774 13.4389 148.595 13.4389C149.035 12.6769 149.445 11.8855 149.797 11.0941C149.328 11.2114 148.83 11.27 148.273 11.27C129.075 11.2114 51.2569 11.2407 32.0589 11.2407C28.4538 11.2407 25.8159 12.9113 24.4676 16.194C23.8814 17.6302 23.7056 19.3302 23.7056 20.9129C23.6763 56.9055 23.6763 92.9274 23.6763 128.92C23.6763 145.48 23.6763 162.04 23.6763 178.6C23.6763 180.593 23.9401 182.498 25.1125 184.169C26.9883 186.836 29.5676 187.891 32.7916 187.891C115.885 187.862 198.979 187.862 282.072 187.862C287.876 187.862 291.305 184.521 291.305 178.717C291.305 173.295 291.305 167.873 291.305 162.45C291.246 115.144 291.217 67.8088 291.305 20.4733Z" fill="white"/>
+                  <path d="M301.827 9.18915C301.827 3.97199 298.368 0.366873 293.327 0.337563C275.8 0.308254 258.272 0.249634 240.745 0.249634C232.069 0.249634 135.435 0.337563 126.759 0.308254C126.7 0.308254 126.612 0.308254 126.554 0.308254C127.316 1.07031 128.049 1.80306 128.84 2.56512C129.367 2.56512 129.807 2.56512 130.247 2.56512C140.417 2.56512 238.576 2.56512 248.776 2.56512C263.284 2.56512 277.793 2.56512 292.301 2.56512C293.444 2.56512 294.705 2.59443 295.76 3.00476C298.574 4.14785 299.658 6.46333 299.658 9.42363C299.629 40.5507 299.599 71.6485 299.599 102.776C299.599 121.094 299.629 139.413 299.658 157.732C299.658 159.051 299.658 160.37 299.834 161.689C299.892 162.128 300.449 162.509 300.772 162.89C301.036 162.509 301.505 162.128 301.563 161.718C301.739 160.223 301.856 158.699 301.856 157.204C301.886 127.836 301.886 98.4964 301.886 69.1279C301.827 49.1385 301.827 29.1785 301.827 9.18915Z" fill="white"/>
+                  <path d="M157.534 200.993C192.413 200.993 227.292 200.993 262.141 200.993C276.942 200.993 291.744 201.081 306.545 200.964C312.642 200.905 315.016 204.745 314.635 209.962C313.902 220.338 304.875 228.75 294.47 228.955C293.209 228.984 291.92 228.955 290.66 228.955C272.839 228.955 255.019 228.955 237.198 228.955C207.419 228.955 177.611 228.955 147.832 228.955C112.133 228.955 76.4335 228.955 40.7633 228.955C33.5531 228.955 26.3429 229.101 19.1326 228.867C8.66899 228.515 -0.417082 218.081 0.374285 207.617C0.667384 203.836 2.98287 201.403 6.76384 201.052C7.73107 200.964 8.72761 200.993 9.69483 200.993C57.4113 200.993 105.128 200.993 152.844 200.993C154.398 200.993 155.951 200.993 157.534 200.993ZM157.505 203.162C155.893 203.162 154.281 203.162 152.669 203.162C125.469 203.162 98.2693 203.162 71.0405 203.162C61.4268 203.162 51.8132 203.162 42.1702 203.162C30.8273 203.162 19.5136 203.133 8.17072 203.162C4.18457 203.162 2.1915 205.36 2.39667 209.258C2.89494 218.843 11.1896 226.727 20.8326 226.727C64.7974 226.727 108.762 226.727 152.698 226.727C188.69 226.727 224.683 226.727 260.705 226.727C272.048 226.727 283.361 226.786 294.704 226.698C303.702 226.639 311.997 218.579 312.495 209.61C312.73 205.36 310.678 203.133 306.487 203.133C288.52 203.133 270.553 203.133 252.586 203.133C220.873 203.162 189.189 203.162 157.505 203.162Z" fill="white"/>
+                  <path d="M15.3809 113.708C15.3809 138.856 15.3809 164.004 15.3809 189.152C15.3809 192.288 16.5827 194.34 19.1619 195.278C20.0412 195.6 21.0671 195.688 22.0343 195.688C31.1204 195.717 40.2064 195.688 49.2925 195.688C50.1718 195.688 51.0511 195.747 51.9011 195.952C52.2821 196.04 52.5459 196.597 52.8683 196.948C52.5459 197.241 52.2235 197.74 51.8718 197.798C50.7287 197.974 49.527 198.033 48.3839 198.033C39.6495 198.003 30.9152 197.974 22.1515 197.915C16.4361 197.886 13.0655 194.545 13.0362 188.8C13.0068 174.438 13.0068 160.076 13.0068 145.715C13.0068 109.517 13.0068 73.3484 13.0068 37.1507C13.0068 36.799 12.9189 36.3886 13.0948 36.1541C13.3586 35.7438 13.7689 35.1869 14.1206 35.1576C14.4723 35.1283 15.0585 35.6852 15.1758 36.0662C15.3809 36.7403 15.3516 37.5024 15.3516 38.2351C15.3809 63.4123 15.3809 88.5602 15.3809 113.708Z" fill="white"/>
+                  <path d="M282.365 195.717C285.824 195.717 289.312 195.571 292.77 195.747C297.46 195.981 299.746 192.347 299.658 188.829C299.512 183.026 299.6 177.193 299.629 171.39C299.629 170.511 299.219 169.104 300.655 169.075C302.179 169.045 301.827 170.481 301.827 171.419C301.856 177.193 301.827 182.938 301.827 188.712C301.827 194.398 298.662 197.857 292.976 197.974C285.795 198.091 278.614 197.974 271.433 197.974C270.905 197.974 270.319 198.091 269.85 197.915C269.44 197.769 268.912 197.271 268.912 196.89C268.912 196.509 269.381 196.01 269.791 195.805C270.143 195.6 270.641 195.717 271.081 195.717C274.833 195.688 278.614 195.717 282.365 195.717Z" fill="white"/>
+                  <path d="M170.078 194.105C170.049 195.307 169.258 196.069 168.027 196.069C166.796 196.069 165.946 195.19 165.975 193.929C166.004 192.757 166.883 191.907 168.027 191.907C169.199 191.936 170.108 192.874 170.078 194.105Z" fill="white"/>
+                  <path d="M159.644 193.959C159.673 195.16 158.735 196.069 157.534 196.069C156.391 196.069 155.482 195.19 155.453 194.076C155.423 192.933 156.449 191.907 157.563 191.936C158.706 191.936 159.644 192.874 159.644 193.959Z" fill="white"/>
+                  <path d="M147.188 196.069C145.986 196.098 145.107 195.307 145.077 194.164C145.048 192.874 145.84 191.966 147.041 191.907C148.214 191.848 149.152 192.757 149.152 193.988C149.152 195.219 148.36 196.04 147.188 196.069Z" fill="white"/>
+                  <path d="M157.475 212.336C169.932 212.336 182.389 212.307 194.816 212.394C195.871 212.394 197.132 212.863 197.952 213.508C199.037 214.388 199.213 215.794 198.714 217.143C198.187 218.55 197.102 219.282 195.607 219.487C195.168 219.546 194.728 219.517 194.288 219.517C169.668 219.517 145.077 219.517 120.457 219.487C119.343 219.487 118.112 219.165 117.203 218.579C115.972 217.788 115.591 216.439 116.031 214.944C116.471 213.391 117.555 212.6 119.079 212.394C119.548 212.336 120.047 212.365 120.545 212.365C132.884 212.336 145.194 212.336 157.475 212.336ZM157.622 214.534C145.4 214.534 133.207 214.534 120.984 214.534C120.457 214.534 119.841 214.417 119.402 214.622C118.903 214.857 118.171 215.443 118.2 215.794C118.259 216.322 118.845 216.85 119.343 217.231C119.578 217.436 120.105 217.319 120.486 217.319C145.106 217.319 169.727 217.319 194.318 217.319C194.845 217.319 195.49 217.348 195.871 217.084C196.282 216.82 196.692 216.146 196.633 215.736C196.575 215.325 195.988 214.886 195.52 214.651C195.168 214.475 194.67 214.593 194.23 214.593C182.037 214.534 169.815 214.534 157.622 214.534Z" fill="white"/>
+              </svg>   
+            </div>
+        </div>
+
+
+</div>
+
+
+<!-- Links to JS Files -->
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
+
+  <!-- I tried installing a service worker in order to work offline (couldnt get it to work though so disregard this code):  -->
+  <script>
+    if('serviceWorker' in navigator) {
+      navigator.serviceWorker
+               .register('/sw.js')
+               .then(function() { console.log("Service Worker Registered"); });
+    }
+    </script>
+
 </body>
-</html>
+</html>
+