update

src/App.css

@@ -1,3 +1,3 @@
 Body {
-  background-color: gray!important;
+  /* background-color: gray!important; */
 }

src/App.js

@@ -14,7 +14,7 @@ function App() {
   return (
     <Router>
       <div className="container">
-        <nav className="navdar navbar-expand-lg navbar-light bg-light">
+        <nav className="navbar navbar-expand-lg navbar-light bg-light">
           <a
             className="navbar-brand"
             href="https://codingthesmartway.com"

src/components/create-todo.component.js

@@ -1,10 +1,118 @@
 import React from 'react'
 
 export default class CreateTodo extends React.Component {
+    constructor(props) {
+        super(props)
+
+        this.onChangeTodoDescription = this.onChangeTodoDescription.bind(this);
+        this.onChangeTodoResponsible = this.onChangeTodoResponsible.bind(this);
+        this.onChangeTodoPriority = this.onChangeTodoPriority.bind(this);
+        this.onSubmit = this.onSubmit.bind(this);
+
+        this.state = {
+            todo_description: '',
+            todo_responsible: '',
+            todo_priority: '',
+            todo_completed: false
+        }
+    }
+
+    onChangeTodoDescription(event) {
+        this.setState({
+            todo_description: event.target.value
+        })
+    }
+
+    onChangeTodoResponsible(event) {
+        this.setState({
+            todo_responsible: event.target.value
+        })
+    }
+
+    onChangeTodoPriority(event) {
+        this.setState({
+            todo_priority: event.target.value
+        })
+    }
+
+    onSubmit(event) {
+        event.preventDefault();
+
+        console.log(`Form submitted:`)
+        console.log(`Todo Description: ${this.state.todo_description}`)
+        console.log(`Todo Responsible: ${this.state.todo_responsible}`)
+        console.log(`Todo Priority: ${this.state.todo_priority}`)
+
+        this.setState({
+            todo_description: '',
+            todo_responsible: '',
+            todo_priority: '',
+            todo_completed: false
+        })
+    }
+
     render() {
         return (
-            <div>
-                <p>Welcome to Create Todo Component!!</p>
+            <div style={{ marginTop: 10 }}>
+                <h3>Create New Todo</h3>
+                <form onSubmit={this.onSubmit}>
+                    <div className="form-group">
+                        <label>Description: </label>
+                        <input type="text"
+                            className="form-control"
+                            value={this.state.todo_description}
+                            onChange={this.onChangeTodoDescription}
+                        />
+                    </div>
+                    <div className="form-group">
+                        <label>Responsible: </label>
+                        <input
+                            type="text"
+                            className="form-control"
+                            value={this.state.todo_responsible}
+                            onChange={this.onChangeTodoResponsible}
+                        />
+                    </div>
+                    <div className="form-group">
+                        <div className="form-check form-check-inline">
+                            <input className="form-check-input"
+                                type="radio"
+                                name="priorityOptions"
+                                id="priorityLow"
+                                value="Low"
+                                checked={this.state.todo_priority === 'Low'}
+                                onChange={this.onChangeTodoPriority}
+                            />
+                            <label className="form-check-label">Low</label>
+                        </div>
+                        <div className="form-check form-check-inline">
+                            <input className="form-check-input"
+                                type="radio"
+                                name="priorityOptions"
+                                id="priorityMedium"
+                                value="Medium"
+                                checked={this.state.todo_priority === 'Medium'}
+                                onChange={this.onChangeTodoPriority}
+                            />
+                            <label className="form-check-label">Medium</label>
+                        </div>
+                        <div className="form-check form-check-inline">
+                            <input className="form-check-input"
+                                type="radio"
+                                name="priorityOptions"
+                                id="priorityHigh"
+                                value="High"
+                                checked={this.state.todo_priority === 'High'}
+                                onChange={this.onChangeTodoPriority}
+                            />
+                            <label className="form-check-label">High</label>
+                        </div>
+                    </div>
+
+                    <div className="form-group">
+                        <input type="submit" value="Create Todo" className="btn btn-primary" />
+                    </div>
+                </form>
             </div>
         )
     }