diff --git a/public/index.html b/public/index.html
index dd1ccfd4cd30a29aaa08b295d99be29cdeb29cf9..8fad1fb04ddd1f9690492d11f6c7d95e200345bb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,6 +23,7 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
+ <div id="tasklist"></div>
<div id="root"></div>
<!--
This HTML file is a template.
diff --git a/src/App.css b/src/App.css
index b0f08dddfc38b5c27752c025dbfe8113491b93d2..f7911795f61d3f1a6c0d56c5416bc568f0a61eea 100644
--- a/src/App.css
+++ b/src/App.css
@@ -138,3 +138,10 @@ div.login button:hover {
background-color: darkblue;
cursor: pointer;
}
+
+.tasklist{
+ position: absolute;
+ margin-top: 50px;
+ z-index: 2020;
+ background-color: #ffffff80;
+}
diff --git a/src/components/Header.js b/src/components/Header.js
index 70799067bb53691f50038a5c987469665f162b8b..3cb15b02638c2cdddfa9d4481d714d8cfeaa3614 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -2,6 +2,7 @@ import React from 'react';
import LoginForm from './LoginForm';
import RegisterForm from './RegisterForm';
+import TaskListButton from './TaskListButton';
class Header extends React.Component {
state = {
@@ -78,6 +79,7 @@ class Header extends React.Component {
)}
{this.state.username && <button>{this.state.username}</button>}
<button onClick={this.props.handleLayerChange}>change layer</button>
+ <TaskListButton />
</div>
{this.state.register && (
<RegisterForm
diff --git a/src/components/TaskItem.js b/src/components/TaskItem.js
new file mode 100644
index 0000000000000000000000000000000000000000..7e1c96869686b02aff655e085a57e256e7d2f1d7
--- /dev/null
+++ b/src/components/TaskItem.js
@@ -0,0 +1,15 @@
+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>
+ );
+ }
+}
+
+export default TaskItem;
\ No newline at end of file
diff --git a/src/components/TaskList.js b/src/components/TaskList.js
new file mode 100644
index 0000000000000000000000000000000000000000..d67b16cd2ab5c7acfec223977243a675fb57b363
--- /dev/null
+++ b/src/components/TaskList.js
@@ -0,0 +1,18 @@
+import ReactDOM from 'react-dom';
+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')
+ );
+ }
+}
+
+export default TaskList;
\ No newline at end of file
diff --git a/src/components/TaskListButton.js b/src/components/TaskListButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..4ed49c5072e40b13c67149da1daf6dc1397ed82c
--- /dev/null
+++ b/src/components/TaskListButton.js
@@ -0,0 +1,30 @@
+import React, { Fragment } from 'react';
+import TaskList from './TaskList';
+
+class TaskListButton extends React.Component{
+ constructor(props){
+ super(props);
+ this.state = {
+ open: false
+ }
+
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ handleClick = (e) => {
+ this.setState({
+ open: !this.state.open
+ });
+ }
+
+ render(){
+ return(
+ <Fragment>
+ <button onClick={this.handleClick}>Tasks</button>
+ {this.state.open && <TaskList />}
+ </Fragment>
+ );
+ }
+}
+
+export default TaskListButton;
\ No newline at end of file