From b19973652a18eab99f789d958cc58bbea8106f02 Mon Sep 17 00:00:00 2001 From: Ken Date: Thu, 28 Feb 2019 21:45:48 -0800 Subject: [PATCH] splitting 2.1 and 2.2 readme's --- assets/step.css | 6 ++- markdownReadme/src/index.ts | 2 +- step2-01/{ => demo}/README.md | 79 +---------------------------------- step2-01/demo/index.html | 2 +- step2-01/exercise/README.md | 78 ++++++++++++++++++++++++++++++++++ step2-01/exercise/index.html | 5 ++- step2-02/{ => demo}/README.md | 26 +----------- step2-02/demo/index.html | 2 +- step2-02/exercise/README.md | 27 ++++++++++++ step2-02/exercise/index.html | 2 +- 10 files changed, 120 insertions(+), 109 deletions(-) rename step2-01/{ => demo}/README.md (66%) create mode 100644 step2-01/exercise/README.md rename step2-02/{ => demo}/README.md (72%) create mode 100644 step2-02/exercise/README.md diff --git a/assets/step.css b/assets/step.css index 9fe63d5..0b4516b 100644 --- a/assets/step.css +++ b/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; diff --git a/markdownReadme/src/index.ts b/markdownReadme/src/index.ts index bb8d331..075c40f 100644 --- a/markdownReadme/src/index.ts +++ b/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); diff --git a/step2-01/README.md b/step2-01/demo/README.md similarity index 66% rename from step2-01/README.md rename to step2-01/demo/README.md index 78453bf..563f92d 100644 --- a/step2-01/README.md +++ b/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` 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` 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. diff --git a/step2-01/demo/index.html b/step2-01/demo/index.html index 925e272..f15ff68 100644 --- a/step2-01/demo/index.html +++ b/step2-01/demo/index.html @@ -4,7 +4,7 @@ -
+
Nothing to show here; just look at your console window for output. Hit F12 (cmd+option+I on Mac) to open console window.
diff --git a/step2-01/exercise/README.md b/step2-01/exercise/README.md new file mode 100644 index 0000000..e88cac6 --- /dev/null +++ b/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` 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` 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. diff --git a/step2-01/exercise/index.html b/step2-01/exercise/index.html index 52458b8..3d990f4 100644 --- a/step2-01/exercise/index.html +++ b/step2-01/exercise/index.html @@ -4,9 +4,10 @@ -
+
- Nothing to show here; just look at your console window for output. Hit F12 (cmd+option+I on Mac) to open the console window. + Nothing to show here; just look at your console window for output. Hit F12 (cmd+option+I on Mac) to open the console + window.
diff --git a/step2-02/README.md b/step2-02/demo/README.md similarity index 72% rename from step2-02/README.md rename to step2-02/demo/README.md index 979e1b8..7fe9578 100644 --- a/step2-02/README.md +++ b/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 `