codefellows-seattle-javascript-401d15 · cameronmbacon · May 30, 2017 · May 30, 2017
diff --git a/lab-cameron/.eslintignore b/lab-cameron/.eslintignore
diff --git a/lab-cameron/.eslintrc b/lab-cameron/.eslintrc
@@ -0,0 +1,25 @@
+{
+  "rules": {
+    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
+    "comma-dangle": ["error", "always-multiline"],
+    "no-console": "off",
+    "indent": [ "error", 2 ],
+    "semi": ["error", "always"]
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true
+  },
+  "globals": {
+    "__API_URI__": false,
+    "__DEBUG__": false
+  },
+  "ecmaFeatures": {
+    "modules": true,
+    "experimentalObjectRestSpread": true,
+    "impliedStrict": true
+  },
+  "extends": "eslint:recommended"
+}
diff --git a/lab-cameron/.gitignore b/lab-cameron/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/lab-cameron/README.md b/lab-cameron/README.md
@@ -0,0 +1,65 @@
+![cf](http://i.imgur.com/7v5ASc8.png) lab 25 - Tree Data Structure
+====
+
+## To Submit this Assignment
+  * fork this repository
+  * write all of your code in a directory named `lab-` + `<your name>` **e.g.** `lab-duncan`
+  * push to your repository
+  * submit a pull request to this repository
+  * submit a link to your PR in canvas
+  * write a question and observation on canvas
+
+## Requirements  
+#### Configuration  
+  <!-- list of files, configurations, tools, etc that are required -->
+  Your lab directory must include  
+  * **README.md** -- with a documentation about your lab
+  * **.gitignore** -- with a robust .gitignore
+  * **.eslintrc** -- with the class .eslintrc file
+  * **.eslintignore** -- with the class .eslintignore
+  * **.package.json** -- with all dependencies and dev-dependencies
+  * **lib/** -- directory for holding your programs helper modules
+  * **test/** -- directory for holding your programs unit and integration tests
+
+#### Testing  
+  * write at least three test assertions for each constructor method
+  * organize your tests into appropriate describe/it blocks for test output readability
+
+####  Documentation  
+  * in your README, write documentation for you data structures
+  * your documentation should includes code block usage examples
+  * provide instructions for:
+    * installing and using your data structure
+    * running any command line interface
+    * accessing each method
+    * running your tests
+
+#### Feature Tasks  
+  * use the node fs module to read an HTML document into a buffer (minimal.html => found in the /assets dir)
+  * parse the buffer and use the root `<html>` element, subsequent HTML tags, and their text content to build a tree data structure
+    * hint: you will need to refactor your node to allow a different type of data to be stored in the `.value` property. The remainder of the node should not change
+      * ```javascript
+          Tree {
+            root: Node {
+              value: {
+                eleName: 'xxx',
+                textContent: 'yyy' (can be empty string??)
+              },
+              children: [{Node}, {Node}, ...]
+            }
+          }
+        ```
+
+## Bonus Points:
+  * 2pts each
+  * implement the ability to parse both classes & ids; and any other attribute nodes you would like to consider
+    * there is a test file in /assets dir called stretch.html
+  * refactor your `prettyPrint()` method to display your tree as a valid HTML string
+    * this would be similar to what you would pass into a `.innerHTML()` method in JS
+
+#### Rubric:
+  * Tests: 2pts
+  * Passes linter: 1pts
+  * Completed Data Structure: 3pts
+  * Completed FP methods: 2pts
+  * Big-O notation: 2pts
diff --git a/lab-cameron/assets/minimal.html b/lab-cameron/assets/minimal.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>minimal html to tree</title>
+  </head>
+  <body>
+    <header>
+      <h2>We're building a tree!</h2>
+      <nav>
+        <ul>
+          <li>home</li>
+          <li>about</li>
+          <li>contact</li>
+          <li>signin</li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <section>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ad consequuntur dolor quis laboriosam animi expedita, recusandae, illo? Omnis reiciendis veritatis iure debitis eos provident accusantium est molestiae commodi corrupti.</p>
+        <p>Lorem ipsum dolor sit amet, <span>consectetur adipisicing elit, sed do eiusmod</span> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </section>
+    </main>
+    <footer>
+      <p>&copy; Codefellows LLC 2017</p>
+    </footer>
+  </body>
+</html>
diff --git a/lab-cameron/assets/stretch.html b/lab-cameron/assets/stretch.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>minimal html to tree</title>
+  </head>
+  <body>
+    <header class="container primary-header">
+      <h2>We're building a tree!</h2>
+      <nav>
+        <ul>
+          <li class="nav-primary" id="home">home</li>
+          <li class="nav-primary" id="about">about</li>
+          <li class="nav-primary" id="contact">contact</li>
+          <li class="nav-secondary" id="signin">signin</li> 
+        </ul>
+      </nav>
+    </header>
+    <main class="container primary-main">
+      <section>
+        <p id="primary-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam ad consequuntur dolor quis laboriosam animi expedita, recusandae, illo? Omnis reiciendis veritatis iure debitis eos provident accusantium est molestiae commodi corrupti.</p>
+        <p>Lorem ipsum dolor sit amet, <span class="brand-bold">consectetur adipisicing elit, sed do eiusmod</span> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </section>
+    </main>
+    <footer class="container primary-footer">
+      <p>&copy; Codefellows LLC 2017</p>
+    </footer>
+  </body>
+</html>
diff --git a/lab-cameron/entry.js b/lab-cameron/entry.js
@@ -0,0 +1,10 @@
+'use strict';
+
+const htmlParser = require('./lib/html-parser');
+
+htmlParser()
+.then(tags => {
+
+  console.log(tags);
+})
+.catch(console.error);
diff --git a/lab-cameron/lib/html-parser.js b/lab-cameron/lib/html-parser.js
@@ -0,0 +1,24 @@
+'use strict';
+
+module.exports = function() {
+  let values;
+  return new Promise((resolve, reject) => {
+    require('fs').readFile(`${__dirname}/../assets/minimal.html`, (err, data) => {
+      if (err) reject(err);
+      data = Buffer.from(data);
+      data = data.toString().split('\n');
+      data = data.slice(data.indexOf('<html>'), data.indexOf('</html>') + 1);
+      data.forEach((tag, i) => {
+        let depth = tag.slice(0, tag.indexOf('<')).length / 2;
+        tag = Array.from(tag);
+        console.log(tag);
+        tag = tag.slice(tag.indexOf('<'), tag.length).join('');
+        data[i] = tag;
+        // console.log(depth);
+        console.log(tag);
+        if (data[i].indexOf('/') === 1) data.splice(i, 1);
+      });
+      resolve(data);
+    });
+  });
+};
diff --git a/lab-cameron/lib/tree.js b/lab-cameron/lib/tree.js
@@ -0,0 +1,59 @@
+'use strict';
+
+const Tree = module.exports = function() {
+  this.root = null;
+};
+
+const Node = function(val) {
+  this.value = val;
+  this.children = [];
+};
+
+Tree.prototype.preOrder = function(callback) {
+  _walk(this.root);
+
+  function _walk(node) {
+    callback(node);
+    node.children.forEach(_walk);
+  }
+};
+
+Tree.prototype.add = function(val, parentVal=null) {
+  if (!val) return new Error('val required');
+  if (!this.root) {
+    this.root = new Node(val);
+    return;
+  }
+
+  this.preOrder(node => {
+    if (node.value === parentVal) {
+      node.children.push(new Node(val));
+      return;
+    }
+  });
+};
+
+Tree.prototype.prune = function(val) {
+  if (!val) return new Error('val required');
+  if (!this.root) return;
+  let current = this.root;
+  let parent, index;
+
+  this.preOrder(node => {
+    current.children.forEach((child, idx) => {
+      if (child.value === val) {
+        index = idx;
+        parent = current;
+        return;
+      }
+      current = node;
+    });
+  });
+
+  if (!parent) return new Error('no parent node');
+  parent.children.splice(index, 1);
+};
+
+Tree.prototype.remove = function(val) {
+  if (!val) return new Error('val required');
+};
diff --git a/lab-cameron/package.json b/lab-cameron/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "tree-data-structure",
+  "version": "0.0.1",
+  "description": "lab 25: traversing through tree data structures",
+  "main": "entry.js",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "start": "node ./entry.js",
+    "watch": "nodemon ./entry.js",
+    "test": "mocha"
+  },
+  "keywords": [
+    "data",
+    "structures",
+    "tree",
+    "node"
+  ],
+  "author": "Cameron Bacon",
+  "license": "MIT",
+  "devDependencies": {
+    "chai": "^4.0.0",
+    "debug": "^2.6.8",
+    "mocha": "^3.4.2"
+  }
+}
diff --git a/lab-cameron/test/tree-test.js b/lab-cameron/test/tree-test.js
@@ -0,0 +1 @@
+'use strict';