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

Day 1 updates

Browse Source
This commit is contained in:
Elizabeth Craig
2019-02-27 17:46:56 -08:00
parent 5e5717240c
commit 5aed397e01
14 changed files with 144 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 this function to 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;
}
}