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 #12 from carlosk12/master

Browse Source 
Fixing some typos
This commit is contained in:
Micah Godbolt
2019-02-26 09:19:34 -08:00
committed by GitHub
parent 3f0fcff1e6 212806fe9c
commit b3f093ed69
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
step1-02/demo/README.md
View File

@@ -4,7 +4,7 @@ Every website, application, form or component starts with markup. The HTML will
## Demo ## Demo
In this exercise we will scaffold out some HTML for out Todo app, and add some basic styling to it. In this exercise we will scaffold out some HTML for our Todo app, then add some basic styling to it.
### Page scaffold ### Page scaffold
@@ -41,7 +41,7 @@ As we saw in the previous demo, HTML elements can be used to describe different
### Updating the header ### Updating the header
The header of our page is where most of the action is going to happen. First, lets give our page a title, adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div. The header of our page is where most of the action is going to happen. First, lets give our app a name, adding 'TODO' to our `h1`. Then we can add an input and button to our `addTodo` div.
```html ```html
<input class="textfield" placeholder="add todo" /> <button class="submit">Add</button> <input class="textfield" placeholder="add todo" /> <button class="submit">Add</button>
@@ -61,7 +61,7 @@ The navigation for this application is quite simple. We want users to be able to
### Adding styles ### Adding styles
Now that we've got the top of our application scaffolded, we can add some our styles in the head. Now that we've got the top of our application scaffolded, we can add some styles in the head.
```html ```html
<head> <head>

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

@@ -3,13 +3,13 @@
### 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
2. Use [querySelectAll](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. 3. Set the `innerText` of the remaining span to the length of those todos.
4. Add updateRemaining() to addTodo 4. Add updateRemaining() to addTodo
### Write a clearCompleted function ### Write a clearCompleted function
1. Get a reference to all of the todos with [querySelectAll](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 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 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 > Hint: you can use querySelector on any HTML node to find child elements within