split readmes between demo and exercise

step1-02/demo/README.md

@@ -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
 
 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.

step1-02/exercise/README.md

@@ -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.

step1-03/demo/README.md

@@ -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.
-
-## 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!

step1-03/exercise/README.md

@@ -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!

step1-05/demo/README.md

@@ -72,16 +72,3 @@ return (
 ```
 
 > 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]`

step1-05/exercise/README.md

@@ -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]`

step1-06/demo/README.md

@@ -120,16 +120,3 @@ With those two pieces in place, we can update our uncontrolled input to being co
 ```jsx
 <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?

step1-06/exercise/README.md

@@ -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?

step1-07/demo/README.md

@@ -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.
-
-## 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!

step1-07/exercise/README.md

@@ -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!