mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
Scaffolding out readmes
This commit is contained in:
@@ -1,9 +1,9 @@
|
|||||||
## HTML and CSS
|
## HTML and CSS
|
||||||
|
|
||||||
|
## Demo
|
||||||
|
|
||||||
|
Scaffold out page
|
||||||
|
|
||||||
## Exercise
|
## Exercise
|
||||||
|
|
||||||
1. Add an unordered list of class 'todos' after the filters
|
Add and style footer
|
||||||
2. Add four todos.
|
|
||||||
3. Center the "TODO" header
|
|
||||||
4. Style all elements with button class to have no border and 5px padding top/bottom and 10px left/right
|
|
||||||
5. Set the active button style to have a 2px solid blue bottom border
|
|
||||||
|
|||||||
18
step1-03/README.md
Normal file
18
step1-03/README.md
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
Demo
|
||||||
|
|
||||||
|
already done
|
||||||
|
|
||||||
|
- addTodo
|
||||||
|
- filter
|
||||||
|
- filter()
|
||||||
|
- getTodoText
|
||||||
|
|
||||||
|
Walk through 'addTodo'
|
||||||
|
attach addTodo to button
|
||||||
|
write clearInput/add to addTodo
|
||||||
|
write updateRemaining
|
||||||
|
|
||||||
|
## Exercise
|
||||||
|
|
||||||
|
write clearCompleted
|
||||||
|
add to footer button
|
||||||
@@ -42,7 +42,7 @@
|
|||||||
return document.querySelector('.textfield').value;
|
return document.querySelector('.textfield').value;
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearInput(selector) {
|
function clearInput() {
|
||||||
document.querySelector('.textfield').value = '';
|
document.querySelector('.textfield').value = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
7
step1-05/README.md
Normal file
7
step1-05/README.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
demo
|
||||||
|
Header
|
||||||
|
ListItem
|
||||||
|
|
||||||
|
exercise
|
||||||
|
Footer
|
||||||
|
List
|
||||||
@@ -3,10 +3,8 @@ import { TodoFooter } from './components/TodoFooter';
|
|||||||
import { TodoHeader } from './components/TodoHeader';
|
import { TodoHeader } from './components/TodoHeader';
|
||||||
import { TodoList } from './components/TodoList';
|
import { TodoList } from './components/TodoList';
|
||||||
|
|
||||||
|
|
||||||
export class TodoApp extends React.Component {
|
export class TodoApp extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<TodoHeader />
|
<TodoHeader />
|
||||||
|
|||||||
@@ -3,14 +3,12 @@ import { TodoListItem } from './TodoListItem';
|
|||||||
|
|
||||||
export class TodoList extends React.Component<any, any> {
|
export class TodoList extends React.Component<any, any> {
|
||||||
render() {
|
render() {
|
||||||
const { filter, todos } = this.props;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul className="todos">
|
<ul className="todos">
|
||||||
<TodoListItem/>
|
<TodoListItem />
|
||||||
<TodoListItem/>
|
<TodoListItem />
|
||||||
<TodoListItem/>
|
<TodoListItem />
|
||||||
<TodoListItem/>
|
<TodoListItem />
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
12
step1-06/README.md
Normal file
12
step1-06/README.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
already done
|
||||||
|
itemCount filtering
|
||||||
|
|
||||||
|
demo
|
||||||
|
|
||||||
|
add state
|
||||||
|
pass to header and list
|
||||||
|
add filter class stuff
|
||||||
|
|
||||||
|
exercise
|
||||||
|
update footer to include todos
|
||||||
|
add item count and item(s)
|
||||||
Reference in New Issue
Block a user