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 exercise updates

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-26 23:46:32 -08:00
parent 119fb5785d
commit c1b142a684
9 changed files with 115 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,19 +10,21 @@ This demo starts off with a few elements already in place. Let's walk through wh
- **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.
- **addTodo()** - This is the primary logic of our todo app. Here's how the lines break down.
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
> 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)
- **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
### 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
> 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)
### 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.

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

@@ -46,16 +46,6 @@
return document.querySelector('.textfield').value;
}
function addTodo() {
const todo = document.querySelector('.todo');
const newTodo = todo.cloneNode(true);
newTodo.querySelector('.title').innerText = getTodoText();
todo.parentElement.insertBefore(newTodo, todo);
clearInput('.textfield');
// updateRemaining();
}
function filter(filterName, button) {
document.querySelector('.selected').classList.remove('selected');
button.classList.add('selected');

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

@@ -5,7 +5,7 @@
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.
3. Set the `innerText` of the remaining span to the length of those todos.
4. Add updateRemaining() to addTodo
4. Add updateRemaining() to end of addTodo function
### Write a clearCompleted function

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

@@ -6,10 +6,10 @@
<body>
<header>
<h1>todos</h1>
<div class="addTodo">
<form onsubmit="return addTodo()" class="addTodo">
<input class="textfield" placeholder="add todo" />
<button onclick="addTodo()" class="submit">Add</button>
</div>
<button class="submit">Add</button>
</form>
<nav class="filter">
<button onclick="filter('all', this)" class="selected">all</button>
<button onclick="filter('active', this)">active</button>
@@ -52,7 +52,8 @@
remaining.innerText = todos;
}
function addTodo() {
function addTodo(ev) {
console.log('hello');
const todo = document.querySelector('.todo');
const newTodo = todo.cloneNode(true);
newTodo.querySelector('.title').innerText = getTodoText();