diff --git a/package.json b/package.json
index 6c050f8..ae2822d 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,13 @@
{
"name": "swppfront",
+ "homepage": ".",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
+ "react-router": "^5.2.0",
+ "react-router-dom": "^5.2.0",
"react-scripts": "3.1.1"
},
"scripts": {
diff --git a/src/App.js b/src/App.js
index e358583..4b17082 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,15 @@
import React from 'react';
-import logo from './logo.svg';
+import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
+// import logo from './logo.svg';
import './App.css';
function App() {
return (
-
-
+
+
+ } />
+
+
);
}
diff --git a/src/components/Todo/Todo.css b/src/components/Todo/Todo.css
new file mode 100644
index 0000000..f2105b8
--- /dev/null
+++ b/src/components/Todo/Todo.css
@@ -0,0 +1,31 @@
+.Todo {
+ border-top: 1px solid #f1f3f5;
+ padding: 1rem;
+ display: flex;
+ align-items: center;
+ transition: all 0.15s;
+}
+
+.Todo .text {
+ flex: 1;
+ text-align: left;
+ word-break: break-all;
+ cursor: pointer;
+}
+
+.Todo .text:hover {
+ color: orange;
+}
+
+.Todo .done {
+ text-decoration: line-through;
+ color: #adb5bd;
+}
+
+.Todo .done-mark {
+ font-size: 1.5rem;
+ line-height: 1rem;
+ margin-left: 1rem;
+ color: orange;
+ font-weight: 800;
+}
\ No newline at end of file
diff --git a/src/components/Todo/Todo.js b/src/components/Todo/Todo.js
new file mode 100644
index 0000000..7f05202
--- /dev/null
+++ b/src/components/Todo/Todo.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import './Todo.css';
+const Todo = props => {
+ return (
+
+
+ {props.title}
+
+ {props.done &&
✓
}
+
+
+
Name:
+
{props.title}
+
+
+
Content:
+
{props.content}
+
+
+
Add a Todo
+
+ this.setState({ title: event.target.value })} />
+
+