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 branch 'master' of github.com:Microsoft/frontend-bootcamp

Browse Source
This commit is contained in:
Ken
2019-02-26 09:36:23 -08:00
parent 6953257aad b3f093ed69
commit 793c8f406f
7 changed files with 9 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <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="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
<link rel="stylesheet" href="./assets/shared.css" /> <link rel="stylesheet" href="./assets/shared.css" />
<title>Microsoft Days in the Web - Welcome</title>
</head> </head>
<body class="ms-Fabric"> <body class="ms-Fabric">
<div class="Container"> <div class="Container">

2
step1-01/html-demo/README.md
View File

@@ -1,6 +1,6 @@
## HTML Demo ## 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. To learn more about each element, click on the elements below.

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>

14
step1-02/demo/index.html
View File

@@ -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>

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

@@ -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. - **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 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 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 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 > 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) 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)

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

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

@@ -48,7 +48,7 @@
function updateRemaining() { function updateRemaining() {
const remaining = document.querySelector('.remaining'); const remaining = document.querySelector('.remaining');
const todos = document.querySelectorAll('.todo'); const todos = document.querySelectorAll('.todo').length;
remaining.innerText = todos; remaining.innerText = todos;
} }