Technigo · sk-phan · Feb 23, 2022 · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+# Ignore environmental API keys
+.env
+
+# Other
+code/secret.js
diff --git a/README.md b/README.md
@@ -1,13 +1,20 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+This week, we want you to create a place to keep track of the GitHub repos that we're using here at Technigo. The project is to continue practicing JavaScript and API skills with the help of GitHub's own 
 
-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?
+This week we focused on fetching and collecting datas from API. I found it challenging to collect the correct datas and display them on the matching project. It was a good practice to learn about dynamic ID and how it helped me to solve the problem above. 
 
-## View it live
+My main goal was to go through all level requirents and learn as much as possible. It took me a long time to implement the search bar and filter button. I am happy to find a solution to complete it and learned a lot about how and when to use the filter() and sort() method. Regarding to the site's user friendliness, I selected few important categories such as languages, updated time, and show all to help the user get the search result faster.
+
+## What will I improve, if I had more time 
+
+I have to admit that the search field is not yet perfect, as I aimed to implement a function for the clear ❌ button. When the user click ❌, it will display all the project's cards, instead of showing empty space. 
 
-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.
+## Figma's link: 
+https://www.figma.com/file/x2cLkf2v0G3r83hNHfUpgv/Untitled?node-id=0%3A1
+
+## View it live
+https://suki-github.netlify.app
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,48 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const updateChart = (projects) => {
+
+    const labels = [
+      ''
+    ];
+
+    const data = {
+      labels: labels,
+      datasets: [{
+        label: `Done: ${projects}`,
+        backgroundColor: ['#7365e5'],
+        data: [projects],
+      },
+      {
+        label: `Total: ${19}`,
+        backgroundColor: [ '#D6CDE9'],
+        data: [19-projects],
+      }
+    ]
+    };
+
+    const config = {
+      type: 'bar',
+      data: data,
+      options: {
+        barThickness: 30,
+        maxBarThickness: 30,
+        responsive: true,
+        indexAxis: 'y',
+        scales: {
+          x: {
+            stacked: true,
+          },
+          y: {
+            stacked: true
+          }
+        }
+      }
+    };
+    const myChart = new Chart(
+      document.getElementById('chart'),
+      config
+    );
+}
diff --git a/code/index.html b/code/index.html
@@ -4,18 +4,92 @@
   <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" />
+  <link rel="preconnect" href="https://fonts.googleapis.com"> 
+  <title>Project GitHub Tracker</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 </head>
+
+
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <div class="hidden see-more">
+    <div class="see-more-container">
+      <button class="close-modal-btn"><ion-icon name="close-circle-outline"></ion-icon></button>
+      <p class="commits">
+      </p>
+      <p class="comments-title" >💌 Comments</p>
+      <ul class="comments"> 
+      </ul>
+    </div>
+  </div>
+
+    <header class="user-info">      
+    </header>
+
+    <div class="input-container">
+      <label for="search">
+      <ion-icon name="search-outline"></ion-icon> 
+      <input type="search" class="search-input" id="search" placeholder="project weather app"/> 
+      </label> 
+
+      <select id="filter" > 
+        <optgroup label="general">
+          <option value="" selected disabled> Sort </option> 
+          <option value="Last updated"> Last updated </option>          
+
+        </optgroup>
+         <optgroup id="language-group" label="language">
+         <option value="all"> All </option> 
+         <option value="HTML"> HTML </option> 
+         <option value="JavaScript"> JavaScript </option> 
+         </optgroup>
+       </select>
+
+    </div>
+
+
+    <div class="container">
+
+      <!-- This will be used to draw the chart 👇 -->
+      <div class="canva">
+        <canvas class="chart" id="chart"></canvas>
+      </div>
+
+      <!-- This will be used to display projects 👇 -->
+      <main id="projects">
+      </main>
+
+    </div>
+
+    <footer>
+      <p>Designed & Developed by Suki Phan</p>
+      <nav>
+        <ul>
+          <li>
+            <a href="https://twitter.com/suki_phan">
+              <ion-icon name="logo-twitter"></ion-icon>
+            </a>
+          </li> 
+          <li>
+            <a href="https://github.com/sukiphan97">
+              <ion-icon name="logo-github"></ion-icon>
+            </a>
+          </li>
+          <li>
+            <a href="https://www.linkedin.com/in/nhung19/">
+              <ion-icon name="logo-linkedin"></ion-icon>
+            </a>
+          </li>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+        </ul>   
+      </nav>
+    </footer>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
+    <script src="secret.js"></script>
+    <script src="chart.js"></script>
+   <script src="script.js"></script>
+
 </body>
-</html>
+</html>