new task form added

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;
+}

src/components/TaskItem.js

 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

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