Altering the submit button

src/App.css

@@ -19,14 +19,21 @@ a {
 }
 
 .btn {
-  display: inline-block;
+  display: block;
   border: none;
-  background: #555;
-  color: #fff;
   padding: 7px 20px;
-  cursor: pointer;
+  color: #ffffff;
 }
 
-.btn:hover {
-  background: #666;
+.btn:disabled {
+  background: #bbbbbb;
 }
+
+.btn:enabled {
+  background: #555555;
+  cursor: pointer;
+}
+
+.btn:enabled:hover {
+  background: #666666;
+}

src/App.js

@@ -4,64 +4,84 @@ import Header from './components/layout/Header';
 import Todos from './components/Todos';
 import AddTodo from './components/AddTodo';
 import About from './components/pages/About';
-// import uuid from 'uuid';
+import uuid from 'uuid';
 import axios from 'axios';
 
 import './App.css';
 
 class App extends Component {
-  state = {
-    todos: []
-  }
+	state = {
+		todos: []
+	};
 
-  componentDidMount() {
-    axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
-      .then(res => this.setState({ todos: res.data }))
-  }
+	componentDidMount() {
+		axios
+			.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
+			.then((res) => this.setState({ todos: res.data }));
+	}
 
-  // Toggle Complete
-  markComplete = (id) => {
-    this.setState({ todos: this.state.todos.map(todo => {
-      if(todo.id === id) {
-        todo.completed = !todo.completed
-      }
-      return todo;
-    }) });
-  }
+	// Toggle Complete
+	markComplete = (id) => {
+		this.setState({
+			todos: this.state.todos.map((todo) => {
+				if (todo.id === id) {
+					todo.completed = !todo.completed;
+				}
+				return todo;
+			})
+		});
+	};
 
-  // Delete Todo
-  delTodo = (id) => {
-    axios.delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
-      .then(res => this.setState({ todos: [...this.state.todos.filter(todo => todo.id !== id)] }));
-  }
+	// Delete Todo
+	delTodo = (id) => {
+		axios
+			.delete(`https://jsonplaceholder.typicode.com/todos/${id}`)
+			.then((res) =>
+				this.setState({
+					todos: [...this.state.todos.filter((todo) => todo.id !== id)]
+				})
+			);
+	};
 
-  // Add Todo
-  addTodo = (title) => {
-    axios.post('https://jsonplaceholder.typicode.com/todos', {
-      title,
-      completed: false
-    })
-      .then(res => this.setState({ todos: [...this.state.todos, res.data] }));
-  }
+	// Add Todo
+	addTodo = (title) => {
+		axios
+			.post('https://jsonplaceholder.typicode.com/todos', {
+				title,
+				completed: false
+			})
+			.then((res) => {
+				res.data.id = uuid.v4();
+				this.setState({ todos: [...this.state.todos, res.data] });
+			});
+	};
 
-  render() {
-    return (
-      <Router>
-        <div className="App">
-          <div className="container">
-            <Header />
-            <Route exact path="/" render={props => (
-              <React.Fragment>
-                <AddTodo addTodo={this.addTodo} />
-                <Todos todos={this.state.todos} markComplete={this.markComplete} delTodo={this.delTodo} />
-              </React.Fragment>
-            )} />
-            <Route path="/about" component={About} />
-          </div>  
-        </div>
-      </Router>
-    );
-  }
+	render() {
+		return (
+			<Router>
+				<div className='App'>
+					<div className='container'>
+						<Header />
+						<Route
+							exact
+							path='/'
+							render={(props) => (
+								<React.Fragment>
+									<AddTodo addTodo={this.addTodo} />
+									<Todos
+										todos={this.state.todos}
+										markComplete={this.markComplete}
+										delTodo={this.delTodo}
+									/>
+								</React.Fragment>
+							)}
+						/>
+						<Route path='/about' component={About} />
+					</div>
+				</div>
+			</Router>
+		);
+	}
 }
 
 export default App;

src/components/AddTodo.js

@@ -2,43 +2,49 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 export class AddTodo extends Component {
-  state = {
-    title: ''
-  }
+	state = {
+		title: '',
+		disabled: true
+	};
 
-  onSubmit = (e) => {
-    e.preventDefault();
-    this.props.addTodo(this.state.title);
-    this.setState({ title: '' });
-  }
+	onSubmit = (e) => {
+		e.preventDefault();
+		this.props.addTodo(this.state.title);
+		this.setState({ title: '', disabled: true });
+	};
 
-  onChange = (e) => this.setState({ [e.target.name]: e.target.value });
+	onChange = (e) =>
+		this.setState({
+			[e.target.name]: e.target.value,
+			disabled: e.target.value.length > 0 ? false : true
+		});
 
-  render() {
-    return (
-      <form onSubmit={this.onSubmit} style={{ display: 'flex' }}>
-        <input 
-          type="text" 
-          name="title" 
-          style={{ flex: '10', padding: '5px' }}
-          placeholder="Add Todo ..." 
-          value={this.state.title}
-          onChange={this.onChange}
-        />
-        <input 
-          type="submit" 
-          value="Submit" 
-          className="btn"
-          style={{flex: '1'}}
-        />
-      </form>
-    )
-  }
+	render() {
+		return (
+			<form onSubmit={this.onSubmit} style={{ display: 'flex' }}>
+				<input
+					type='text'
+					name='title'
+					style={{ flex: '10', padding: '5px' }}
+					placeholder='Add Todo ...'
+					value={this.state.title}
+					onChange={this.onChange}
+				/>
+				<input
+					type='submit'
+					value='Submit'
+					className='btn'
+					style={{ flex: '1' }}
+					disabled={this.state.disabled}
+				/>
+			</form>
+		);
+	}
 }
 
 // PropTypes
 AddTodo.propTypes = {
-  addTodo: PropTypes.func.isRequired
-}
+	addTodo: PropTypes.func.isRequired
+};
 
-export default AddTodo
+export default AddTodo;

src/components/TodoItem.js

@@ -2,44 +2,50 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 export class TodoItem extends Component {
-  getStyle = () => {
-    return {
-      background: '#f4f4f4',
-      padding: '10px',
-      borderBottom: '1px #ccc dotted',
-      textDecoration: this.props.todo.completed ? 'line-through' : 'none'
-    }
-  }
+	getStyle = () => {
+		return {
+			background: '#f4f4f4',
+			padding: '10px',
+			borderBottom: '1px #ccc dotted',
+			textDecoration: this.props.todo.completed ? 'line-through' : 'none'
+		};
+	};
 
-  render() {
-    const { id, title } = this.props.todo;
-    return (
-      <div style={this.getStyle()}>
-        <p>
-          <input type="checkbox" onChange={this.props.markComplete.bind(this, id)} /> {' '}
-          { title }
-          <button onClick={this.props.delTodo.bind(this, id)} style={btnStyle}>x</button>
-        </p>
-      </div>
-    )
-  }
+	render() {
+		const { id, title, completed } = this.props.todo;
+		return (
+			<div style={this.getStyle()}>
+				<p>
+					<input
+						type='checkbox'
+						checked={completed}
+						onChange={this.props.markComplete.bind(this, id)}
+					/>{' '}
+					{title}
+					<button onClick={this.props.delTodo.bind(this, id)} style={btnStyle}>
+						x
+					</button>
+				</p>
+			</div>
+		);
+	}
 }
 
 // PropTypes
 TodoItem.propTypes = {
-  todo: PropTypes.object.isRequired,
-  markComplete: PropTypes.func.isRequired,
-  delTodo: PropTypes.func.isRequired,
-}
+	todo: PropTypes.object.isRequired,
+	markComplete: PropTypes.func.isRequired,
+	delTodo: PropTypes.func.isRequired
+};
 
 const btnStyle = {
-  background: '#ff0000',
-  color: '#fff',
-  border: 'none',
-  padding: '5px 9px',
-  borderRadius: '50%',
-  cursor: 'pointer',
-  float: 'right'
-}
+	background: '#ff0000',
+	color: '#fff',
+	border: 'none',
+	padding: '5px 9px',
+	borderRadius: '50%',
+	cursor: 'pointer',
+	float: 'right'
+};
 
-export default TodoItem
+export default TodoItem;