Technigo · hemmahosjessi · Sep 27, 2021 · Sep 27, 2021 · Sep 27, 2021 · Sep 28, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
 # GitHub Tracker
+The gitHub tracker project was all about fetching the repositories from my gitHub that was forked from Technigo, and get some user info and project info.
 
-Replace this readme with your own information about your project.
+## The problem
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+I really liked this project, even if I have a really hard time with the javascript syntax. This week I gave the live sessions a repetition which gave a lot. I decided how I wanted to structure tha page and had to make som changes and additions in both html file and inner.html in the javascript file. I also managed to change the type of chart I used. 
 
-## The problem
+If I hade more time I would like to look at how to implement a searchfield to be able to search for repos. Did try to implement a popup. But actually gave up 😅 and decided to try out a more simple tooltip. 
 
-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?
+It was a bit frustrating to work with only 60 requests per hour... Need to learn how to get past that problem! 
 
 ## 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.
+Here is my deployed site on Netifly. 
+https://vigilant-mestorf-12aeff.netlify.app/
diff --git a/code/.DS_Store b/code/.DS_Store
diff --git a/code/GitHub-Icon-White-Logo.wine.svg b/code/GitHub-Icon-White-Logo.wine.svg
diff --git a/code/arrow-right.svg b/code/arrow-right.svg
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,33 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const drawChart = (amount)=> {
+const config = {
+  type: 'bar',
+  data: {
+    labels: [
+      'Finished',
+      'Left',
+      'Total',
+    ],
+    datasets: [{
+      label: 'Bootcamp projects',
+      data: [amount, 19-amount, 19],
+      barPercentage: 100,
+      barThickness: 60,
+      maxBarThickness: 100,
+      borderRadius: 4,
+      // minBarLength: 10,
+      backgroundColor: [
+        'rgba(60, 179, 113)',
+        'rgba(255, 99, 132)',
+        'rgba(255, 159, 64)',
+      ],
+
+      hoverOffset: 4
+    }]
+  },
+}
+const theChart = new Chart (ctx, config)
+}
diff --git a/code/f_logo_RGB-White_250.png b/code/f_logo_RGB-White_250.png
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <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>
-  <link rel="stylesheet" href="./style.css" />
-</head>
-<body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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=Poppins:wght@100;300;600&display=swap" rel="stylesheet">
+    <title>Project GitHub Tracker</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=6158607bfeb2560019eec8c7&product=inline-reaction-buttons" async="async"></script>
+  </head>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <body>
+    <header class="header">
+      <h1>GitHub Tracker</h1>
+      <img class="github-logo" src="./GitHub-Icon-White-Logo.wine.svg" alt="github-logo">
+    </header>
+
+    <main class="main">
+      <section class="left-area">
+        <div class="profile" id="profile"></div>
+        <div class="chart">
+          <canvas id="chart"></canvas>
+        </div>
+      </section>  
+
+      <section class="right-area">
+        <h2>Project repositories / Technigo Frontend Bootcamp 2021/22</h2>
+        <div class="project-grid" id="projects"> </div>
+      </section>  
+    </main>
+
+    <footer class="footer">
+      <div class="technigo">
+        <img class="technigo-logo" src="./logo.svg" alt="technigo-logo">
+        <a href="https://www.technigo.io/">Check them out</a>
+      </div>
+      <div class="more-about-me">
+        <p>More about me</p>
+        <a href="https://www.linkedin.com/in/jessi-nygren-walhed-7bb81010/">
+          <img class="social-logo" src="./linkedIn.png" alt="LinkedIn logo">
+        </a>
+        <a href="https://www.instagram.com/hemmahosjessi/">
+          <img class="social-logo" src="./instagram.png" alt="Instagram logo">
+        </a>
+        <a href="https://www.facebook.com/jessi.walhed">
+          <img class="social-logo" src="./f_logo_RGB-White_250.png" alt="Facebook logo">
+        </a>
+      </div>
+    </footer>
 
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
-</body>
-</html>
+  </body>
+</html> 
diff --git a/code/instagram.png b/code/instagram.png
diff --git a/code/linkedIn.png b/code/linkedIn.png
diff --git a/code/logo.svg b/code/logo.svg