Step numbers in todo app headers

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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>
);
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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