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

Step numbers in todo app headers

Browse Source
This commit is contained in:
Elizabeth Craig
2019-03-05 02:58:04 -08:00
parent 46094abe9d
commit bdb17109a1
22 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
step1-05/TodoApp.html
View File

@@ -2,7 +2,7 @@
<html> <html>
<body> <body>
<header> <header>
<h1>todos</h1> <h1>todos <small>(1.5)</small></h1>
<div class="addTodo"> <div class="addTodo">
<input class="textfield" placeholder="add todo" /> <input class="textfield" placeholder="add todo" />
<button class="submit">Add</button> <button class="submit">Add</button>

2
step1-05/exercise/src/components/TodoHeader.tsx
View File

@@ -4,7 +4,7 @@ export class TodoHeader extends React.Component<any, any> {
render() { render() {
return ( return (
<header> <header>
<h1>todos - step1-05 exercise</h1> <h1>todos <small>(1.5 exercise)</small></h1>
<div className="addTodo"> <div className="addTodo">
<input className="textfield" placeholder="add todo" /> <input className="textfield" placeholder="add todo" />
<button className="submit">Add</button> <button className="submit">Add</button>

4
step1-05/exercise/src/style.css
View File

@@ -8,6 +8,10 @@ h1 {
text-align: center; text-align: center;
} }
small {
font-size: 0.5em;
}
.addTodo { .addTodo {
display: flex; display: flex;
} }

2
step1-06/demo/src/components/TodoHeader.tsx
View File

@@ -10,7 +10,7 @@ export class TodoHeader extends React.Component<any, any> {
const { filter } = this.props; const { filter } = this.props;
return ( return (
<header> <header>
<h1>todos - step1-06 demo</h1> <h1>todos <small>(1.6 demo)</small></h1>
<div className="addTodo"> <div className="addTodo">
<input className="textfield" placeholder="add todo" /> <input className="textfield" placeholder="add todo" />
<button className="submit">Add</button> <button className="submit">Add</button>

2
step1-06/demo/src/components/TodoList.tsx
View File

@@ -12,7 +12,7 @@ export class TodoList extends React.Component<any, any> {
return ( return (
<ul className="todos"> <ul className="todos">
[01, 02, 03, 04].map((id)=> <TodoListItem />) {['01', '02', '03', '04'].map((id) => <TodoListItem />)}
</ul> </ul>
); );
} }

4
step1-06/demo/src/style.css
View File

@@ -8,6 +8,10 @@ h1 {
text-align: center; text-align: center;
} }
small {
font-size: 0.5em;
}
.addTodo { .addTodo {
display: flex; display: flex;
} }

2
step1-06/exercise/src/components/TodoHeader.tsx
View File

@@ -11,7 +11,7 @@ export class TodoHeader extends React.Component<any, any> {
return ( return (
<header> <header>
<h1>todos - step1-06 exercise</h1> <h1>todos <small>(1.6 exercise)</small></h1>
<div className="addTodo"> <div className="addTodo">
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" /> <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button className="submit">Add</button> <button className="submit">Add</button>

4
step1-06/exercise/src/style.css
View File

@@ -8,6 +8,10 @@ h1 {
text-align: center; text-align: center;
} }
small {
font-size: 0.5em;
}
.addTodo { .addTodo {
display: flex; display: flex;
} }

2
step1-07/demo/src/components/TodoHeader.tsx
View File

@@ -11,7 +11,7 @@ export class TodoHeader extends React.Component<any, any> {
const { filter } = this.props; const { filter } = this.props;
return ( return (
<header> <header>
<h1>todos - step1-07 demo</h1> <h1>todos <small>(1.7 demo)</small></h1>
<div className="addTodo"> <div className="addTodo">
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" /> <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button className="submit">Add</button> <button className="submit">Add</button>

4
step1-07/demo/src/style.css
View File

@@ -8,6 +8,10 @@ h1 {
text-align: center; text-align: center;
} }
small {
font-size: 0.5em;
}
.addTodo { .addTodo {
display: flex; display: flex;
} }

2
step1-07/exercise/src/components/TodoHeader.tsx
View File

@@ -11,7 +11,7 @@ export class TodoHeader extends React.Component<any, any> {
const { filter } = this.props; const { filter } = this.props;
return ( return (
<header> <header>
<h1>todos - step1-07 exercise</h1> <h1>todos <small>(1.7 exercise)</small></h1>
<div className="addTodo"> <div className="addTodo">
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" /> <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button className="submit">Add</button> <button className="submit">Add</button>

4
step1-07/exercise/src/style.css
View File

@@ -8,6 +8,10 @@ h1 {
text-align: center; text-align: center;
} }
small {
font-size: 0.5em;
}
.addTodo { .addTodo {
display: flex; display: flex;
} }

2
step1-07/final/src/components/TodoHeader.tsx
View File

@@ -21,7 +21,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
const { filter, setFilter } = this.props; const { filter, setFilter } = this.props;
return ( return (
<header> <header>
<h1>todos - step1-07 final</h1> <h1>todos <small>(1.7 final)</small></h1>
<div className="addTodo"> <div className="addTodo">
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" /> <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
<button onClick={this._onAdd} className="submit"> <button onClick={this._onAdd} className="submit">

4
step1-07/final/src/style.css
View File

@@ -8,6 +8,10 @@ h1 {
text-align: center; text-align: center;
} }
small {
font-size: 0.5em;
}
.addTodo { .addTodo {
display: flex; display: flex;
} }

2
step2-02/demo/src/components/TodoHeader.tsx
View File

@@ -22,7 +22,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
return ( return (
<Stack> <Stack>
<Stack horizontal horizontalAlign="center"> <Stack horizontal horizontalAlign="center">
<Text variant="xxLarge">todos - step2-02 demo</Text> <Text variant="xxLarge">todos <Text variant="mediumPlus">(2.2 demo)</Text></Text>
</Stack> </Stack>
<Stack horizontal> <Stack horizontal>

2
step2-02/exercise/src/components/TodoHeader.tsx
View File

@@ -22,7 +22,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
return ( return (
<Stack> <Stack>
<Stack horizontal horizontalAlign="center"> <Stack horizontal horizontalAlign="center">
<Text variant="xxLarge">todos - step2-02 demo</Text> <Text variant="xxLarge">todos <Text variant="mediumPlus">(2.2 exercise)</Text></Text>
</Stack> </Stack>
<Stack horizontal> <Stack horizontal>

2
step2-03/demo/src/components/TodoHeader.tsx
View File

@@ -22,7 +22,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
return ( return (
<Stack gap={10}> <Stack gap={10}>
<Stack horizontal horizontalAlign="center"> <Stack horizontal horizontalAlign="center">
<Text variant="xxLarge">todos</Text> <Text variant="xxLarge">todos <Text variant="mediumPlus">(2.3 demo)</Text></Text>
</Stack> </Stack>
<Stack horizontal gap={10}> <Stack horizontal gap={10}>

2
step2-03/exercise/src/components/TodoHeader.tsx
View File

@@ -22,7 +22,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
return ( return (
<Stack gap={10}> <Stack gap={10}>
<Stack horizontal horizontalAlign="center"> <Stack horizontal horizontalAlign="center">
<Text variant="xxLarge">todos - step2-03 exercise</Text> <Text variant="xxLarge">todos <Text variant="mediumPlus">(2.3 exercise)</Text></Text>
</Stack> </Stack>
<Stack horizontal gap={10}> <Stack horizontal gap={10}>

2
step2-04/demo/src/components/TodoHeader.tsx
View File

@@ -17,7 +17,7 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
return ( return (
<Stack gap={10}> <Stack gap={10}>
<Stack horizontal horizontalAlign="center"> <Stack horizontal horizontalAlign="center">
<Text variant="xxLarge">todos</Text> <Text variant="xxLarge">todos <Text variant="mediumPlus">(2.4 demo)</Text></Text>
</Stack> </Stack>
<Stack horizontal gap={10}> <Stack horizontal gap={10}>

2
step2-04/exercise/src/components/TodoHeader.tsx
View File

@@ -17,7 +17,7 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
return ( return (
<Stack gap={10}> <Stack gap={10}>
<Stack horizontal horizontalAlign="center"> <Stack horizontal horizontalAlign="center">
<Text variant="xxLarge">todos</Text> <Text variant="xxLarge">todos <Text variant="mediumPlus">(2.4 exercise)</Text></Text>
</Stack> </Stack>
<Stack horizontal gap={10}> <Stack horizontal gap={10}>

2
step2-06/demo/src/components/TodoHeader.tsx
View File

@@ -23,7 +23,7 @@ class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
return ( return (
<Stack gap={10}> <Stack gap={10}>
<Stack horizontal horizontalAlign="center"> <Stack horizontal horizontalAlign="center">
<Text variant="xxLarge">todos</Text> <Text variant="xxLarge">todos <Text variant="mediumPlus">(2.6 demo)</Text></Text>
</Stack> </Stack>
<Stack horizontal gap={10}> <Stack horizontal gap={10}>

2
step2-06/exercise/src/components/TodoHeader.tsx
View File

@@ -25,7 +25,7 @@ class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
return ( return (
<Stack gap={10}> <Stack gap={10}>
<Stack horizontal horizontalAlign="center"> <Stack horizontal horizontalAlign="center">
<Text variant="xxLarge">todos</Text> <Text variant="xxLarge">todos <Text variant="mediumPlus">(2.6 exercise)</Text></Text>
</Stack> </Stack>
<Stack horizontal gap={10}> <Stack horizontal gap={10}>