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 https://github.com/Microsoft/frontend-bootcamp

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-26 10:09:27 -08:00
parent 55cd2cffe8 9cef35ef70
commit 60041f1ba3
6 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -82,8 +82,8 @@ Demo and Exercises are combined
If you are interested in JavaScript, TypeScript, React, Redux, Design Systems, follow us on Twitter:
@kenneth_chau
@micahgodbolt
- [@kenneth_chau](https://twitter.com/kenneth_chau)
- [@micahgodbolt](https://twitter.com/micahgodbolt)
# Contributing

5
assets/track.js
View File

@@ -4,5 +4,8 @@ var appInsights=window.appInsights||function(a){
}({
instrumentationKey: "6ad37ae0-c4ab-4739-925c-1e2773c31f17"
});
// prettier-ignore
window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView();
if (window.location.hostname !== 'localhost') {
window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView(null, null, {urlReferrer: document.referrer});
}

2
index.html
View File

@@ -162,7 +162,7 @@
<h2>Playground</h2>
Build your app here!
</li>
<li class="Tile Tile--unnumbered"><a target="_blank" href="/playground/" class="Tile-link">Playground</a></li>
<li class="Tile Tile--unnumbered"><a target="_blank" href="./playground/" class="Tile-link">Playground</a></li>
</ul>
</div>
<script src="./assets/track.js"></script>

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

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

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

2
step2-09/README.md
View File

@@ -2,6 +2,8 @@
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
(First off, this doesn't work with the live site on github.io. Clone this repo to try this step out)
Redux Thunk middleware for actions with service calls. The documentation is here:
https://github.com/reduxjs/redux-thunk