splitting 2.1 and 2.2 readme's

assets/step.css

@@ -21,13 +21,17 @@ body {
 #markdownReadme {
   box-sizing: border-box;
   flex: 1 1 60%;
-  background: #efefef;
+  background: #f3f2f1;
   padding: 50px;
   margin: 0 auto;
   height: 100vh;
   overflow: scroll;
 }
 
+#markdownReadme.exercise {
+  background-color: #deecf9;
+}
+
 #markdownReadme pre {
   padding: 5px;
   border-radius: 3px;

markdownReadme/src/index.ts

@@ -22,7 +22,7 @@ async function run() {
   marked.setOptions({ renderer });
 
   if (div) {
-    const response = await fetch('../README.md');
+    const response = await fetch(div.dataset['src'] || '../README.md');
     const markdownText = await response.text();
     div.innerHTML = marked(markdownText, { baseUrl: '../' });
     restoreScroll(div);

step2-01/demo/README.md

@@ -1,4 +1,4 @@
-# Step 2.1: Introduction to TypeScript
+# Step 2.1: Introduction to TypeScript (Demo)
 
 [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
 
@@ -26,7 +26,7 @@ The most important ones to know about are:
   - statically analyzable and synchronous
   - dynamic and asynchronous support via `import()` that returns a promise
 
-> For more information about the *many* modularity patterns and standards developed over time, see [this article](https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc). You may still encounter some of the older patterns in legacy code.
+> For more information about the _many_ modularity patterns and standards developed over time, see [this article](https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc). You may still encounter some of the older patterns in legacy code.
 
 ## TypeScript Types
 
@@ -160,78 +160,3 @@ someFunctionAsync().then(result => {
 ```
 
 > For more information, see [this article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).
-
-# Exercise
-
-If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder.
-
-Exercises will be completed under this step's `exercise/src` folder unless otherwise noted. You'll also want to open the [Step2-01 exercise page](http://localhost:8080/step2-01/exercise/) to see the results as you work.
-
-## Modules
-
-1. Open the file `exercise/src/fibonacci.ts` in VS Code
-
-2. Inside this file, write a function called `fib(n)` that takes in a number and returns the `n`-th Fibonacci number (be sure the specify the type of `n`).
-
-> HINT: `function fib(n: number) { return n <= 1 ? n : fib(n - 1) + fib(n - 2); }`
-
-3. Export `fib(n)` as a **named export**
-
-4. Export a const variable `FibConst` as a **default export**
-
-5. Inside `index.ts` in the same folder, import both `fib` and `FibConst`, and use the built-in `console.log()` function to log the result of `fib(FibConst)`.
-
-## Types and Interfaces
-
-Inside `exercise/src/index.ts`:
-
-1. Add a type alias for string union type describing the states of Red-Green-Yellow traffic light: `type TrafficLight = ???`
-
-2. Describe a type of car with an interface: `interface Car { ... }` complete with `wheels`, `color`, `make`, `model`
-
-3. Create a valid car instance and log it using `console.log()`: `const myCar: Car = { ??? }`;
-
-## Generics
-
-Inside `exercise/src/stack.ts`, create a generic class for a `Stack<T>` complete with a typed `pop()` and `push()` methods.
-
-> Hint: the JavaScript array already has `push()` and `pop()` implemented for you. That can be your backing store.
-
-In `exercise/src/index.ts`, create a `Stack<number>` and use `console.log()` to demonstrate its functionality.
-
-## Spread and Destructuring
-
-1. Note the following code in index.ts:
-
-```ts
-const obj1 = {
-  first: 'who',
-  second: 'what',
-  third: 'dunno',
-  left: 'why'
-};
-
-const obj2 = {
-  center: 'because',
-  pitcher: 'tomorrow',
-  catcher: 'today'
-};
-```
-
-2. Now create a one-liner using the spread syntax `{...x, ...y}` to create a new variable `megaObj` that combines these two objects.
-
-3. Use the destructuring syntax to retrieve the values for `{first, second, catcher}` from `megaObj`.
-
-## Async / Await
-
-Note the following code in index.ts:
-
-```ts
-function makePromise() {
-  return Promise.resolve(5);
-}
-```
-
-1. Call `makePromise()` with the `await` syntax and log the results.
-
-2. Create a new function that uses the `async` keyword. Inside the function, make an `await` call to `makePromise()` and return the results.

step2-01/demo/index.html

@@ -4,7 +4,7 @@
     <link rel="stylesheet" href="../../assets/step.css" />
   </head>
   <body class="ms-Fabric">
-    <div id="markdownReadme"></div>
+    <div id="markdownReadme" data-src="./README.md"></div>
     <div id="app">
       Nothing to show here; just look at your console window for output. Hit F12 (<code>cmd+option+I</code> on Mac) to open console window.
     </div>

step2-01/exercise/README.md

@@ -0,0 +1,78 @@
+# Step 2.1: Introduction to TypeScript (Exercise)
+
+[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
+
+# Exercise
+
+If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder.
+
+Exercises will be completed under this step's `exercise/src` folder unless otherwise noted. You'll also want to open the [Step2-01 exercise page](http://localhost:8080/step2-01/exercise/) to see the results as you work.
+
+## Modules
+
+1. Open the file `exercise/src/fibonacci.ts` in VS Code
+
+2. Inside this file, write a function called `fib(n)` that takes in a number and returns the `n`-th Fibonacci number (be sure the specify the type of `n`).
+
+> HINT: `function fib(n: number) { return n <= 1 ? n : fib(n - 1) + fib(n - 2); }`
+
+3. Export `fib(n)` as a **named export**
+
+4. Export a const variable `FibConst` as a **default export**
+
+5. Inside `index.ts` in the same folder, import both `fib` and `FibConst`, and use the built-in `console.log()` function to log the result of `fib(FibConst)`.
+
+## Types and Interfaces
+
+Inside `exercise/src/index.ts`:
+
+1. Add a type alias for string union type describing the states of Red-Green-Yellow traffic light: `type TrafficLight = ???`
+
+2. Describe a type of car with an interface: `interface Car { ... }` complete with `wheels`, `color`, `make`, `model`
+
+3. Create a valid car instance and log it using `console.log()`: `const myCar: Car = { ??? }`;
+
+## Generics
+
+Inside `exercise/src/stack.ts`, create a generic class for a `Stack<T>` complete with a typed `pop()` and `push()` methods.
+
+> Hint: the JavaScript array already has `push()` and `pop()` implemented for you. That can be your backing store.
+
+In `exercise/src/index.ts`, create a `Stack<number>` and use `console.log()` to demonstrate its functionality.
+
+## Spread and Destructuring
+
+1. Note the following code in index.ts:
+
+```ts
+const obj1 = {
+  first: 'who',
+  second: 'what',
+  third: 'dunno',
+  left: 'why'
+};
+
+const obj2 = {
+  center: 'because',
+  pitcher: 'tomorrow',
+  catcher: 'today'
+};
+```
+
+2. Now create a one-liner using the spread syntax `{...x, ...y}` to create a new variable `megaObj` that combines these two objects.
+
+3. Use the destructuring syntax to retrieve the values for `{first, second, catcher}` from `megaObj`.
+
+## Async / Await
+
+Note the following code in index.ts:
+
+```ts
+function makePromise() {
+  return Promise.resolve(5);
+}
+```
+
+1. Call `makePromise()` with the `await` syntax and log the results.
+
+2. Create a new function that uses the `async` keyword. Inside the function, make an `await` call to `makePromise()` and return the results.

step2-01/exercise/index.html

@@ -4,9 +4,10 @@
     <link rel="stylesheet" href="../../assets/step.css" />
   </head>
   <body class="ms-Fabric">
-    <div id="markdownReadme"></div>
+    <div id="markdownReadme" class="exercise" data-src="./README.md"></div>
     <div id="app">
-      Nothing to show here; just look at your console window for output. Hit F12 (<code>cmd+option+I</code> on Mac) to open the console window.
+      Nothing to show here; just look at your console window for output. Hit F12 (<code>cmd+option+I</code> on Mac) to open the console
+      window.
     </div>
     <script src="../../assets/scripts.js"></script>
   </body>

step2-02/demo/README.md

@@ -1,4 +1,4 @@
-# Step 2.2: UI Fabric Component Library
+# Step 2.2: UI Fabric Component Library (Demo)
 
 [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
 
@@ -106,27 +106,3 @@ Flexbox uses CSS styles to control:
 Stack abstracts these CSS styles and provides typings to make them more discoverable.
 
 Check out a cookbook of sorts in our [documentation](https://developer.microsoft.com/en-us/fabric#/components/stack).
-
-# Exercise 1: Getting familiar with the Fabric documentation site:
-
-Open the [documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button). Use the sidebar to explore other available components.
-
-# Exercise 2: "Fabric"ize the TodoFooter.tsx
-
-If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 2 to see results.
-
-1. Open TSX file inside `exercise/src/components/TodoFooter.tsx`
-2. Follow the top TODO comment to import Stack, Text and DefaultButton components from Fabric
-3. Follow the TODO comment to:
-
-- replace `<footer>` with a `<Stack>`
-- replace `<span>` with a `<Text>`
-- replace `<button>` with a `<DefaultButton>`
-
-## Bonus Exercise
-
-GO WILD! There are so many components in the Fabric library! Try to put some components in the exercise component files. Try out these concepts mentioned earlier:
-
-- Importing components from `office-ui-fabric-react`
-- Customizing component with props found on the documentation site
-- Customize component with render props (these will be called onRender\_\_\_ or similar)

step2-02/demo/index.html

@@ -4,7 +4,7 @@
     <link rel="stylesheet" href="../../assets/step.css" />
   </head>
   <body class="ms-Fabric">
-    <div id="markdownReadme"></div>
+    <div id="markdownReadme" data-src="./README.md"></div>
     <div id="app"></div>
     <script src="../../assets/scripts.js"></script>
   </body>

step2-02/exercise/README.md

@@ -0,0 +1,27 @@
+# Step 2.2: UI Fabric Component Library (Exercise)
+
+[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
+
+# Exercise 1: Getting familiar with the Fabric documentation site:
+
+Open the [documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button). Use the sidebar to explore other available components.
+
+# Exercise 2: "Fabric"ize the TodoFooter.tsx
+
+If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 2 to see results.
+
+1. Open TSX file inside `exercise/src/components/TodoFooter.tsx`
+2. Follow the top TODO comment to import Stack, Text and DefaultButton components from Fabric
+3. Follow the TODO comment to:
+
+- replace `<footer>` with a `<Stack>`
+- replace `<span>` with a `<Text>`
+- replace `<button>` with a `<DefaultButton>`
+
+## Bonus Exercise
+
+GO WILD! There are so many components in the Fabric library! Try to put some components in the exercise component files. Try out these concepts mentioned earlier:
+
+- Importing components from `office-ui-fabric-react`
+- Customizing component with props found on the documentation site
+- Customize component with render props (these will be called onRender\_\_\_ or similar)

step2-02/exercise/index.html

@@ -4,7 +4,7 @@
     <link rel="stylesheet" href="../../assets/step.css" />
   </head>
   <body class="ms-Fabric">
-    <div id="markdownReadme"></div>
+    <div id="markdownReadme" class="exercise" data-src="./README.md"></div>
     <div id="app"></div>
     <script src="../../assets/scripts.js"></script>
   </body>