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

Merge pull request #32 from ecraig12345/day1

Browse Source 
Day 1 updates
This commit is contained in:
Micah Godbolt
2019-02-27 18:15:10 -08:00
committed by GitHub
parent fdceb93839 5aed397e01
commit 99e9b1e58c
14 changed files with 144 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
step1-03/demo/README.md
View File

@@ -1,6 +1,6 @@
# JavaScript Demo
Now that we a UI that looks like a todo app, we need to add functionality to make it **function** like a todo app. In this example we are going to use raw JavaScript to explicitly modify our application as we interact with it. This will be in stark contrast to the implicit approach we will take when we do this with React in the next exercise.
Now that we have a UI that looks like a todo app, we need to make it **function** like a todo app. In this example we are going to use raw JavaScript to explicitly modify our application as we interact with it. This will be in stark contrast to the implicit approach we will take when we do this with React in the next exercise.
> Keep an eye on how often user actions directly modify the HTML on the page. You'll see this number drop to zero when we start using React.
@@ -8,29 +8,29 @@ Now that we a UI that looks like a todo app, we need to add functionality to mak
This demo starts off with a few elements already in place. Let's walk through what's already here.
- **clearInput()** - This is a generic, reusable function that takes in a `selector` parameter, finds the first matching element, and sets the element's value to an empty string. This direct modification is called a side effect.
- **getTodoText()** - This is a quick helper function that returns the value inside of our textfield. Notice how some functions return values and how you can set that return to a variable.
- **filter()** - This function takes in a `filterName` string, and a `button` which is a reference to the clicked button.
1. Remove any `selected` class names.
- `clearInput()` - This is a generic, reusable function that takes in a `selector` parameter, finds the first matching element, and sets the element's value to an empty string. This direct modification is called a **side effect**.
- `getTodoText()` - This is a helper function that returns the value inside of our text field. Notice how some functions return values and how you can save that return value in a variable.
- `filter()` - This function takes in a `filterName` string, and a `button` which is a reference to the clicked button.
1. Remove the `selected` class from the previously selected element.
2. Add `selected` to the clicked button.
3. Set `filterName` to the clicked button's `innerText` value.
4. Get all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), and then loop through them.
4. Get all of the todos with [`querySelectAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), and then loop through them.
5. Set the `hidden` property of each todo based on the filter/state combination.
### Writing addTodo Function
### Writing `addTodo` function
1. `todo` is set to equal the first todo item.
2. `newTodo` is a clone of todo. Passing true means it is a deep clone, so we get the todo's children as well. Cloning does not duplicate the DOM node. We'll need to insert it in step 4.
1. `todo` is set to the first todo item
2. `newTodo` is a clone of `todo`. Passing true means it is a deep clone, so we get the todo's children as well. Cloning does not duplicate the DOM node. We'll need to insert it in step 4.
> Note that this approach is very fragile, as it requires a todo node to always be present on the page.
3. We set the innerText of the `<span class='title'>` to the value returned from getTodoText.
> Note that if we left off the `()` we'd actually be assigning innerText to the 'function' instead of the function return.
4. Insert our new todo into the todo's parent (the `ul`), before our reference todo. [insertBefore](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore)
3. We set the `innerText` of the `<span class='title'>` to the value returned from `getTodoText`
> Note that if we left off the `()` we'd actually be assigning the *function* to `innerText` instead of the function's returned value.
4. Insert our new todo into the todo's parent (the `ul`) before our reference todo using [`insertBefore`](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore).
### Triggering functions from click events
Now that we have a working `addTodo` function, we need a way to trigger it when the user is ready. This can be done in two ways.
1. We can find the element with querySelector, then set its `onclick` to our function
1. We can find the element with `querySelector`, then set its `onclick` to our function
```js
document.querySelector('.addTodo .submit').onclick = addTodo;

8
step1-03/demo/index.html
View File

@@ -52,12 +52,12 @@
const filterName = button.innerText;
for (let todo of document.querySelectorAll('.todo')) {
const checked = todo.querySelector('input').checked == true;
if (filterName == 'all') {
const checked = todo.querySelector('input').checked === true;
if (filterName === 'all') {
todo.hidden = false;
} else if (filterName == 'active') {
} else if (filterName === 'active') {
todo.hidden = checked;
} else if (filterName == 'completed') {
} else if (filterName === 'completed') {
todo.hidden = !checked;
}
}

18
step1-03/exercise/README.md
View File

@@ -2,23 +2,23 @@
### Update Navigation
1. Add an onclick attribute to all 3 buttons in the navigation.
2. For each onclick call the `filter` function. In our function we need a reference to the clicked button, so pass in the keyword `this` as the only parameter.
1. Add an `onclick` attribute to all three buttons in the navigation.
2. In each `onclick` call the `filter` function. In our function we need a reference to the clicked button, so pass in the keyword `this` as the only parameter.
### Write updateRemaining function
### Write an `updateRemaining` function
1. Get a reference to the span with the `remaining` class, and store it in a variable.
2. Use [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to get all of the todos.
2. Use [`querySelectorAll`](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 end of addTodo function.
4. Add `updateRemaining()` to the end of the `addTodo` function.
### Write a clearCompleted function
### Write a `clearCompleted` function
1. Get a reference to all of the todos with [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll).
1. Get a reference to all of the todos with [`querySelectorAll`](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.
> Hint: you can use `querySelector` on any HTML element to find matching child elements.
4. Call `todo.remove()` for any todo whose input is checked.
5. After the loop is done, run `updateRemaining()`.
6. Attach `clearCompleted()` function to the `onclick` of the footer button.
7. Test it out!

8
step1-03/exercise/index.html
View File

@@ -70,12 +70,12 @@
const filterName = button.innerText;
for (let todo of document.querySelectorAll('.todo')) {
const checked = todo.querySelector('input').checked == true;
if (filterName == 'all') {
const checked = todo.querySelector('input').checked === true;
if (filterName === 'all') {
todo.hidden = false;
} else if (filterName == 'active') {
} else if (filterName === 'active') {
todo.hidden = checked;
} else if (filterName == 'completed') {
} else if (filterName === 'completed') {
todo.hidden = !checked;
}
}

10
step1-03/final/index.html
View File

@@ -65,7 +65,7 @@
function clearCompleted() {
const todos = document.querySelectorAll('.todo');
for (let todo of todos) {
if (todo.querySelector('input').checked == true) {
if (todo.querySelector('input').checked === true) {
todo.remove();
}
}
@@ -78,12 +78,12 @@
const filterName = button.innerText;
for (let todo of document.querySelectorAll('.todo')) {
const checked = todo.querySelector('input').checked == true;
if (filterName == 'all') {
const checked = todo.querySelector('input').checked === true;
if (filterName === 'all') {
todo.hidden = false;
} else if (filterName == 'active') {
} else if (filterName === 'active') {
todo.hidden = checked;
} else if (filterName == 'completed') {
} else if (filterName === 'completed') {
todo.hidden = !checked;
}
}