update

src/App.css

@@ -1,38 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+Body {
+  background-color: gray!important;
+}

src/App.js

@@ -1,25 +1,57 @@
-import React from 'react';
-import './App.css';
-import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+import React from "react";
+import "./App.css";
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css";
 
-import CreateTodo from './components/create-todo.component';
-import EditTodo from './components/edit-todo.component';
-import TodosList from './components/todos-list.component';
+import CreateTodo from "./components/create-todo.component";
+import EditTodo from "./components/edit-todo.component";
+import TodosList from "./components/todos-list.component";
 
+import logo from "./logo.jpg";
 
 function App() {
   return (
     <Router>
       <div className="container">
-        <h2>MERN-Stack Todo App</h2>
+        <nav className="navdar navbar-expand-lg navbar-light bg-light">
+          <a
+            className="navbar-brand"
+            href="https://codingthesmartway.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src={logo}
+              width="30"
+              height="30"
+              alt="CodingTheSmartWay.com"
+            />
+          </a>
+          <Link to="/" className="navbar-brand">
+            MERN-Stack Todo App
+          </Link>
+          <div className="collapse navbar-collapse">
+            <ul className="navbar-nav mr-auto">
+              <li className="navbar-item">
+                <Link to="/" className="nav-link">
+                  Todos
+                </Link>
+              </li>
+              <li className="navbar-item">
+                <Link to="/create" className="nav-link">
+                  Create Todo
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </nav>
+        <br />
+        <Route path="/" exact component={TodosList} />
+        <Route path="/edit/:id" component={EditTodo} />
+        <Route path="/create" component={CreateTodo} />
       </div>
-      <Route path="/" exact component={TodosList} />
-      <Route path="/edit/:id" component={EditTodo} />
-      <Route path="/create" component={CreateTodo} />
     </Router>
-
   );
 }
 

src/components/todos-list.component.js

@@ -1,11 +1,123 @@
-import React from 'react'
+import React from "react";
 
 export default class TodosList extends React.Component {
-    render() {
-        return (
-            <div>
-                <p>Welcome to Todos List Component!!</p>
-            </div>
-        )
-    }
-}
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      todo_description: "",
+      todo_responsible: "",
+      todo_priority: "",
+      todo_completed: false
+    };
+
+    this.onChangeTodoDescription = this.onChangeTodoDescription.bind(this);
+    this.onChangeTodoResponsible = this.onChangeTodoResponsible.bind(this);
+    this.onChangeTodoPriority = this.onChangeTodoPriority.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  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>
+        <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>
+            <div className="form-group">
+              <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>
+            <div className="form-group">
+              <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>
+      </div>
+    );
+  }
+}