mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
@@ -4,7 +4,7 @@ Every website, application, form or component starts with markup. The HTML will
|
||||
|
||||
## 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
|
||||
|
||||
@@ -41,7 +41,7 @@ As we saw in the previous demo, HTML elements can be used to describe different
|
||||
|
||||
### 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
|
||||
<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
|
||||
|
||||
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
|
||||
<head>
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
### Write updateRemaining function
|
||||
|
||||
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.
|
||||
4. Add updateRemaining() to addTodo
|
||||
|
||||
### 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
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user