Technigo · sofiaringstedt · Feb 23, 2022 · Feb 23, 2022 · Feb 23, 2022 · Feb 24, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+code/secret.js
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # 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.
+The goal of this project was to create a simple portfolio looking website, displaying information about yourself and your projects. The challenge was that all the info would be fetched from Github. 
 
 ## 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?
+In this project I found it challenging to correctly source the information that I wanted to display. I solved this by console loging all my fetched data and taking the time to understand the data returned to me. I also found the styling of the chart tricky. If I would have had more time I would have wanted to style the chart more and display more information about the projects, fetched from Github. 
 
 ## 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://hopeful-jennings-863724.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,39 @@
-//DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+//DOM-selector for the canvas
+const ctx = document.getElementById("chart").getContext("2d");
+
+//General styling of chart
+Chart.defaults.font.size = 8;
+Chart.defaults.color = "#1E1E24";
+
+//Amount of repos fetched from fetchRepos function in JS file
+const drawChart = (amount) => {
+  const labels = [
+    'Projects done',
+    'Projects to do',
+  ];
+
+   const data = {
+    labels: labels,
+    datasets: [{
+      label: 'Technigo projects',
+      data: [amount, 19-amount],
+      backgroundColor: ['#90A955', '#C4B2BC' ],
+      borderColor: '#FFF8F0',
+    }]
+  };
+
+  const config = {
+    type: 'doughnut',
+    data: data,
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+    }
+  };
+
+  const myChart = new Chart( 
+  document.getElementById('chart'),
+  config
+  ); 
+  }
 
-//"Draw" the chart here 👇
diff --git a/code/index.html b/code/index.html
@@ -5,17 +5,38 @@
   <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="icon" type="image/x-icon" href="/favicon.png">
   <link rel="stylesheet" href="./style.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <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=Noto+Serif+Display:wght@300&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
+<!--Header with h1 and user info-->
+  <header>
+    <h1>SOFIA RINGSTEDT - PORTFOLIO</h1>
+    <div class="user-info" id="user-info"></div>
+  <!--Chart-wrapper to hold the chart -->
+  <div class="chart-wrapper">
+    <canvas class="chart" id="chart"></canvas>
+  </div>
+  </header>
+
+  <!--Projects-wrapper to hold the projects injected by JS -->
+  <div class="projects-wrapper">
   <h2>Projects:</h2>
-  <main id="projects"></main>
+  <div class="projects" id="projects"></div>
+  </div>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <!--Footer to hold the github bio injected by JS -->
+  <footer id="footer">
+  </footer>
 
-  <script src="./script.js"></script>
   <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,88 @@
+//DOM-selectors
+const projects = document.getElementById('projects')
+const userInfo = document.getElementById('user-info')
+const footer = document.getElementById('footer')
+
+//GITHUB URLS
+const user = 'sofiaringstedt';
+const repo_URL = `https://api.github.com/users/${user}/repos`;
+const user_URL = `https://api.github.com/users/${user}`;
+
+
+const options = {
+    method: 'GET',
+    headers: {
+        Authorization: API_TOKEN
+    }
+}
+
+//function to display profileinfo fetched from github
+const profileInfo = () => {
+  fetch(user_URL)
+  .then(res => res.json())
+  .then(data => {
+    const profileImg = data.avatar_url
+    const profileBio = data.bio
+    userInfo.innerHTML += `
+      <div class="user-img">
+      <img src="${profileImg}" alt="Image of Sofia Ringstedt">
+      </div>
+      <div class="user-name">
+      <h2>Github account: <a href="${user_URL}" target="_blank">${user}</a></h2>
+      </div>
+     `
+     footer.innerHTML += `
+      <p class="profile-bio">${profileBio}</p>
+     `
+  })
+}
+
+//function to display repository info fetched from github
+const fetchRepos = () => {
+    fetch(repo_URL, options) 
+    .then(res => res.json())
+    .then(data => {
+        const filteredRepos = data.filter(repo => repo.name.startsWith("project") && repo.fork === true)
+
+        filteredRepos.forEach(repo => {
+            projects.innerHTML += `
+              <div id="card" class="card">  
+                <h3><a href="${repo.html_url}" target="_blank">${repo.name}</a></h3>
+                <p>Branch: ${repo.default_branch}</p>
+                <p>Latest push: ${new Date(repo.pushed_at).toLocaleDateString('en-SE', {year: 'numeric', month: 'short', day: 'numeric'})}</p>
+                <p id ="${repo.name}">Commits made by team member</p> 
+              </div>
+            `
+        })
+    getPullRequests(filteredRepos);
+    drawChart(filteredRepos.length)
+    })
+}
+
+//function to fetch pull requests from github
+const getPullRequests = (filteredRepos) => { 
+  filteredRepos.forEach(repo => {
+    fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
+    .then(res => res.json())
+    .then(data => {
+      const myPullRequest = data.find((pull) => pull.user.login === repo.owner.login);
+      const myCommitsURL = myPullRequest.commits_url
+      const repoName = repo.name
+      fetchCommits(myCommitsURL, repoName); // varför är denna här??
+        })
+    })
+  }
+
+//function to fetch and display commits from github
+const fetchCommits = (myCommitsURL, repoName) => {
+    fetch(myCommitsURL)
+    .then((res) => res.json())
+    .then (data => {
+      //send the number of commits to innerHTML injected in the fetchRepos function
+      document.getElementById(repoName).innerHTML = `Number of commits: ${data.length}`
+  });
+}
+
+
+profileInfo() 
+fetchRepos()
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,177 @@
+/* RESET CSS TO BORDER-BOX */
+* {
+  box-sizing: border-box;
+}
+
+/* main styling for entire webpage */
 body {
-  background: #FFECE9;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #EFE6DD;
+  height: 100vh;
+  font-family: 'Noto Serif Display';
+  margin: 0;
+  color: #1E1E24;
+}
+
+/* styling of header, including elements injected by JS */
+header, .user-name, .user-img, .user-info {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+}
+
+header {
+  width: 100vw;
+}
+
+header h1 {
+  text-align: center;
+  font-size: 5vw;
+  width: 100vw;
+  margin: 5vw;
+  animation: slideLeft 2s forwards;
+  left: -400px;
+  position: relative;
+}
+
+/* animation setting of h1 */
+@keyframes slideLeft {
+  from
+  {
+      left: -300px;
+    }
+  to {
+    left: 0px;
+  }
+}
+
+header img {
+  width: 20vw;
+  border-radius: 50%;
+}
+
+.user-info {
+  flex-direction: column;
+}
+
+.user-name a, h2 {
+  font-size: 2.5vw;
+}
+
+/*style sizing of chart-wrapper*/
+.chart-wrapper {
+  width: 30vw;
+  height: 30vw;
+}
+
+/*style sizing and flexbox of project-wrapper*/
+.projects-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 4vw;
+}
+
+.projects-wrapper h2, a {
+  font-size: 4vw;
+  text-align: center;
+  color: #1E1E24;
+}
+
+.projects {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.projects h3 {
+  display: flex;
+  justify-content: center;
+  font-size: 4vw;
+  margin: 1vw;
+}
+
+/*h3 animation*/
+h3:hover{
+  -webkit-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  transform: scale(1.2);
+}
+
+/*style sizing and flexbox of project-cards injected by JS*/
+.card {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 45vw;
+  font-size: 2.5vw;
+  background: #F8F7F9;
+  padding: 8px;
+  margin: 10px;
+  border-radius: 20px;
+}
+
+.card p {
+  display: inline-flex;
+  justify-content: center;
+  margin: 1vw;
+}
+
+/*style sizing and flexbox footer with github bio injected by JS*/
+footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #DAB49D;
+  height: 12vw;
+  width: 100vw;
+  margin-top: 10vw;
+}
+
+.profile-bio {
+  font-size: 2.5vw;
+  text-align: center;
+}
+
+/*media queries for responsiveness*/
+@media (min-width: 667px) {
+  .projects {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+@media (min-width: 992px) {
+
+  header {
+    margin-bottom: 4vw;
+  }
+
+  header h1 {
+   font-size: 4vw;
+   margin: 4vw;
+  }
+
+  .user-name a, h2 {
+    font-size: 1.5vw;
+  }
+
+  .projects-wrapper h2 {
+    font-size: 3vw;
+  }
+
+  .projects h3 {
+    font-size: 2vw;
+  }
+
+  .card {
+    font-size: 1.5vw;
+    width: 30vw;
+  }
+
+  footer p {
+    font-size: 1.5vw;
+  }
 }
diff --git a/favicon.png b/favicon.png
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json