diff --git a/step1-03/demo/README.md b/step1-03/demo/README.md index 5c13aec..0f48cb5 100644 --- a/step1-03/demo/README.md +++ b/step1-03/demo/README.md @@ -13,8 +13,9 @@ This demo starts off with a few elements already in place. Let's walk through wh - **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 2. Add `selected` to the clicked button - 3. Get all of the todos with [querySelectAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), and then loop through them. - 4. Set the `hidden` property of each todo based on the filter/state combination + 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. + 5. Set the `hidden` property of each todo based on the filter/state combination ### Writing addTodo Function diff --git a/step1-03/demo/index.html b/step1-03/demo/index.html index 2d89a82..285b5f2 100644 --- a/step1-03/demo/index.html +++ b/step1-03/demo/index.html @@ -46,9 +46,11 @@ return document.querySelector('.textfield').value; } - function filter(filterName, button) { + function filter(button) { document.querySelector('.selected').classList.remove('selected'); button.classList.add('selected'); + + const filterName = button.innerText; for (let todo of document.querySelectorAll('.todo')) { const checked = todo.querySelector('input').checked == true; if (filterName == 'all') { diff --git a/step1-03/exercise/README.md b/step1-03/exercise/README.md index 86769cb..3a87ee4 100644 --- a/step1-03/exercise/README.md +++ b/step1-03/exercise/README.md @@ -1,5 +1,10 @@ ## Exercise +### 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. + ### Write updateRemaining function 1. Get a reference to the span with the `remaining` class, and store it in a variable diff --git a/step1-03/exercise/index.html b/step1-03/exercise/index.html index b5af33b..dd41733 100644 --- a/step1-03/exercise/index.html +++ b/step1-03/exercise/index.html @@ -64,9 +64,11 @@ // clearCompleted - function filter(filterName, button) { + function filter(button) { document.querySelector('.selected').classList.remove('selected'); button.classList.add('selected'); + + const filterName = button.innerText; for (let todo of document.querySelectorAll('.todo')) { const checked = todo.querySelector('input').checked == true; if (filterName == 'all') { diff --git a/step1-03/final/index.html b/step1-03/final/index.html index 57d4d98..77f6662 100644 --- a/step1-03/final/index.html +++ b/step1-03/final/index.html @@ -6,14 +6,14 @@

todos

-
+
- - + +
@@ -53,7 +53,6 @@ } function addTodo(ev) { - console.log('hello'); const todo = document.querySelector('.todo'); const newTodo = todo.cloneNode(true); newTodo.querySelector('.title').innerText = getTodoText(); @@ -73,9 +72,11 @@ updateRemaining(); } - function filter(filterName, button) { + function filter(button) { document.querySelector('.selected').classList.remove('selected'); button.classList.add('selected'); + + const filterName = button.innerText; for (let todo of document.querySelectorAll('.todo')) { const checked = todo.querySelector('input').checked == true; if (filterName == 'all') {