Technigo · savannah-hayes · Feb 21, 2022 · Feb 21, 2022 · Feb 22, 2022 · Feb 23, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+# api keys
+/src/javascript/config.js
+
+# misc
+.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/README.md b/README.md
@@ -1,13 +1,22 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+This project was built to track all of the repositories that I have created during my time at Technigo. The main
+purpose of this project is to display information about the projects that I have built using Githubs API.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## The project
 
-## The problem
+I started off this project by fetching all of my repositories and data from GitHubs API. Once I had all the data 
+that I needed I dispayed it on multiple pages. One page focusing on displaying the repository data and the other to 
+display the commits data. This project also include a visualization of how many projects I have done so far, compared 
+to how many I will in total using Chart.js. Lastly, I styled the pages similar to the GitHubs page layout, with the 
+mind set of mobile first.
 
-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?
+If I had more time I would add a page for my pull requests data and I would like to add a search input so that users 
+can search for a specific repositiory. Also to include a dropdown button that allows users to filter through repos 
+based off of the language they are written in. 
+
+## Demo
+
+https://savannah-github-tracker.netlify.app/
 
-## 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.
diff --git a/code/chart.js b/code/chart.js
diff --git a/code/index.html b/code/index.html
diff --git a/code/script.js b/code/script.js
diff --git a/code/style.css b/code/style.css
diff --git a/commits.html b/commits.html
@@ -0,0 +1,54 @@
+<!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>GitHub Tracker</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <link 
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
+    crossorigin="anonymous"
+    rel="stylesheet">
+  <link rel="stylesheet" href="./src/stylesheets/commits.css" />
+  <link rel="stylesheet" href="./src/stylesheets/style.css" />
+</head>
+
+<body>
+  <header id="header" class="header"></header>
+  <main class="body-wrapper">
+    <div class="aside-chart">
+      <aside class="aside" id="aside"></aside>
+      <hr>
+      <div class="chart-wrapper">
+        <canvas class="chart" id="chart">
+          <p>Your browser does not support the canvas element.</p>
+        </canvas>
+      </div>
+    </div>
+
+    <section class="commits" id="commits">
+      <div class="html-links">
+        <a href="index.html" class="links">
+          <img src="./images/book.png" class="icons" alt="book icon"> Repositories
+        </a>
+        <a href="commits.html" class="links bold-link">
+          <img src="./images/box.png" class="icons" alt="box icon"> Contributions
+        </a>
+      </div>
+      <hr>
+    </section>
+  </main>
+
+  <hr>
+  <footer id="footer" class="footer footer-flex"></footer>
+
+  <script src="./src/javascript/chart.js"></script>
+  <script src="./src/javascript/config.js"></script>
+  <script src="./src/javascript/index.js"></script>
+  <script src="./src/javascript/commits.js"></script>
+</body>
+
+</html>
diff --git a/images/book.png b/images/book.png
diff --git a/images/box.png b/images/box.png
diff --git a/images/fork.png b/images/fork.png
diff --git a/images/github.png b/images/github.png
diff --git a/images/group.png b/images/group.png
diff --git a/images/location.png b/images/location.png
diff --git a/images/me.png b/images/me.png
diff --git a/images/pr.png b/images/pr.png
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!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>GitHub Tracker</title>
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+    crossorigin="anonymous"
+    rel="stylesheet">
+  <link rel="stylesheet" href="./src/stylesheets/repos.css" />
+  <link rel="stylesheet" href="./src/stylesheets/style.css" />
+</head>
+
+<body>
+  <header id="header" class="header"></header>
+  <main class="body-wrapper">
+    <aside class="aside" id="aside"></aside>
+    <section class="projects" id="projects">
+      <div class="html-links">
+        <a href="index.html" class="links bold-link">
+          <img src="./images/book.png" class="icons" alt="book icon"/> Repositories
+        </a>
+        <a href="commits.html" class="links">
+          <img src="./images/box.png" class="icons" alt="box icon"> Contributions
+        </a>
+      </div>
+      <hr>
+    </section>
+  </main>
+  <hr>
+  <footer id="footer" class="footer footer-flex"></footer>
+
+  <script src="./src/javascript/config.js"></script>
+  <script src="./src/javascript/index.js"></script>
+  <script src="./src/javascript/repos.js"></script>
+</body>
+
+</html>
diff --git a/src/javascript/chart.js b/src/javascript/chart.js
@@ -0,0 +1,36 @@
+const displayChart = (projects) => {
+  const ctx = document.getElementById('chart');
+
+  const labels = [
+    'Projects completed',
+    'Projects left',
+  ];
+
+  const data = {
+    labels: labels,
+    datasets: [{
+      label: 'My Projects at Technigo',
+      data: [projects, 19 - projects],
+      backgroundColor: [
+        'rgb(142, 85, 255)',
+        'rgb(142, 85, 255, 0.3)',
+      ],
+      hoverOffset: 4
+    }]
+  };
+
+  const configuration = {
+    type: 'doughnut',
+    data: data,
+    options: {}
+  };
+
+  const myChart = new Chart(
+    ctx,
+    configuration
+  );
+}
+
+
+
+
diff --git a/src/javascript/commits.js b/src/javascript/commits.js
@@ -0,0 +1,72 @@
+const commitsSection = document.getElementById("commits");
+
+const fetchRepositories = (repositories) => {
+  const myRepos = repositories.filter((repo) => repo.fork && repo.name !== "unit-tests").length;
+  repositories.filter(repo => {
+    if (repo.fork && repo.name !== "unit-tests") {
+      fetchCommits(repo)
+    }
+  });
+  displayChart(myRepos);
+};
+
+const fetchCommitMessages = (commits, repository) => {
+  const repositoryName = repository.name;
+  const newCommits = commits.filter(commits => commits.commit.author.date.includes("2022"));
+
+  document.addEventListener("click", (event) => {
+    if (event.target.id === repositoryName) {
+      const repoClassname = `.${repositoryName}`;
+      document.querySelectorAll(repoClassname).forEach(name => {
+        if (name.style.display === "none") {
+          name.style.display = "block";
+        } else {
+          name.style.display = "none";
+        }
+      })
+    };
+  });
+
+  commitsSection.innerHTML += `
+    <div class="commits__text">
+    <div><p><a href="${repository.html_url}/commits" target="_blank">${username}/${repositoryName}</a></p></div>
+    <div class="progress">
+      <div class="progress-bar bg-success" role="progressbar" style="width: ${newCommits.length * 3}%" 
+        aria-valuenow="${newCommits.length}" aria-valuemin="0" aria-valuemax="100">
+      </div>
+    </div>
+    <div>
+      <button type="button" id=${repositoryName} class="btn btn-secondary btn-sm dropdown-toggle" 
+        data-bs-toggle="dropdown" aria-expanded="false">${newCommits.length} commits 
+      </button>
+    </div>
+    </div>
+  `
+
+  for (let i = 0; i < newCommits.length; i++) {
+    const { message, committer, author } = newCommits[i].commit;
+    const { avatar_url } = newCommits[i].author;
+    const date = new Date(committer.date);
+    const formattedDate = date.toDateString().split(' ').slice(1).join(' ');
+
+    commitsSection.innerHTML += `
+      <div id="messageWrapper" class=${repositoryName} style="display: none">
+      <p class="text">${message}</p>
+      <p class="subtext"><img class="icons circle" src=${avatar_url} alt=${author.name}> 
+      <span class="bold-text">${author.name} </span> <span class="hide-text">committed on ${formattedDate}</span></p>
+      </div>
+    `
+  }
+};
+
+fetch(REPOS_URL, options)
+  .then(res => res.json())
+  .then(data => fetchRepositories(data))
+  .catch(error => console.log(error))
+
+const fetchCommits = (repo) => {
+  fetch(`${COMMITS_URL}${repo.name}/commits`, options)
+    .then(res => res.json())
+    .then(data => fetchCommitMessages(data, repo))
+    .catch(error => console.log(error))
+};
diff --git a/src/javascript/index.js b/src/javascript/index.js
@@ -0,0 +1,71 @@
+const profileDetails = document.getElementById("aside");
+const header = document.getElementById("header");
+const footer = document.getElementById("footer");
+
+const username = "savannah-hayes";
+const USER_URL = `https://api.github.com/users/${username}`;
+const REPOS_URL = `https://api.github.com/users/${username}/repos`;
+const COMMITS_URL = `https://api.github.com/repos/${username}/`;
+
+const options = {
+  method: "GET",
+  headers: {
+    Authorization: `token ${API_TOKEN}`
+  }
+};
+
+const displayHeaderAndFooter = () => {
+  header.innerHTML = `
+    <div class="hamburger-wrapper">
+    <span class="hamburger"></span>
+    <span class="hamburger"></span>
+    <span class="hamburger"></span>
+    </div>
+    <h1>GitHub Tracker</h1>
+    <img src="./images/me.png" class="header__image" alt="small image of savannah hayes">
+    `
+
+  footer.innerHTML = `
+    <p class="footer__text footer-flex">
+      <img src="./images/github.png" class="footer__icon" alt="github icon">GitHub Tracker
+    </p>
+    <ul class="footer__links footer-flex">
+    <li class="footer__link footer-flex">Terms</li>
+    <li class="footer__link footer-flex">Privacy</li>
+    <li class="footer__link footer-flex">Security</li>
+    <li class="footer__link footer-flex footer__link--hide">About</li>
+    </ul>
+  `
+};
+
+const displayProfileData = (profileData) => {
+  const { avatar_url, name, login, bio, followers, following, location } = profileData;
+
+  profileDetails.innerHTML = `
+    <section class="aside__header">
+    <img src="${avatar_url}" class="aside__image" alt="image of ${name}"></img>
+    <div class="aside__text">
+    <h2 class="aside__title">${name}</h2>
+    <p class="aside__sub-title">${login}</p>
+    </div>
+    </section>
+    <section class="aside-content">
+    <p class="aside-content__paragraph aside-content__paragraph--top">${bio}</p>
+    <p class="aside-content__paragraph aside-content__paragraph--grey">
+    <img class="icons icons-left" src="./images/group.png" alt="three people icon">
+    <span class="aside-content__paragraph--bold">${followers}</span>  followers · 
+    <span class="aside-content__paragraph--bold">${following}</span> following</p>
+    <p class="aside-content__paragraph">
+    <img class="icons icons-left" src="./images/location.png" alt="location pin icon">
+    </img> ${location}
+    </p>
+    </section>
+  `;
+};
+
+displayHeaderAndFooter();
+
+fetch(USER_URL, options)
+  .then(res => res.json())
+  .then(data => displayProfileData(data))
+  .catch(error => console.log(error))