Merge pull request #1 from hackreactor/workshop-content

Workshop content

Author: matt-winzer

.eslintignore

@@ -0,0 +1,6 @@
+.eslint*
+**/node_modules
+**/bower_components
+**/lib
+**/vendor
+**/*.min.js

.eslintrc.js

@@ -0,0 +1,45 @@
+/**
+ * These rules enforce Hack Reactor's style guide.
+ * Visit this repo for more information:
+ *   https://github.com/reactorcore/eslint-config-hackreactor
+ */
+
+module.exports = {
+  env: {
+    'es6': true
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      'jsx': true
+    }
+  },
+  rules: {
+    /* Indentation */
+    'no-mixed-spaces-and-tabs': 2,
+    'indent': [2, 2],
+    /* Variable cames */
+    'camelcase': 2,
+    /* Language constructs */
+    'curly': 2,
+    'eqeqeq': [2, 'smart'],
+    'func-style': [2, 'expression'],
+    /* Semicolons */
+    'semi': 2,
+    'no-extra-semi': 2,
+    /* Padding & additional whitespace (perferred but optional) */
+    'brace-style': [2, '1tbs', { 'allowSingleLine': true }],
+    'semi-spacing': 1,
+    'key-spacing': 1,
+    'block-spacing': 1,
+    'comma-spacing': 1,
+    'no-multi-spaces': 1,
+    'space-before-blocks': 1,
+    'keyword-spacing': [1, { 'before': true, 'after': true }],
+    'space-infix-ops': 1,
+    /* Variable declaration */
+    'one-var': [1, { 'uninitialized': 'always', 'initialized': 'never' }],
+    /* Minuta */
+    'comma-style': [2, 'last'],
+    'quotes': [1, 'single']
+  }
+};

.gitignore

@@ -0,0 +1,35 @@
+### node etc ###
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled Dirs (http://nodejs.org/api/addons.html)
+build/
+dist/
+
+# Dependency directorys
+# Deployed apps should consider commenting these lines out:
+# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
+node_modules/
+bower_components/
+
+# Floobits
+.floo
+.floobit
+.floo
+.flooignore

README.md

@@ -2,4 +2,99 @@
 
 You're here to solidify your understanding of recursion -- a fundamental programming concept -- in JavaScript.
 
-*IMPORTANT*: Completion of this workshop is no guarantee of admission into the Hack Reactor immersive program, nor does it have any influence in the admissions process.
+*IMPORTANT*: Completion of this workshop is no guarantee of admission into the Hack Reactor immersive program, nor does it have any influence in the admissions process.
+
+## Prerequisites
+
+This workshop is designed for folks in the midst of studying intermediate-level JavaScript who have a few months of foundational experience. You will be expected to understand the basics of the Document Object Model (DOM) as applied to HTML.
+
+## Textbook
+
+No textbook is required for this workshop. All materials are included in this GitHub repo.
+
+## Technical requirements
+
+Laptop, Google Chrome browser and a text editor. If you do not have a text editor, we recommend Visual Studio Code, Sublime Text, or Atom.
+
+# How to use this repository
+
+### Let's get started...
+
+Run the SpecRunner.html file in a browser. This document current shows 4 failing tests.
+
+- The `spec` folder holds all the failing tests that are being displayed in SpecRunner.html.
+- The `src` folder holds the functions that are being called to run the tests.
+- Your task is to edit the files in `src` to complete the functions and get the tests to pass.
+- These files are just javascript files so you can use `console.log` to help debug and inspect these functions.
+
+## Recursion Review
+
+Recursion is a technique for solving problems wherein a function makes calls to itself. By doing so, it can complete a small amount of the processing, and delegate the rest of the problem to the recursive calls.
+
+Consider the following function:
+
+```js
+var eat = function(meal){
+  console.log('meal before bite:', meal);
+  console.log('now eating', meal.pop());
+  if(meal.length){
+    eat(meal);
+  } else {
+    console.log('done with the meal!');
+  }
+}
+```
+
+Which produces this output:
+
+```js
+eat(['soup', 'potatoes', 'fish']);
+// => meal before bite: ["soup", "potatoes", "fish"]
+// => now eating fish
+// => meal before bite: ["soup", "potatoes"]
+// => now eating potatoes
+// => meal before bite: ["soup"]
+// => now eating soup
+// => done with the meal!
+```
+
+You can use recursion on problems where smaller parts of the problem look the same as the larger problem as a whole.
+
+In this sprint, you'll be practicing writing recursive functions, building up to  the reimplementation of a JavaScript browser method that involves recursion (getElementsByClassName). In so doing, don't use the things you're reimplementing, or any other built-in shortcuts that make these problems trivial. (You'll probably know if you're cheating, but feel free to ask us if you're not sure.)
+
+(Curious fact: many browsers don't have any of these functions in them, and people do need to reimplement them.  When we reimplement new browser functionality in older browsers, it's called a "polyfill".)
+
+## Exercises
+
+More detailed instructions and examples for each exercise can be found in the individual `.js` files in the `src` folder.
+
+### 1: sumArray
+
+- [ ] Implement `sumArray` with your own code in `src/sumArray.js`
+
+### 2: power
+
+- [ ] Implement `power` with your own code in `src/power.js`
+
+### 3: nthFibonacci
+
+- [ ] Implement `nthFibonacci` with your own code in `src/nthFibonacci.js`
+
+### 4: getElementsByClassName
+
+- [ ] Implement `getElementsByClassName` with your own code in `src/getElementsByClassName.js`
+  - [ ] You should use `document.body`, `element.childNodes`, and `element.classList`
+- NOTE: You may also use methods from the [underscore](https://underscorejs.org) library for assitance, but are not required to do so.
+- You can view the MDN documentation for getElementsByClassName [here](https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName)
+
+#### Failing Tests Example
+
+![failing tests](images/failing-tests.png)
+
+#### Passing Tests Example
+
+![passing tests](images/passing-tests.png)
+
+### Don't forget..
+
+You should throroughly read all of code in front of you and aim to understand line-by-line what is happening.

SpecRunner.html

@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Mocha Spec Runner</title>
+  <link rel="stylesheet" href="lib/mocha/mocha.css">
+  <script src="lib/jquery.js"></script>
+  <script src="lib/underscore.js"></script>
+  <script src="lib/mocha/mocha.js"></script>
+  <script src="lib/chai/chai.js"></script>
+  <script src="lib/sinon/sinon.js"></script>
+  <script>
+    mocha.setup({ui: 'bdd'});
+    window.expect = chai.expect;
+    $(function() {
+      window.mochaPhantomJS ? mochaPhantomJS.run() : mocha.run();
+    });
+  </script>
+  <script src="src/sumArray.js"></script>
+  <script src="src/power.js"></script>
+  <script src="src/nthFibonacci.js"></script>
+  <script src="src/getElementsByClassName.js"></script>
+  <script src="spec/sumArraySpec.js"></script>
+  <script src="spec/powerSpec.js"></script>
+  <script src="spec/nthFibonacciSpec.js"></script>
+  <script src="spec/getElementsByClassNameSpec.js"></script>
+</head>
+<body>
+<div id="mocha"></div>
+</body>
+</html>
+