microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

split readmes between demo and exercise

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-24 19:22:41 -08:00
parent 5654f8897a
commit 02e2cfa7ef
11 changed files with 75 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
step1-02/README.md → step1-02/demo/README.md
View File

@@ -80,16 +80,3 @@ Open up the browser inspector and target our 'all' button. You'll notice that th
> **Specificity** states that regardless of cascade, the selector with the highest specificity wins > **Specificity** states that regardless of cascade, the selector with the highest specificity wins
To fix this problem we need to either reduce the specificity of our button styles, or increase the specificity of the selected style. In this situation we will add `.filter` in front of the `.selected` selector, because the selected style only applies to the filter anyway. To fix this problem we need to either reduce the specificity of our button styles, or increase the specificity of the selected style. In this situation we will add `.filter` in front of the `.selected` selector, because the selected style only applies to the filter anyway.
## Exercise
1. Add an unordered list with class `todos` to the main section
2. Add 4 list items with class `todo` inside of that list with the following content
`<label><input type="checkbox" /> <span class="title"> Todo </span> </label>`
3. Add a span and a button to your footer
4. Span content should be `4 items left` and button should say `Clear Completed` and have a class of `submit`
5. Go into the CSS file and add `display: flex` to the footer. Also add `flex-grow:1` to the span inside of the footer
> Hint: Look back at the CSS demo to see the various ways you can use selectors to target existing HTML
> There are many strategies for creating and organizing class names in a large application. This lesson is focused on using CSS selectors, not the optimized way to scale your CSS.

12
step1-02/exercise/README.md Normal file
View File

@@ -0,0 +1,12 @@
## Exercise
1. Add an unordered list with class `todos` to the main section
2. Add 4 list items with class `todo` inside of that list with the following content
`<label><input type="checkbox" /> <span class="title"> Todo </span> </label>`
3. Add a span and a button to your footer
4. Span content should be `4 items left` and button should say `Clear Completed` and have a class of `submit`
5. Go into the CSS file and add `display: flex` to the footer. Also add `flex-grow:1` to the span inside of the footer
> Hint: Look back at the CSS demo to see the various ways you can use selectors to target existing HTML
> There are many strategies for creating and organizing class names in a large application. This lesson is focused on using CSS selectors, not the optimized way to scale your CSS.

20
step1-03/README.md → step1-03/demo/README.md
View File

@@ -39,23 +39,3 @@ document.querySelector('.addTodo .submit').onclick = addTodo;
``` ```
Today we'll use #2, as this is the way it will work in React as well. Today we'll use #2, as this is the way it will work in React as well.
## Exercise
### Write updateRemaining function
1. Get a reference to the span with the `remaining` class, and store it in a variable
2. Use [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos.
3. Set the `innerText` of the remaining span to the length of those todos.
4. Add updateRemaining() to addTodo
### Write a clearCompleted function
1. Get a reference to all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
2. Use a `for (let todo of todos)` loop to iterate over each todo
3. Inside the for loop write an `if` statement to test if the `input` inside of the todo has a checked value of true
> Hint: you can use querySelector on any HTML node to find child elements within
4. Call `todo.remove()` for any todo whos input check is true
5. After the loop is done, run `updateRemaining()`
6. Attach this function to the footer button
7. Test it out!

19
step1-03/exercise/README.md Normal file
View File

@@ -0,0 +1,19 @@
## Exercise
### Write updateRemaining function
1. Get a reference to the span with the `remaining` class, and store it in a variable
2. Use [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos.
3. Set the `innerText` of the remaining span to the length of those todos.
4. Add updateRemaining() to addTodo
### Write a clearCompleted function
1. Get a reference to all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
2. Use a `for (let todo of todos)` loop to iterate over each todo
3. Inside the for loop write an `if` statement to test if the `input` inside of the todo has a checked value of true
> Hint: you can use querySelector on any HTML node to find child elements within
4. Call `todo.remove()` for any todo whos input check is true
5. After the loop is done, run `updateRemaining()`
6. Attach this function to the footer button
7. Test it out!

0
step1-04/README.md → step1-04/demo/README.md
View File

13
step1-05/README.md → step1-05/demo/README.md
View File

@@ -72,16 +72,3 @@ return (
``` ```
> Note that I've removed the title span as it was only needed to make targeting that text easier > Note that I've removed the title span as it was only needed to make targeting that text easier
## Exercise
### TodoFooter
1. Update the TodoFooter component, copying over the `<footer>` tag and all of its children
2. Remove any `onclick` properties, and change `class` to `className`
### TodoList
1. Update the TodoList component like you did with the footer.
2. Import TodoListItem and add 4 of them inside of the `<ul>`
3. Bonus points for using a [`for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) loop or using [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to create 4 list items based on the array `[1,2,3,4]`

12
step1-05/exercise/README.md Normal file
View File

@@ -0,0 +1,12 @@
## Exercise
### TodoFooter
1. Update the TodoFooter component, copying over the `<footer>` tag and all of its children
2. Remove any `onclick` properties, and change `class` to `className`
### TodoList
1. Update the TodoList component like you did with the footer.
2. Import TodoListItem and add 4 of them inside of the `<ul>`
3. Bonus points for using a [`for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) loop or using [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to create 4 list items based on the array `[1,2,3,4]`

13
step1-06/README.md → step1-06/demo/README.md
View File

@@ -120,16 +120,3 @@ With those two pieces in place, we can update our uncontrolled input to being co
```jsx ```jsx
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" /> <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
``` ```
## Exercise
### TodoFooter
1. Use the provided `itemCount` value drive the number of items left.
2. Use a ternary operator to print `item` vs `items` based on if `itemCount > 1`
### TodoListItem
1. Pull in `label` and `completed` from props using [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)
2. Set the todo's text to `label` and the `checked` prop to `completed`
> Note that this is only half the work we need to do to make these controlled inputs. What is the other half?

12
step1-06/exercise/README.md Normal file
View File

@@ -0,0 +1,12 @@
## Exercise
### TodoFooter
1. Use the provided `itemCount` value drive the number of items left.
2. Use a ternary operator to print `item` vs `items` based on if `itemCount > 1`
### TodoListItem
1. Pull in `label` and `completed` from props using [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)
2. Set the todo's text to `label` and the `checked` prop to `completed`
> Note that this is only half the work we need to do to make these controlled inputs. What is the other half?

21
step1-07/README.md → step1-07/demo/README.md
View File

@@ -165,24 +165,3 @@ And then use the input's `onChange` event to fire our `complete` callback. We ca
``` ```
> Note that the function param and prop name just happen to be the same. This isn't required. > Note that the function param and prop name just happen to be the same. This isn't required.
## Exercise
### TodoFooter
1. Open TodoFooter and write a TodoFooterProps interface. It should include two values, a function and an object. Assign this interface to props like this: `(props: TodoFooterProps)`
2. Write an `_onClick` function that calls `props.clear`.
> Since TodoFooter is not a class the `_onClick` needs to be declared as a const, and placed before the `return`.
3. Add `_onClick` to the button's `onClick`. You won't need to use `this` since this isn't a class.
> We can't assign our `clear` function directly to `onClick`. We always need to create a function that calls our callbacks. `() => props.clear()`
4. Test out this functionality. Check a few todos complete and click the `Clear Completed` button
### TodoHeader
1. Open TodoHeader and write TodoHeaderProps which will include 3 values. Replace the first `any` with this interface.
2. This component also has state. Write TodoHeaderState (there's just one item), and add this where the second `any` was.
3. Add `_onFilter` to each of the filter buttons
> Note that we can't add new parameters to onClick, but we can pull information from the event target!
4. Write an `_onAdd` method that calls `addTodo` on the current `labelInput`, then sets the `labelInput` in state to an empty string
5. Call `_onAdd` from the submit button
6. Check out this new functionality! We can now add and filter todos!

20
step1-07/exercise/README.md Normal file
View File

@@ -0,0 +1,20 @@
## Exercise
### TodoFooter
1. Open TodoFooter and write a TodoFooterProps interface. It should include two values, a function and an object. Assign this interface to props like this: `(props: TodoFooterProps)`
2. Write an `_onClick` function that calls `props.clear`.
> Since TodoFooter is not a class the `_onClick` needs to be declared as a const, and placed before the `return`.
3. Add `_onClick` to the button's `onClick`. You won't need to use `this` since this isn't a class.
> We can't assign our `clear` function directly to `onClick`. We always need to create a function that calls our callbacks. `() => props.clear()`
4. Test out this functionality. Check a few todos complete and click the `Clear Completed` button
### TodoHeader
1. Open TodoHeader and write TodoHeaderProps which will include 3 values. Replace the first `any` with this interface.
2. This component also has state. Write TodoHeaderState (there's just one item), and add this where the second `any` was.
3. Add `_onFilter` to each of the filter buttons
> Note that we can't add new parameters to onClick, but we can pull information from the event target!
4. Write an `_onAdd` method that calls `addTodo` on the current `labelInput`, then sets the `labelInput` in state to an empty string
5. Call `_onAdd` from the submit button
6. Check out this new functionality! We can now add and filter todos!