diff --git a/step1-07/demo/README.md b/step1-07/demo/README.md index 6b66a51..4f68fc0 100644 --- a/step1-07/demo/README.md +++ b/step1-07/demo/README.md @@ -1,4 +1,4 @@ -# Types and Creating a UI Driven State +# Types and Creating a UI-Driven State Now that we have a UI that is purely driven by the state of our app, we need to add functionality to allow the UI to drive the state. This is often done by creating functions that call `setState` like we saw in the `TodoHeader`. Values from the state are then passed down to the UI as props. diff --git a/step2-01/README.md b/step2-01/README.md index b21dc3b..efb707d 100644 --- a/step2-01/README.md +++ b/step2-01/README.md @@ -167,35 +167,35 @@ Exercises will be completed under this step's `exercise/src` folder unless other ## Modules -1. Open the file `exercise/src/index.ts` in VS Code +1. Open the file `exercise/src/fibonacci.ts` in VS Code -2. Create another module file called `fibonacci.ts` - -3. Inside the file from (step 2), 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`). +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); }` -4. Export `fib(n)` as a **named export** +3. Export `fib(n)` as a **named export** -5. Export another const variable as a **default export** +4. Export a const variable `FibConst` as a **default export** -6. Inside `index.ts`, import both of the modules created in steps (4) and (5) and use the built-in `console.log()` function to log the result of `fib(FibConst)`. +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 `index.ts`: +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 `stack.ts`, create a generic class for a `Stack` complete with a typed `pop()` and `push()` methods. +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. -Be sure to use the built-in `console.log()` to show the functionality of `Stack`. +In `index.ts`, create a `Stack` and use `console.log()` to demonstrate its functionality. ## Spread and Destructuring @@ -216,9 +216,9 @@ const obj2 = { }; ``` -2. Now create a one-liner using the spread syntax `{...x, ...y}` to create a new variable that combines these two objects. +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 the new object created in step (2). +3. Use the destructuring syntax to retrieve the values for `{first, second, catcher}` from `megaObj`. ## Async / Await @@ -230,6 +230,6 @@ function makePromise() { } ``` -1. Call `makePromise()` with the `await` syntax and log the results using the provided `log()` function. +1. Call `makePromise()` with the `await` syntax and log the results. -2. Create a new function that uses the `async` keyword. Make an `await` call to `makePromise()` and return 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/src/fibonacci.ts b/step2-01/exercise/src/fibonacci.ts index b99bcb6..6f81427 100644 --- a/step2-01/exercise/src/fibonacci.ts +++ b/step2-01/exercise/src/fibonacci.ts @@ -1,5 +1,5 @@ // TODO: create a named export of a function called fib(n) // export function fib(n: number) ... -// TODO: create a default export of a constant of a number +// TODO: create a default export of a constant of a number FibConst // export default ... diff --git a/step2-01/exercise/src/index.ts b/step2-01/exercise/src/index.ts index 737602c..0a6a369 100644 --- a/step2-01/exercise/src/index.ts +++ b/step2-01/exercise/src/index.ts @@ -1,7 +1,32 @@ // TODO: import the fib(n) function and the constant from './fibonacci.ts' // import {fib}, FibConst from ... -// Some setup code for exercises +// TODO: import Stack from './stack.ts' + +// Do the exercises here, outputting results using console.log() +console.log('hello world'); + +// ---- Modules ---- + +// TODO: log the result of fib(FibConst) + +// ---- Types and Interfaces ---- + +// TODO: define TrafficLight type +// type TrafficLight = ??? + +// TODO: define Car interface +// interface Car { ??? } + +// TODO: create Car instance +// const myCar: Car = { ??? } + +// ---- Generics ---- + +// TODO: Demonstrate the Stack +// const myStack: Stack = ??? + +// ---- Spread and Destructuring ---- const obj1 = { first: 'who', second: 'what', @@ -15,17 +40,16 @@ const obj2 = { catcher: 'today' }; +// TODO: combine obj1 and obj2 into a single object megaObj using spread syntax +// const megaObj = ??? + +// TODO: use destructuring syntax to extract { first, second, catcher } + +// ---- Async / Await ---- function makePromise() { return Promise.resolve(5); } -// Do the exercises here, outputting results using console.log() -// ... -console.log('hello world'); +// TODO: call makePromise() using await syntax and log the results -async function run() { - // Call the function you added for the async / await exercise here - // ... -} - -run(); +// TODO: create a new async function