diff --git a/src/App.js b/src/App.js index e358583..1ae0b54 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,22 @@ import React from 'react'; import logo from './logo.svg'; import './App.css'; +import TodoList from './containers/TodoList/TodoList'; // can omit .js +import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'; function App() { return ( -
-
+ +
+ + } /> + + + +

Not Found

} /> +
+
+
); } diff --git a/src/components/Todo/Todo.css b/src/components/Todo/Todo.css new file mode 100644 index 0000000..41754d1 --- /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..22026f3 --- /dev/null +++ b/src/components/Todo/Todo.js @@ -0,0 +1,14 @@ +import React from 'react'; +import "./Todo.css"; + +const Todo = props => { + return ( +
+
+ {props.title} +
+ {props.done &&
} +
+ ); +} +export default Todo; \ No newline at end of file diff --git a/src/components/TodoDetail/TodoDetail.css b/src/components/TodoDetail/TodoDetail.css new file mode 100644 index 0000000..2722d72 --- /dev/null +++ b/src/components/TodoDetail/TodoDetail.css @@ -0,0 +1,15 @@ +.TodoDetail .row { + display: flex; + padding: 20px; + height: 30px; + text-align: left; + } + + .TodoDetail .left { + font-weight: bold; + flex: 25% + } + + .TodoDetail .right { + flex: 75%; + } \ No newline at end of file diff --git a/src/components/TodoDetail/TodoDetail.js b/src/components/TodoDetail/TodoDetail.js new file mode 100644 index 0000000..86ff6c9 --- /dev/null +++ b/src/components/TodoDetail/TodoDetail.js @@ -0,0 +1,25 @@ +import React from 'react'; +import './TodoDetail.css'; + +const TodoDetail = (props) => { + return (
+
+
+ Name: +
+
+ {props.title} +
+
+
+
+ Content: +
+
+ {props.content} +
+
+
+ ); +}; +export default TodoDetail; \ No newline at end of file diff --git a/src/containers/TodoList/NewTodo/NewTodo.css b/src/containers/TodoList/NewTodo/NewTodo.css new file mode 100644 index 0000000..ba6acd5 --- /dev/null +++ b/src/containers/TodoList/NewTodo/NewTodo.css @@ -0,0 +1,41 @@ +.NewTodo { + width: 80%; + margin: 20px auto; + border: 1px solid #eee; + box-shadow: 0 2px 3px #ccc; + text-align: center; + } + + .NewTodo label { + display: block; + margin: 10px auto; + text-align: center; + font-weight: bold; + } + + .NewTodo input, + .NewTodo textarea { + display: block; + width: 80%; + box-sizing: border-box; + border: 1px solid black; + outline: none; + font: inherit; + margin: auto; + } + + .NewTodo button { + margin: 5px 0; + padding: 10px; + font: inherit; + border: 1px solid #fa923f; + background-color: transparent; + color: #fa923f; + cursor: pointer; + } + + .NewTodo button:hover, + .NewTodo button:active { + color: white; + background-color: #fa923f; + } \ No newline at end of file diff --git a/src/containers/TodoList/NewTodo/NewTodo.js b/src/containers/TodoList/NewTodo/NewTodo.js new file mode 100644 index 0000000..932c4b5 --- /dev/null +++ b/src/containers/TodoList/NewTodo/NewTodo.js @@ -0,0 +1,36 @@ +import React, { Component } from 'react'; +import '../NewTodo.css'; +import { Redirect } from 'react-router-dom'; + +class NewTodo extends Component { + state = { + title: '', + content: '', + submitted: false, + } + render() { + if (this.state.submitted) { + return + } + return ( +
+

Add a Todo

+ + this.setState({ title: event.target.value })} /> + +