Step numbers in todo app headers

ecraig12345 · ecraig12345 · commit bdb17109a143 · 2019-03-05T02:58:04.000-08:00
diff --git a/step1-05/TodoApp.html b/step1-05/TodoApp.html
@@ -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>
diff --git a/step1-05/exercise/src/components/TodoHeader.tsx b/step1-05/exercise/src/components/TodoHeader.tsx
@@ -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>
diff --git a/step1-05/exercise/src/style.css b/step1-05/exercise/src/style.css
@@ -8,6 +8,10 @@ h1 {
   text-align: center;
 }
 
+small {
+  font-size: 0.5em;
+}
+
 .addTodo {
   display: flex;
 }
diff --git a/step1-06/demo/src/components/TodoHeader.tsx b/step1-06/demo/src/components/TodoHeader.tsx
@@ -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>
diff --git a/step1-06/demo/src/components/TodoList.tsx b/step1-06/demo/src/components/TodoList.tsx
@@ -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>
     );
   }
diff --git a/step1-06/demo/src/style.css b/step1-06/demo/src/style.css
@@ -8,6 +8,10 @@ h1 {
   text-align: center;
 }
 
+small {
+  font-size: 0.5em;
+}
+
 .addTodo {
   display: flex;
 }
diff --git a/step1-06/exercise/src/components/TodoHeader.tsx b/step1-06/exercise/src/components/TodoHeader.tsx
@@ -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>
diff --git a/step1-06/exercise/src/style.css b/step1-06/exercise/src/style.css
@@ -8,6 +8,10 @@ h1 {
   text-align: center;
 }
 
+small {
+  font-size: 0.5em;
+}
+
 .addTodo {
   display: flex;
 }
diff --git a/step1-07/demo/src/components/TodoHeader.tsx b/step1-07/demo/src/components/TodoHeader.tsx
@@ -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>
diff --git a/step1-07/demo/src/style.css b/step1-07/demo/src/style.css
@@ -8,6 +8,10 @@ h1 {
   text-align: center;
 }
 
+small {
+  font-size: 0.5em;
+}
+
 .addTodo {
   display: flex;
 }
diff --git a/step1-07/exercise/src/components/TodoHeader.tsx b/step1-07/exercise/src/components/TodoHeader.tsx
@@ -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>
diff --git a/step1-07/exercise/src/style.css b/step1-07/exercise/src/style.css
@@ -8,6 +8,10 @@ h1 {
   text-align: center;
 }
 
+small {
+  font-size: 0.5em;
+}
+
 .addTodo {
   display: flex;
 }
diff --git a/step1-07/final/src/components/TodoHeader.tsx b/step1-07/final/src/components/TodoHeader.tsx
@@ -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">
diff --git a/step1-07/final/src/style.css b/step1-07/final/src/style.css
@@ -8,6 +8,10 @@ h1 {
   text-align: center;
 }
 
+small {
+  font-size: 0.5em;
+}
+
 .addTodo {
   display: flex;
 }
diff --git a/step2-02/demo/src/components/TodoHeader.tsx b/step2-02/demo/src/components/TodoHeader.tsx
@@ -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>
diff --git a/step2-02/exercise/src/components/TodoHeader.tsx b/step2-02/exercise/src/components/TodoHeader.tsx
@@ -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>
diff --git a/step2-03/demo/src/components/TodoHeader.tsx b/step2-03/demo/src/components/TodoHeader.tsx
@@ -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}>
diff --git a/step2-03/exercise/src/components/TodoHeader.tsx b/step2-03/exercise/src/components/TodoHeader.tsx
@@ -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}>
diff --git a/step2-04/demo/src/components/TodoHeader.tsx b/step2-04/demo/src/components/TodoHeader.tsx
@@ -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}>
diff --git a/step2-04/exercise/src/components/TodoHeader.tsx b/step2-04/exercise/src/components/TodoHeader.tsx
@@ -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}>
diff --git a/step2-06/demo/src/components/TodoHeader.tsx b/step2-06/demo/src/components/TodoHeader.tsx
@@ -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}>
diff --git a/step2-06/exercise/src/components/TodoHeader.tsx b/step2-06/exercise/src/components/TodoHeader.tsx
@@ -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}>

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,10 @@ h1 {`
`8`	`8`	`text-align: center;`
`9`	`9`	`}`
`10`	`10`
	`11`	`+small {`
	`12`	`+ font-size: 0.5em;`
	`13`	`+}`
	`14`	`+`
`11`	`15`	`.addTodo {`
`12`	`16`	`display: flex;`
`13`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export class TodoList extends React.Component<any, any> {`
`12`	`12`
`13`	`13`	`return (`
`14`	`14`	`<ul className="todos">`
`15`		`- [01, 02, 03, 04].map((id)=> <TodoListItem />)`
	`15`	`+ {['01', '02', '03', '04'].map((id) => <TodoListItem />)}`
`16`	`16`	`</ul>`
`17`	`17`	`);`
`18`	`18`	`}`