Technigo · EmmaSprings · Feb 22, 2022 · Feb 25, 2022 · Feb 27, 2022 · Feb 27, 2022
diff --git a/README.md b/README.md
@@ -2,12 +2,14 @@
 
 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.
+Create a website where I can track my GitHub status that updates when something has been added or pushed. And also show how many commits and pull requests have been made by me. 
 
 ## 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 was very hard and I still need to figure out how to use the dynamic ID to make everything work. As for now, my commits and pull requests does not show as I couldnt get them into the correct place in he innerHTML. Will continue to look into that and solve it. 
+
+
 
 ## 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://competent-austin-d90803.netlify.app/
diff --git a/code/.gitignore b/code/.gitignore
@@ -0,0 +1 @@
+token.js
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,67 @@
+
+Chart.defaults.font.size = 18
+Chart.defaults.font.family = 'Raleway, sans-serif';
+// Chart.defaults.font.family = 'monospace';
+
 //DOM-selector for the canvas 👇
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const drawChart = (amount) => {
+const labels = [
+    'Projects done',
+    'Projects to be done',
+
+  ];
+
+  const data = {
+    labels: labels,
+    datasets: [ {
+      label: 'My First dataset',
+      backgroundColor: ['rgb(131, 28, 147)', 'rgba(19, 115, 199, 0.776)' ],
+      borderColor: 'none',
+      data: [amount, 19-amount],
+    }]
+  };
+
+  const config = {
+    type: 'doughnut',
+    data: data,
+    options: {
+        responsive: true,
+        // maintainAspectRatio: false,
+    }
+};
+
+const myChart = new Chart( 
+document.getElementById('chart'),
+config
+
+);
+
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// const myChart = () => {
+//     const config = {
+//         type: 'doughnut',
+//         backgroundColor: [
+//             '#1400D1',
+//             '#CEE6FF'
+//         ]
+
+//     }
+// }
diff --git a/code/index.html b/code/index.html
@@ -4,18 +4,46 @@
   <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="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>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<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 rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Cutive+Mono&family=Inconsolata:wght@200;300;400;500&family=Montserrat:wght@400;700&family=Raleway:wght@100;200&display=swap" rel="stylesheet">
+  <title>Emma Springs Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
 
+
+  <section id="header" class="header-container">
+    <!-- <img width="100" src="https://avatars.githubusercontent.com/u/94292545?v=4"/> -->
+     <!-- <h1>GitHub tracker for = {Emma Springs}</h1> -->
+     <!-- <h3>GitHub username = EmmaSprings</h3> -->
+  </section>
+
+<section class="project-chart-container">
+
+
+   <main id="projects" class="projects-container"></main>
+      <section id="pullsRepo" class="pulls"></section>
+
   <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <div class="chart-container">
+    <canvas id="chart" width="200" height="200"></canvas>
+  </div>
+
+</section>
+
 
-  <script src="./script.js"></script>
   <script src="./chart.js"></script>
+  <script src="./token.js"></script>
+  <script src="./script.js"></script>
 </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,133 @@
+
+
+const username = 'EmmaSprings'
+const projects = document.getElementById('projects')
+const API_URL_USER = `https://api.github.com/users/${username}`
+const API_URL_REPO = `https://api.github.com/users/${username}/repos`
+
+
+
+const fetchUser = () => {
+
+    const options = {
+        method: 'GET',
+        headers: {
+              Authorization: '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' 
+          }
+      }
+
+    fetch(API_URL_USER, options)
+     .then((res) => res.json())
+     .then((data) => {
+         projects.innerHTML += `
+         <div class="header-container">
+            <img src="https://avatars.githubusercontent.com/u/94292545?v=4"/>
+                <h1>GitHub tracker for Emma Springs</h1>
+                <h2>user: <a href="https://api.github.com/users/EmmaSprings" class="login-name"> ${data.login}</a> <br>
+                ${data.bio}
+                </h2>
+
+                <p class="title">projects = [</p>
+         </div>  
+            `
+            // console.log(data)  //remove 
+
+        fetchRepos();
+
+    })
+
+    const fetchRepos = () => {
+        fetch(API_URL_REPO, options)
+        .then((res) => res.json())
+        .then((data) => {
+
+
+
+
+
+            const myProjects = data.filter((repo) => repo.name.startsWith("project-") && repo.fork);
+
+            myProjects.forEach((repo => {
+
+                // -----will continue working on this to get the idea of dynamic ID and how to use it-------
+
+                // fetch(`https://api.github.com/repos/EmmaSprings/${repo.name}/commits`, options)
+                // .then((res) => res.json())
+                // .then((repo) => {
+
+                //     document.getElementById('repoName').innerHTML += `<p>commits made: ${repo.length}</p>`
+
+                // //  projects.innerHTML += `<p>commits made: ${repo.length}</p>`
+                //  console.log(repo.length)
+                // })
+
+
+                projects.innerHTML += `
+                <li id≈"${repo.name}"> 
+
+                <a href="${repo.html_url}" target="_blank" class="repo-link">${repo.name}</a>
+                <p class="repo-info">
+                <!-- This is ${repo.name} -->
+                </p>
+                <p class="latest-push">
+                latest push: ${new Date(repo.pushed_at).toDateString()}</p>
+                <p class="extra-info">main language: ${repo.language}<br>
+                branch: ${repo.default_branch}<br> 
+                commits amount: <!--${repo.commits_url.length}--> <br>
+                pull requests:  ${data.length}<br>
+                </p>
+
+                <li>
+                `
+
+            }))
+
+
+            drawChart(myProjects.length);
+            fetchPullRequests(myProjects);
+
+
+            // console.log(myProjects) // remove
+
+        })
+
+    }; 
+
+
+
+
+
+
+    // will work on this to get the correct value displayes instead of total amount
+    const fetchPullRequests = (myProjects) => {
+
+
+        myProjects.forEach(repo => {
+            fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`)
+            .then((res) => res.json())
+            .then((data) => {
+                const myPullRes = data.find((pull) => pull.user.login === repo.owner.login);
+
+                // projects.innerHTML += `<p>pull requests: ${data.length}</p>`
+                // console.log(myPullRes) //remove
+            })
+        })
+    }
+
+};
+
+
+fetchUser();
+
+
+
+
+
+
+
+
+
+
+
+
+