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

simplified the filter function in step 3, updated instructions to add it to the buttons. fixes #23

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-27 09:26:36 -08:00
parent 17c9f2410a
commit e558da25ab
5 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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. - **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 1. Remove any `selected` class names
2. Add `selected` to the clicked button 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. 3. Set `filterName` to the clicked button's `innerText` value.
4. Set the `hidden` property of each todo based on the filter/state combination 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

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

@@ -46,9 +46,11 @@
return document.querySelector('.textfield').value; return document.querySelector('.textfield').value;
} }
function filter(filterName, button) { function filter(button) {
document.querySelector('.selected').classList.remove('selected'); document.querySelector('.selected').classList.remove('selected');
button.classList.add('selected'); button.classList.add('selected');
const filterName = button.innerText;
for (let todo of document.querySelectorAll('.todo')) { for (let todo of document.querySelectorAll('.todo')) {
const checked = todo.querySelector('input').checked == true; const checked = todo.querySelector('input').checked == true;
if (filterName == 'all') { if (filterName == 'all') {

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

@@ -1,5 +1,10 @@
## Exercise ## 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 ### Write updateRemaining function
1. Get a reference to the span with the `remaining` class, and store it in a variable 1. Get a reference to the span with the `remaining` class, and store it in a variable

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

@@ -64,9 +64,11 @@
// clearCompleted // clearCompleted
function filter(filterName, button) { function filter(button) {
document.querySelector('.selected').classList.remove('selected'); document.querySelector('.selected').classList.remove('selected');
button.classList.add('selected'); button.classList.add('selected');
const filterName = button.innerText;
for (let todo of document.querySelectorAll('.todo')) { for (let todo of document.querySelectorAll('.todo')) {
const checked = todo.querySelector('input').checked == true; const checked = todo.querySelector('input').checked == true;
if (filterName == 'all') { if (filterName == 'all') {

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

@@ -6,14 +6,14 @@
<body> <body>
<header> <header>
<h1>todos</h1> <h1>todos</h1>
<form onsubmit="return addTodo()" class="addTodo"> <div class="addTodo">
<input class="textfield" placeholder="add todo" /> <input class="textfield" placeholder="add todo" />
<button class="submit">Add</button> <button onclick="addTodo()" class="submit">Add</button>
</form> </div>
<nav class="filter"> <nav class="filter">
<button onclick="filter('all', this)" class="selected">all</button> <button onclick="filter(this)" class="selected">all</button>
<button onclick="filter('active', this)">active</button> <button onclick="filter(this)">active</button>
<button onclick="filter('completed', this)">completed</button> <button onclick="filter(this)">completed</button>
</nav> </nav>
</header> </header>
@@ -53,7 +53,6 @@
} }
function addTodo(ev) { function addTodo(ev) {
console.log('hello');
const todo = document.querySelector('.todo'); const todo = document.querySelector('.todo');
const newTodo = todo.cloneNode(true); const newTodo = todo.cloneNode(true);
newTodo.querySelector('.title').innerText = getTodoText(); newTodo.querySelector('.title').innerText = getTodoText();
@@ -73,9 +72,11 @@
updateRemaining(); updateRemaining();
} }
function filter(filterName, button) { function filter(button) {
document.querySelector('.selected').classList.remove('selected'); document.querySelector('.selected').classList.remove('selected');
button.classList.add('selected'); button.classList.add('selected');
const filterName = button.innerText;
for (let todo of document.querySelectorAll('.todo')) { for (let todo of document.querySelectorAll('.todo')) {
const checked = todo.querySelector('input').checked == true; const checked = todo.querySelector('input').checked == true;
if (filterName == 'all') { if (filterName == 'all') {