Technigo · DALA746 · Sep 27, 2021 · Sep 28, 2021 · Sep 30, 2021 · Oct 1, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/README.md b/README.md
@@ -1,13 +1,10 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+A simple copy of GitHub. With that project I learned how to fetch an API, how JavaScript functions communicate with each others and how to display data from API.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+UPDATE 2.0
+For this update of ther project, I added a search functionality.
 
-## The problem
+# View it live
 
-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.
+Demo: https://github-tracker-by-darya.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,19 @@
-//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 = (number) => {
+  const config = {
+    type: 'doughnut',
+    data: {
+      labels: ['Done', 'Todo'],
+      datasets: [
+        {
+          label: 'My first Dataset',
+          data: [number, 20 - number], // divide donut to 2 different parts
+          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
@@ -1,21 +1,53 @@
 <!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" />
+    <title>GitHub Tracker</title>
+    <link
+      rel="stylesheet"
+      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
+      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
+      crossorigin="anonymous"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <nav class="topnav">
+      <div class="logo-container">
+        <i class="fab fa-github fa-4x"></i>
+        <h1>GitHub Tracker</h1>
+      </div>
+      <div class="input-container">
+        <input
+          type="text"
+          placeholder="Search.."
+          name="search"
+          id="searchbar"
+        />
+        <button type="submit" id="button"><i class="fa fa-search"></i></button>
+      </div>
+    </nav>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <section class="statistics-container">
+      <div id="header" class="user-information"></div>
+      <div class="stats-and-project-wrapper">
+        <div>
+          <h2>SOME FANCY STATS</h2>
+          <div
+            class="chart-container"
+            style="position: relative; height: 300px; width: 300px"
+          >
+            <canvas id="chart"></canvas>
+          </div>
+        </div>
+        <div id="projects" class="project-container"></div>
+      </div>
+    </section>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+    <script src="./script.js"></script>
+    <script src="./chart.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,97 @@
+// main fetch and function and put the DOM here
+const projectsContainer = document.getElementById('projects');
+const headerContainer = document.getElementById('header');
+const USER = 'DALA746';
+const ALL_MY_REPOS = `https://api.github.com/users/${USER}/repos`;
+
+const button = document.getElementById('button');
+
+const searchProject = () => {
+  let input = document.getElementById('searchbar').value;
+  input = input.toLowerCase();
+  let repo = document.getElementsByClassName('repo');
+
+  for (i = 0; i < repo.length; i++) {
+    if (!repo[i].innerHTML.toLowerCase().includes(input)) {
+      repo[i].style.display = 'none';
+    } else {
+      repo[i].style.display = 'block';
+    }
+  }
+};
+
+const renderHTML = (repos) => {
+  console.log(repos);
+  repos.forEach((repo) => {
+    headerContainer.innerHTML = `
+    <div class="info-about-user">
+      <img class="profile-img"src="${repo.owner.avatar_url}" />
+    </div>
+    <h3>${repo.owner.login}</h3>
+    <div>SOME STATS</div>
+
+  `;
+    projectsContainer.innerHTML += `
+    <div class="repo"> 
+      <a href="${
+        repo.clone_url
+      }"  target="_blank"><div class="icon-container"><i class="fal fa-book" style="font-size:25px;color:var(--grey);"></i><h3>${
+      repo.name
+    }</h3></div> </a>
+      <p id="commit-${repo.name}"><span class="bold">Commits amount: </span></p>
+      <p><span class="bold">Language:</span> ${repo.language}</p>
+      <p><span class="bold">Latest push update:</span> ${new Date(
+        repo.pushed_at
+      ).toDateString()}</p>
+      <p><span class="bold">Default branch:</span> ${repo.default_branch}</p>
+    </div>
+  `;
+  });
+};
+
+const getRepos = () => {
+  fetch(ALL_MY_REPOS)
+    .then((res) => res.json())
+    .then((json) => {
+      console.log(json);
+      const forkedRepos = json.filter(
+        (repo) => repo.fork && repo.name.startsWith('project-')
+      );
+      drawChart(forkedRepos.length);
+      renderHTML(forkedRepos);
+      // getPullRequests(forkedRepos);
+    });
+};
+
+getRepos();
+
+// GETTING ALL MY PULL REQUESTS
+// const getPullRequests = (forkedRepos) => {
+//   forkedRepos.forEach((repo) => {
+//     fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls`)
+//       .then((res) => res.json())
+//       .then((data) => {
+//         console.log(data);
+//         const myPullRequests = data.find(
+//           (pull) => pull.user.login === repo.owner.login
+//         );
+//         console.log(myPullRequests, 'data');
+//         getCommits(myPullRequests.commits_url, repo.name);
+//       });
+//   });
+// };
+
+const getCommits = (url, myRepoName) => {
+  fetch(url)
+    .then((res) => res.json())
+    .then((data) => {
+      const numberOfCommits = data.length;
+      document.getElementById(`commit-${myRepoName}`).innerHTML +=
+        numberOfCommits;
+    });
+};
+
+button.addEventListener('click', (e) => {
+  e.preventDefault();
+  searchProject();
+});
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,171 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic');
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --dark: #161b22;
+  --darker: #0d1117;
+  --white: #fafafa;
+  --light-grey: #c9d1d9;
+  --grey: #8b949e;
+  --blue: #58a6ff;
+}
+
 body {
-  background: #FFECE9;
-}
+  background: var(--darker);
+  color: var(--grey);
+  font-family: 'Montserrat';
+  margin: 0;
+}
+
+p {
+  font-size: 16px;
+}
+
+a {
+  color: var(--blue);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+/* navbar */
+.topnav {
+  overflow: hidden;
+  background-color: var(--dark);
+  padding: 10px 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.logo-container {
+  display: flex;
+  gap: 15px;
+}
+
+.input-container {
+  display: flex;
+  width: 100%;
+  max-width: 250px;
+  margin: 10px auto;
+}
+
+input {
+  width: 100%;
+  border-radius: 10px 0 0 10px;
+  border: none;
+}
+
+button {
+  border-radius: 0 10px 10px 0;
+  border: none;
+  background-color: var(--light-grey);
+}
+
+input,
+button {
+  padding: 10px;
+}
+
+.statistics-container {
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  max-width: 1500px;
+  margin: 0 auto;
+}
+
+.user-information {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 30px;
+}
+
+.info-about-user {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+.profile-img {
+  width: 200px;
+  border-radius: 50%;
+  margin: 10px;
+}
+
+.project-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+
+.stats-and-project-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  gap: 30px;
+}
+
+.repo {
+  border: 1px solid var(--grey);
+  border-radius: 5px;
+  padding: 10px;
+  width: 100%;
+  max-width: 491px;
+}
+
+.doughnut {
+  width: 100%;
+}
+
+.logo-img {
+  height: 30px;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.chart-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@media screen and (min-width: 610px) {
+  .topnav {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .input-container {
+    display: flex;
+    align-items: center;
+    margin: 0;
+  }
+}
+
+@media screen and (min-width: 768px) {
+}
+
+@media screen and (min-width: 1115px) {
+  .statistics-container {
+    flex-direction: row;
+    align-items: start;
+  }
+}