From 5d5d9c3ab1dc308998c2bef70c6a367458ddd4c5 Mon Sep 17 00:00:00 2001
From: Joni Laukka <joni.laukka.overflow@gmail.com>
Date: Mon, 24 Jun 2019 10:02:49 +0300
Subject: [PATCH] new task form added

---
 src/App.css                |  9 +++++++++
 src/components/TaskItem.js | 21 ++++++++++++---------
 src/components/TaskList.js | 25 +++++++++++++++----------
 3 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/App.css b/src/App.css
index f791179..c2bd292 100644
--- a/src/App.css
+++ b/src/App.css
@@ -145,3 +145,12 @@ div.login button:hover {
   z-index: 2020;
   background-color: #ffffff80;
 }
+
+.tasklist-item {
+  margin: 20px;
+}
+
+.task-form{
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/components/TaskItem.js b/src/components/TaskItem.js
index 7e1c968..b2a318b 100644
--- a/src/components/TaskItem.js
+++ b/src/components/TaskItem.js
@@ -1,15 +1,18 @@
 import React from 'react';
 
 class TaskItem extends React.Component{
-    render(){
-        return(
-            <p>
-                <label>Name: {this.props.text}</label>
-                <br />
-                <label>Description: {this.props.description}</label>
-            </p>
-        );
-    }
+  render(){
+    return(
+      <div className='tasklist-item'>
+        <div>
+          <label>{this.props.text}</label>
+        </div>
+        <div>
+          <label>{this.props.description}</label>
+        </div>
+      </div>
+    );
+  }
 }
 
 export default TaskItem;
\ No newline at end of file
diff --git a/src/components/TaskList.js b/src/components/TaskList.js
index d67b16c..3410a15 100644
--- a/src/components/TaskList.js
+++ b/src/components/TaskList.js
@@ -3,16 +3,21 @@ import React from 'react';
 import TaskItem from './TaskItem';
 
 class TaskList extends React.Component{
-    render(){
-        return ReactDOM.createPortal(
-            <div className='tasklist'>
-                <TaskItem text='asd' description='asudhaiud'/>
-                <TaskItem text='asd2' description='q7213761923769821'/>
-                <TaskItem text='asd3' description='tehtävä3'/>
-            </div>,
-            document.getElementById('tasklist')
-        );
-    }
+  render(){
+    return ReactDOM.createPortal(
+      <div className='tasklist'>
+      <div className='task-form'>
+        <input type='text' placeholder='Task name'></input>
+        <textarea placeholder='Task description'></textarea>
+        <button>Add new task</button>
+      </div>
+      <TaskItem text='asd' description='asudhaiud'/>
+      <TaskItem text='asd2' description='q7213761923769821'/>
+      <TaskItem text='asd3' description='tehtävä3'/>
+      </div>,
+      document.getElementById('tasklist')
+    );
+  }
 }
 
 export default TaskList;
\ No newline at end of file
-- 
GitLab