project-github-tracker-PriscilaAlfaro

README.md

@@ -1,13 +1,19 @@
-# GitHub Tracker
+# Week 7- Technigo Bootcamp
 
-Replace this readme with your own information about your project.
+# Project GitHub Tracker
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This week, we want you to create a place to keep track of the GitHub repos that you're using here at Technigo. You will continue practicing your JavaScript and API skills with the help of GitHub's own documentation.
 
 ## 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 week the first step was to read the documentation of Github API to understand what every endpoint was about. Then I started fetching basic information and adding new functions, endpoints, and iterations in JavaScript. 
+
+I used the `async/await` instead of `.then( )` approach to practice more about it. An interesting experience this week was digging more into promises, and how to await several promises using `Promise.all`.
+
+I also used an independent library for vanilla Javascript as a collapsible toggle to show details for commits and comments for every Pull Request. (See `https://www.cssscript.com/content-toggle-collapsible/`).
+
+Also was very interesting using the open-source `Chart.js` to create the chart about how many projects we finished and how many projects left at the Technigo course. (See `https://www.chartjs.org/docs/latest/`)
 
 ## 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.
+Here is the Netlify link: https://project-github-tracker.netlify.app/

code/chart.js

@@ -2,3 +2,45 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+const drawChart = (numberOfFinishedProjects) => {
+    config = {
+        type: 'pie',
+        data: {
+            labels: ['Finished Projects', 'Projects Left'],
+            datasets: [{
+                label: 'Technigo Projects',
+                data: [numberOfFinishedProjects, 20 - numberOfFinishedProjects],
+                backgroundColor: [
+                    'rgba(223, 198, 124, 1)',
+                    'rgba(63, 111, 166, 1)',
+                ],
+                borderColor: [
+                    'rgba(223, 198, 104, 1)',
+                    'rgba(63, 111, 144, 1)',
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            plugins: {
+                title: {
+                    display: true,
+                    text: "Comparison Technigo Course Finished projects vs Projects left",
+                    position: 'top',
+                    padding: {
+                        top: 10,
+                        bottom: 20
+                    }
+                }
+            }
+
+        }
+
+    }
+    const myChart = new Chart(ctx, config);
+}
+
+
+
+
+

code/collapsible.js

@@ -0,0 +1,283 @@
+/**
+ * Collapsible - A plug and play plugin for expanding and
+ * collapsing elements (i.e. accordion) on a website.
+ *
+ * @author Murtada al Mousawy (https://murtada.nl)
+ */
+(function() {
+  'use strict';
+
+  /**
+   * Creates an instance of Collapsible.
+   *
+   * @constructor
+   * @param {Object} options
+   * @param {(HTMLElement|NodeList)} options.node The HTML elements that will be manipulated.
+   * @param {HTMLElement} [options.eventNode] The HTML element on which the eventListener will be attached.
+   * @param {Boolean} [options.isCollapsed] Assign the state of the node element.
+   * @param {Boolean} [options.observe] Assign a MutationObserver to observe child DOM changes.
+   * @param {Function} [options.expandCallback] Assign a callback for the [{@link Collapsible.prototype.expand} event.
+   * @param {Function} [options.collapseCallback] Assign a callback for the {@link Collapsible.prototype.collapse} event.
+   * @param {Function} [options.observeCallback] Assign a callback for the {@link Collapsible.prototype.initObserver} event.
+   */
+  var Collapsible = function(options) {
+    // Initialize HTML nodes
+    if (NodeList.prototype.isPrototypeOf(options.node)) {
+      options.node.forEach(function(nodeItem) {
+        var singleNodeOptions = options;
+        singleNodeOptions.node = nodeItem;
+        new Collapsible(singleNodeOptions);
+      });
+      return;
+    } else if (options.node instanceof HTMLElement) {
+      this.node = options.node;
+      this.eventNode = (options.eventNode ? this.node.querySelector(options.eventNode) : this.node);
+      this.isCollapsed = (typeof this.node.dataset.collapsibleCollapsed !== 'undefined'
+                          ? true
+                          : null);
+
+      if (!this.isCollapsed) {
+        this.isCollapsed = ((options.isCollapsed
+                            && typeof options.isCollapsed === 'boolean')
+                            ? options.isCollapsed
+                            : false);
+      }
+
+      this.observe = (typeof options.observe === 'boolean' ? options.observe : false);
+      this.expandCallback = (typeof options.expandCallback === 'function' ? options.expandCallback : null);
+      this.collapseCallback = (typeof options.collapseCallback === 'function' ? options.collapseCallback : null);
+      this.observeCallback = (typeof options.observeCallback === 'function' ? options.observeCallback : null);
+      this.mutationCallback = (typeof options.mutationCallback === 'function' ? options.mutationCallback : null);
+
+      this.init();
+    } else {
+      console.error(options.node, 'is not a NodeList or an instance of HTMLElement');
+    }
+  };
+
+  /**
+   * Initialize the collapsing and expanding events.
+   */
+  Collapsible.prototype.init = function() {
+    this.updateHeights();
+
+    if (this.isCollapsed) {
+      this.node.style.height = this.collapsedHeight + 'px';
+      this.node.classList.add('is-collapsed');
+    } else {
+      this.node.classList.add('is-expanded');
+    }
+
+    this.eventNode.addEventListener('click', function() {
+      this.toggleCollapse();
+    }.bind(this));
+
+    window.addEventListener('resize', this.updateHeights.bind(this, null));
+
+    // Observe children of the node
+    if (this.observe) {
+      this.initObserver();
+    }
+
+    // Attach the prototype instance to the node
+    this.node.collapsible = this;
+  };
+
+  /**
+   * Update the collapsed and expanded heights on page resize.
+   *
+   * @param {int} [heightDifference] Height value to add or subtract from the parent.
+   */
+  Collapsible.prototype.updateHeights = function(heightDifference) {
+    heightDifference = heightDifference || 0;
+
+    // Calculate the collapsed height
+    this.collapsedHeight = Collapsible.parseNumber(
+      window.getComputedStyle(this.eventNode)['height']
+    );
+
+    // Calculate the expanded height
+    this.node.style.height = 'auto';
+
+    this.expandedHeight = Collapsible.parseNumber(
+      window.getComputedStyle(this.node)['height']
+    );
+
+    // Add or subtract the childNode's height difference
+    this.expandedHeight += heightDifference;
+    this.expandedHeight =  Math.max(this.expandedHeight, this.collapsedHeight);
+
+    // Reset height to what it was before
+    if (this.isCollapsed) {
+      this.node.style.height = this.collapsedHeight + 'px';
+    }
+
+    this.updateParentNode(this.expandedHeight - this.collapsedHeight);
+  };
+
+  /**
+   * Toggle the node state and calls the appropriate function.
+   */
+  Collapsible.prototype.toggleCollapse = function() {
+    if (this.isCollapsed) {
+      this.expand();
+    } else {
+      this.collapse();
+    }
+  };
+
+  /**
+   * Expand the node.
+   */
+  Collapsible.prototype.expand = function() {
+    this.updateHeights();
+
+    void this.node.offsetWidth;
+
+    this.node.style.height = 'auto';
+    this.node.style.height = this.expandedHeight + 'px';
+    this.node.classList.remove('is-collapsed');
+    this.node.classList.add('is-expanded');
+
+    this.isCollapsed = false;
+
+    // Create a custom event
+    var expandEvent = new CustomEvent('toggle', {
+      bubbles: true,
+      detail: {
+        action: 'expand',
+        origin: this.eventNode
+      }
+    });
+
+    this.node.dispatchEvent(expandEvent);
+
+    // Run callback if it exists
+    if (this.expandCallback) {
+      this.expandCallback.bind(this, expandEvent)();
+    }
+
+    this.updateParentNode(this.expandedHeight - this.collapsedHeight);
+  };
+
+  /**
+   * Collapse the node.
+   */
+  Collapsible.prototype.collapse = function() {
+    this.node.style.height = window.getComputedStyle(this.node)['height'];
+
+    void this.node.offsetWidth;
+
+    this.node.style.height = this.collapsedHeight + 'px';
+    this.node.classList.remove('is-expanded');
+    this.node.classList.add('is-collapsed');
+
+    this.isCollapsed = true;
+
+    // Create a custom event
+    var collapseEvent = new CustomEvent('toggle', {
+      bubbles: true,
+      detail: {
+        action: 'collapse',
+        origin: this.eventNode
+      }
+    });
+
+    this.node.dispatchEvent(collapseEvent);
+
+    // Run callback if it exists
+    if (this.collapseCallback) {
+      this.collapseCallback.bind(this, collapseEvent)();
+    }
+
+    this.updateParentNode(-(this.expandedHeight - this.collapsedHeight));
+  };
+
+  /**
+   * Update parent heights if collapsible.
+   *
+   * @see {@link Collapsible.prototype.updateHeights}
+   */
+  Collapsible.prototype.updateParentNode = function(heightDifference) {
+    if (this.node.parentNode && this.node.parentNode.collapsible) {
+      this.node.parentNode.collapsible.updateHeights(heightDifference);
+    }
+  };
+
+  /**
+   * Observe the direct children list of the node.
+   * Will adjust the expanded height automatically if necessary.
+   */
+  Collapsible.prototype.initObserver = function() {
+    this.mutationObserver = new window.MutationObserver(function(mutationsList) {
+      var mutatedNode,
+          mutationAction;
+
+      if (mutationsList[0]['addedNodes'].length > 0) {
+        mutationAction = 'add';
+        mutatedNode = mutationsList[0]['addedNodes'][0];
+      } else {
+        mutationAction = 'remove';
+        mutatedNode = mutationsList[0]['removedNodes'][0];
+      }
+
+      if (!this.isCollapsed) {
+        var mutatedNodeStyle = window.getComputedStyle(mutatedNode);
+
+        var mutatedNodeHeight =
+            Collapsible.parseNumber(
+            mutatedNodeStyle['height']) +
+            Collapsible.parseNumber(
+            mutatedNodeStyle['margin-top']) +
+            Collapsible.parseNumber(
+            mutatedNodeStyle['margin-bottom']);
+
+        this.node.style.height = 'auto';
+
+        var currentHeight = Collapsible.parseNumber(
+          window.getComputedStyle(this.node)['height']
+        );
+
+        if (mutationAction == 'add') {
+          this.node.style.height = (currentHeight - mutatedNodeHeight) + 'px';
+          void this.node.offsetWidth;
+          this.node.style.height = currentHeight + 'px';
+        } else {
+          this.node.style.height = this.expandedHeight + 'px';
+          void this.node.offsetWidth;
+          this.node.style.height = currentHeight + 'px';
+        }
+      }
+
+      this.expandedHeight = currentHeight;
+
+      // Create a custom event
+      var mutationEvent = new CustomEvent('mutate', {
+        bubbles: true,
+        detail: {
+          action: mutationAction,
+          node: mutatedNode
+        }
+      });
+
+      this.node.dispatchEvent(mutationEvent);
+
+      // Run callback if it exists
+      if (this.mutationCallback) {
+        this.mutationCallback.bind(this, mutationEvent)();
+      }
+    }.bind(this));
+
+    this.mutationObserver.observe(this.node, {
+      childList: true
+    });
+  };
+
+  // Helper functions
+  Collapsible.parseNumber = function(numberString) {
+    return Number.parseInt(numberString.slice(0, -2));
+  };
+
+  // Expose the prototype function to the global scope
+  window.Collapsible = Collapsible;
+})();