<!DOCTYPE html>
<html>
 <head>
   <title>Lista zadań</title>
 </head>
 <body>
   <div id="container">
   </div>
 </body>
</html>
---

body {
  padding: 50px;
  background-color: #66CCFF;
  font-family: sans-serif;
}
#container {
  display: flex;
  justify-content: center;
}
---


import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

var destination = document.querySelector("#container");

ReactDOM.render(
  <div>
    <p>Cześć!</p>
  </div>,
  destination
);
---

import React, { Component } from "react";

class TodoList extends Component {
  render() {
    return (
      <div className="todoListMain">
        <div className="header">
          <form>
            <input placeholder="Wpisz zadanie">
            </input>
            <button type="submit">Dodaj</button>
          </form>
        </div>
      </div>
    );
  }
}

export default TodoList;
---

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import TodoList from "./TodoList";

var destination = document.querySelector("#container");

ReactDOM.render(
  <div>
    <TodoList/>
  </div>,
  destination
);
---

          <form onSubmit={this.addItem}>
---

  constructor(props) {
    super(props);
    this.addItem = this.addItem.bind(this);
  }

  addItem(e) {
  }
---

  this.state = {
    items: []
  };
---

          <input ref={(a) => this._inputElement = a}
---

      <TodoItems entries={this.state.items}/>
---

import TodoItems from "./TodoItems";

---

import React, { Component } from "react";

class TodoItems extends Component {
  constructor(props) {
    super(props);

    this.createTasks = this.createTasks.bind(this);
  }

  createTasks(item) {
    return <li key={item.key}>{item.text}</li>
  }

  render() {
    var todoEntries = this.props.entries;
    var listItems = todoEntries.map(this.createTasks);

    return (
      <ul className="theList">
        {listItems}
      </ul>
    );
  }
};

export default TodoItems;
---

.todoListMain .header input {
  padding: 10px;
  font-size: 16px;
  border: 2px solid #FFF;
  width: 165px;
}
.todoListMain .header button {
  padding: 10px;
  font-size: 16px;
  margin: 10px;
  margin-right: 0px;
  background-color: #0066FF;
  color: #FFF;
  border: 2px solid #0066FF;
}
.todoListMain .header button:hover {
  background-color: #003399;
  border: 2px solid #003399;
  cursor: pointer;
}
.todoListMain .theList {
  list-style: none;
  padding-left: 0;
  width: 250px;
}
.todoListMain .theList li {
  color: #333;
  background-color: rgba(255,255,255,.5);
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
}
---

  return <li onClick={() => this.delete(item.key)}
             key={item.key}>{item.text}</li> 
---

   delete(key) {
     this.props.delete(key);
  }
---

  transition: background-color .2s ease-out; 
}

.todoListMain .theList li:hover {
  background-color: pink;
  cursor: pointer;
}
---
