Technigo · Mimmisen · Feb 22, 2022 · Feb 23, 2022 · Feb 23, 2022 · Feb 23, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,13 +1,21 @@
 # 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.
+This week, we have created a place to keep track of the GitHub repos that we are crating at Technigo. We have continued practicing on JavaScript and 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?
+Process
+designed page using figma
+Fetched data from API and displayed it to fulfill the requirements.
+Created a chart for the progress.
+Styled the page.
+
+I started by adding my token to the project. I then collected all the info about my repos with the fetch() method.
+I then builded functions to us the information I needed and displayed it on my page. I also created a chart showing
+how many projects I have done and have left to do during my technigo education.
+
+If I had more time I would add more information about every repo: languages used for the project, review comments and link to netlify.
 
 ## 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://github-tracker-bymimmi.netlify.app/
diff --git a/code/.gitignore b/code/.gitignore
@@ -0,0 +1,29 @@
+# Personal token 
+secret.js  
+# why can't I put code/ boefore secret.js lite the tutorial ?
+
+
+# # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# 
+# 
+# # Ignore Mac system files
+# .DS_store
+# 
+# # Ignore node_modules folder
+# node_modules
+# 
+# # Ignore all text files
+# *.txt
+# 
+# # Ignore files related to API keys
+# .env
+# 
+# # misc
+# /.pnp
+# .pnp.js
+# npm-debug.log*
+# yarn-debug.log*
+# yarn-error.log*
+# 
+# # other
+# token.js
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,29 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const showChart = (countRepos) => {
+  const ctx = document.getElementById("chart").getContext("2d");
 
-//"Draw" the chart here 👇
+  const labels = [`Finished projects`, `Projects left`];
+
+  const data = {
+    labels: labels,
+    datasets: [
+      {
+        label: "My Technigo projects",
+        backgroundColor: ["#9E9FCF", "#484B76"],
+        borderColor: "rgb(66, 66, 66)",
+        data: [countRepos, 19 - countRepos],
+      },
+    ],
+  };
+
+  Chart.defaults.font.family = "Source Serif Pro";
+  Chart.defaults.font.size = "20";
+  Chart.defaults.color = "#000000";
+
+  const config = {
+    type: "pie",
+    data: data,
+    options: {},
+  };
+
+  const myChart = new Chart(ctx, config);
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,39 @@
 <!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>Mimmis Project GitHub Tracker</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!--font-->
+    <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=Source+Serif+Pro&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header id="headerBox">
+      <h1>GitHub Tracker</h1>
+      <h3>Technigo Student Spring 2022</h3>
+    </header>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <main>
+      <section class="projects">
+        <div class="section-projects__container" id="section-projects"></div>
+      </section>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+      <!-- This will be used to draw the chart 👇 -->
+      <canvas id="chart" class="chart">
+        <p id="numberOfProjects" class="number-of-projects"></p>
+      </canvas>
+    </main>
+
+    <script src="./chart.js"></script>
+    <script src="./secret.js"></script>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,111 @@
+const username = "Mimmisen";
+const API_URL = `https://api.github.com/users/${username}`;
+const REPOS_URL = `https://api.github.com/users/${username}/repos`;
+
+// function for token
+const options = {
+  method: "GET",
+  headers: {
+    Authorization: `token ${API_TOKEN}`,
+  },
+};
+//----------------------------------FETCH 1-------------------------------------
+// getting profile pic,user name and link to my github
+fetch(API_URL, options)
+  .then((res) => res.json())
+  .then((data) => {
+    headerBox.innerHTML += `
+    <div>
+    <a href="${API_URL}">
+    <img src="${data.avatar_url}" alt="Avatar of ${data.login}">
+    </a>
+    </div>
+    <a href="https://github.com/Mimmisen"><h1 class="username">${data.login}<h1></a>
+    <div class="my-name">Mimmi Fordal Uddin</div>
+
+    `;
+  });
+
+//----------------------------------FETCH 2-------------------------------------
+fetch(REPOS_URL, options)
+  .then((res) => res.json())
+  .then((data) => {
+    //To get my projects and filter them so only the ones starting with projects are displayed
+    const technigoProjects = data.filter(
+      (repo) => repo.name.startsWith("project-") && repo.fork
+    );
+    showChart(technigoProjects.length);
+
+    technigoProjects.forEach((repo) => {
+      const reponame = repo.name;
+
+      fetchTechnigo(reponame);
+
+      const projectUrl = repo.html_url;
+
+      const defaultBranch = repo.default_branch;
+
+      const latestPushRepo = new Date(repo.updated_at).toLocaleDateString(
+        "sv-SE",
+        {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        }
+      );
+
+      //displaying project url, name and latest push
+      document.getElementById("section-projects").innerHTML += `
+      <div class="section-projects__card box-style">
+      <div>
+     <h3 class="repo-title bold-text"><a class="nav-link" href='${projectUrl}'>${reponame}</a></h3>
+     <p><span class="bold-text">Latest update:</span> ${latestPushRepo}</p>
+     <p id="commits-${reponame}"></p>
+     <p> default branch: ${defaultBranch}</p>
+     </div>
+     </div>
+     `;
+    });
+  });
+
+// function for the commits url and name
+const displayCommits = (commitsUrl, reponame) => {
+  fetch(commitsUrl, options)
+    .then((res) => res.json())
+    .then((data) => {
+      document.getElementById(`commits-${reponame}`).innerHTML = `
+        <p class="bold-text">Amount of commits: ${data.length}
+        </p>
+        `;
+    });
+};
+
+//function to get the latest push to repo
+const fetchTechnigo = (reponame) => {
+  fetch(
+    `https://api.github.com/repos/Technigo/${reponame}/pulls?per_page=100`,
+    options
+  )
+    .then((res) => res.json())
+    .then((data) => {
+      data.forEach((repo) => {
+        const commitsUrl = repo.commits_url;
+        if (repo.user.login === username) {
+          displayCommits(commitsUrl, reponame);
+        } else if (
+          repo.user.login === "sukiphan97" &&
+          reponame === "project-chatbot"
+        ) {
+          displayCommits(repo.commits_url, reponame);
+        } else if (
+          repo.user.login === "kolkri" &&
+          reponame === "project-weather-app"
+        ) {
+          displayCommits(repo.commits_url, reponame);
+        } else {
+          document.getElementById(`commits-${reponame}`).innerHTML =
+            "No commits for this repo";
+        }
+      });
+    });
+};
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,85 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
 body {
-  background: #FFECE9;
-}
+  background: #ffece9;
+  font-family: "Source Serif Pro", serif;
+  background-image: linear-gradient(#ccccff, #ffff);
+}
+
+header {
+  display: grid;
+  justify-items: center;
+}
+
+/* header text */
+h1 {
+  margin: 0.5rem;
+  color: #ffffff;
+  font-size: 3rem;
+}
+
+/* description text */
+h3 {
+  margin: 0.5rem;
+  color: #ffffff;
+}
+
+.username {
+  font-size: 25px;
+}
+
+.my-name {
+  font-size: 35px;
+}
+
+img {
+  width: 300px;
+  border-radius: 50%;
+  margin-block: 2em;
+}
+
+/* link to my github and repos */
+a,
+a:active {
+  text-decoration: none;
+}
+
+a.nav-link,
+a.nav-link:active {
+  position: relative;
+  color: black;
+}
+
+.section-projects__container {
+  padding: 2em 0;
+  min-height: 100%;
+  display: grid;
+  gap: 1em;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  justify-content: center;
+  justify-items: center;
+}
+
+.section-projects__card {
+  background: #f9f8ff;
+  border-radius: 0.5em;
+  width: 300px;
+  padding: 1em;
+  margin: 1em;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+canvas {
+  margin: 2rem;
+}
+
+@media screen and (min-width: 768px) {
+  .chart {
+    max-height: 60vh;
+  }
+}