Fix plural in footer with 0 items

playground/src/components/TodoFooter.tsx

@@ -30,7 +30,7 @@ export const TodoFooter = connect(
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
       <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>

step1-07/demo/src/components/TodoFooter.tsx

@@ -6,7 +6,7 @@ export const TodoFooter = (props: any) => {
   return (
     <footer>
       <span>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </span>
       <button className="submit">Clear Completed</button>
     </footer>

step1-07/exercise/src/components/TodoFooter.tsx

@@ -6,7 +6,7 @@ export const TodoFooter = props => {
   return (
     <footer>
       <span>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </span>
       <button className="submit">Clear Completed</button>
     </footer>

step1-07/final/src/components/TodoFooter.tsx

@@ -14,7 +14,7 @@ export const TodoFooter = (props: TodoFooterProps) => {
   return (
     <footer>
       <span>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </span>
       <button onClick={_onClick} className="submit">
         Clear Completed

step2-02/demo/src/components/TodoFooter.tsx

@@ -13,7 +13,7 @@ export const TodoFooter = (props: TodoFooterProps) => {
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
       <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>

step2-02/exercise/src/components/TodoFooter.tsx

@@ -6,7 +6,7 @@ export const TodoFooter = (props: any) => {
   return (
     <footer>
       <span>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount <= 1 ? '' : 's'} left
       </span>
       <button onClick={() => props.clear()} className="button">
         Clear Completed

step2-03/demo/src/components/TodoFooter.tsx

@@ -13,7 +13,7 @@ export const TodoFooter = (props: TodoFooterProps) => {
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
       <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>

step2-03/demo/src/components/TodoHeader.tsx

@@ -34,7 +34,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
               styles={props => ({
                 ...(props.focused && {
                   field: {
-                    backgroundColor: 'black'
+                    backgroundColor: '#c7e0f4'
                   }
                 })
               })}

step2-03/exercise/src/components/TodoFooter.tsx

@@ -16,7 +16,7 @@ export const TodoFooter = (props: TodoFooterProps) => {
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
       <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>

step2-07/demo/src/components/TodoFooter.tsx

@@ -15,7 +15,7 @@ const TodoFooter = (props: TodoFooterProps) => {
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
       <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>

step2-07/exercise/src/components/TodoFooter.tsx

@@ -16,7 +16,7 @@ export const TodoFooter = (props: TodoFooterProps) => {
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
       <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>

step2-08/demo/src/components/TodoFooter.tsx

@@ -15,7 +15,7 @@ const TodoFooter = (props: TodoFooterProps) => {
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
       <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>

step2-08/exercise/src/components/TodoFooter.tsx

@@ -15,7 +15,7 @@ const TodoFooter = (props: TodoFooterProps) => {
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
       <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>

step2-09/demo/src/components/TodoFooter.tsx

@@ -15,7 +15,7 @@ const TodoFooter = (props: TodoFooterProps) => {
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
       <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>

step2-09/exercise/src/components/TodoFooter.tsx

@@ -15,7 +15,7 @@ const TodoFooter = (props: TodoFooterProps) => {
   return (
     <Stack horizontal horizontalAlign="space-between">
       <Text>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
       </Text>
       <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
     </Stack>