mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
Step numbers in todo app headers
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<body>
|
||||
<header>
|
||||
<h1>todos</h1>
|
||||
<h1>todos <small>(1.5)</small></h1>
|
||||
<div class="addTodo">
|
||||
<input class="textfield" placeholder="add todo" />
|
||||
<button class="submit">Add</button>
|
||||
|
||||
@@ -4,7 +4,7 @@ export class TodoHeader extends React.Component<any, any> {
|
||||
render() {
|
||||
return (
|
||||
<header>
|
||||
<h1>todos - step1-05 exercise</h1>
|
||||
<h1>todos <small>(1.5 exercise)</small></h1>
|
||||
<div className="addTodo">
|
||||
<input className="textfield" placeholder="add todo" />
|
||||
<button className="submit">Add</button>
|
||||
|
||||
@@ -8,6 +8,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.addTodo {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ export class TodoHeader extends React.Component<any, any> {
|
||||
const { filter } = this.props;
|
||||
return (
|
||||
<header>
|
||||
<h1>todos - step1-06 demo</h1>
|
||||
<h1>todos <small>(1.6 demo)</small></h1>
|
||||
<div className="addTodo">
|
||||
<input className="textfield" placeholder="add todo" />
|
||||
<button className="submit">Add</button>
|
||||
|
||||
@@ -12,7 +12,7 @@ export class TodoList extends React.Component<any, any> {
|
||||
|
||||
return (
|
||||
<ul className="todos">
|
||||
[01, 02, 03, 04].map((id)=> <TodoListItem />)
|
||||
{['01', '02', '03', '04'].map((id) => <TodoListItem />)}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,6 +8,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.addTodo {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ export class TodoHeader extends React.Component<any, any> {
|
||||
|
||||
return (
|
||||
<header>
|
||||
<h1>todos - step1-06 exercise</h1>
|
||||
<h1>todos <small>(1.6 exercise)</small></h1>
|
||||
<div className="addTodo">
|
||||
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
|
||||
<button className="submit">Add</button>
|
||||
|
||||
@@ -8,6 +8,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.addTodo {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ export class TodoHeader extends React.Component<any, any> {
|
||||
const { filter } = this.props;
|
||||
return (
|
||||
<header>
|
||||
<h1>todos - step1-07 demo</h1>
|
||||
<h1>todos <small>(1.7 demo)</small></h1>
|
||||
<div className="addTodo">
|
||||
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
|
||||
<button className="submit">Add</button>
|
||||
|
||||
@@ -8,6 +8,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.addTodo {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ export class TodoHeader extends React.Component<any, any> {
|
||||
const { filter } = this.props;
|
||||
return (
|
||||
<header>
|
||||
<h1>todos - step1-07 exercise</h1>
|
||||
<h1>todos <small>(1.7 exercise)</small></h1>
|
||||
<div className="addTodo">
|
||||
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
|
||||
<button className="submit">Add</button>
|
||||
|
||||
@@ -8,6 +8,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.addTodo {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
|
||||
const { filter, setFilter } = this.props;
|
||||
return (
|
||||
<header>
|
||||
<h1>todos - step1-07 final</h1>
|
||||
<h1>todos <small>(1.7 final)</small></h1>
|
||||
<div className="addTodo">
|
||||
<input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
|
||||
<button onClick={this._onAdd} className="submit">
|
||||
|
||||
@@ -8,6 +8,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.addTodo {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
|
||||
return (
|
||||
<Stack>
|
||||
<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 horizontal>
|
||||
|
||||
@@ -22,7 +22,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
|
||||
return (
|
||||
<Stack>
|
||||
<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 horizontal>
|
||||
|
||||
@@ -22,7 +22,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
|
||||
return (
|
||||
<Stack gap={10}>
|
||||
<Stack horizontal horizontalAlign="center">
|
||||
<Text variant="xxLarge">todos</Text>
|
||||
<Text variant="xxLarge">todos <Text variant="mediumPlus">(2.3 demo)</Text></Text>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal gap={10}>
|
||||
|
||||
@@ -22,7 +22,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
|
||||
return (
|
||||
<Stack gap={10}>
|
||||
<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 horizontal gap={10}>
|
||||
|
||||
@@ -17,7 +17,7 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
|
||||
return (
|
||||
<Stack gap={10}>
|
||||
<Stack horizontal horizontalAlign="center">
|
||||
<Text variant="xxLarge">todos</Text>
|
||||
<Text variant="xxLarge">todos <Text variant="mediumPlus">(2.4 demo)</Text></Text>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal gap={10}>
|
||||
|
||||
@@ -17,7 +17,7 @@ export class TodoHeader extends React.Component<{}, TodoHeaderState> {
|
||||
return (
|
||||
<Stack gap={10}>
|
||||
<Stack horizontal horizontalAlign="center">
|
||||
<Text variant="xxLarge">todos</Text>
|
||||
<Text variant="xxLarge">todos <Text variant="mediumPlus">(2.4 exercise)</Text></Text>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal gap={10}>
|
||||
|
||||
@@ -23,7 +23,7 @@ class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
|
||||
return (
|
||||
<Stack gap={10}>
|
||||
<Stack horizontal horizontalAlign="center">
|
||||
<Text variant="xxLarge">todos</Text>
|
||||
<Text variant="xxLarge">todos <Text variant="mediumPlus">(2.6 demo)</Text></Text>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal gap={10}>
|
||||
|
||||
@@ -25,7 +25,7 @@ class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
|
||||
return (
|
||||
<Stack gap={10}>
|
||||
<Stack horizontal horizontalAlign="center">
|
||||
<Text variant="xxLarge">todos</Text>
|
||||
<Text variant="xxLarge">todos <Text variant="mediumPlus">(2.6 exercise)</Text></Text>
|
||||
</Stack>
|
||||
|
||||
<Stack horizontal gap={10}>
|
||||
|
||||
Reference in New Issue
Block a user