Merge branch 'master' of github.com:Microsoft/frontend-bootcamp
This commit is contained in:
Ken
Коммит
793c8f406f
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
|
||||
<link rel="stylesheet" href="./assets/shared.css" />
|
||||
<title>Microsoft Days in the Web - Welcome</title>
|
||||
</head>
|
||||
<body class="ms-Fabric">
|
||||
<div class="Container">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
## HTML Demo
|
||||
|
||||
The [HTML demo page](http://localhost:8080/step1-00/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
|
||||
The [HTML demo page](http://localhost:8080/step1-01/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
|
||||
|
||||
To learn more about each element, click on the elements below.
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head></head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1></h1>
|
||||
<div class="addTodo"></div>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<main class="filter"></main>
|
||||
<footer></footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -13,6 +13,7 @@ This demo starts off with a few elements already in place. Let's walk through wh
|
|||
- **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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
function updateRemaining() {
|
||||
const remaining = document.querySelector('.remaining');
|
||||
const todos = document.querySelectorAll('.todo');
|
||||
const todos = document.querySelectorAll('.todo').length;
|
||||
remaining.innerText = todos;
|
||||
}
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче