iofjuupasli · lo-ud · Jul 22, 2016 · Jul 22, 2016
diff --git a/components/Board.jsx b/components/Board.jsx
@@ -1,9 +1,50 @@
 import React from 'react';
+import List from './List';
 
 export default class Board extends React.Component {
+    state = {
+        lists: [],
+        newListName: ''
+    }
+
+    addList = () => {
+        this.setState({
+            lists: this.state.lists.concat({listName: this.state.newListName}),
+            newListName: ''
+        });
+    };
+
+    onListChange = e => {
+        this.setState({
+          newListName: e.target.value
+        })
+    };
+
+    preventDefault = e => {
+        e.preventDefault();
+    };
+
+    onRemoveList = i => {
+      this.setState({
+          lists: this.state.lists.filter((item,index) => {
+            return index != i;
+          }),
+      });
+    }
+
     render() {
+        let lists = [];
+        for (let i = 0; i < this.state.lists.length; i++) {
+            lists.push(< List listInfo = { this.state.lists[i] } removeList = {() => this.onRemoveList(i)}/>);
+        }
         return (
-            <div>Board!</div>
+            <div>
+                <form onSubmit={this.preventDefault} className='form'>
+                    <input type='text' onChange={this.onListChange} value={this.state.newListName}/>
+                    <button onClick={this.addList}>Add List</button>
+                </form>
+                { lists }
+            </div>
         );
     }
 }
diff --git a/components/Card.jsx b/components/Card.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+class Card extends React.Component {
+    state = {
+        task: this.props.cardInfo.task
+    };
+
+    removeCard = () => {
+      this.props.removeCard();
+    }
+
+    render() {
+        return (
+            <div className="card">
+                <div onClick={this.removeCard} className='remove'>x</div>
+                <p>{this.props.cardInfo.task}</p>
+            </div>
+        );
+    }
+}
+
+export default Card;
diff --git a/components/List.jsx b/components/List.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import Card from './Card';
+
+class List extends React.Component {
+    state = {
+        listName: this.props.listInfo.listName,
+        cards : [],
+        newTask: ''
+    };
+
+    addCard = () => {
+        this.setState({
+            cards: this.state.cards.concat({task: this.state.newTask}),
+            newTask: ''
+        });
+    };
+
+    onCardChange = e => {
+        this.setState({
+          newTask: e.target.value
+        })
+    };
+
+    preventDefault = e => {
+        e.preventDefault();
+    };
+
+    removeList = () => {
+      this.props.removeList();
+    }
+
+    onRemoveCard = i => {
+      this.setState({
+          cards: this.state.cards.filter((item,index) => {
+            return index != i;
+          }),
+      });
+    }
+
+    render() {
+        let cards = [];
+        for (let i = 0; i < this.state.cards.length; i++) {
+            cards.push(< Card cardInfo = { this.state.cards[i] } removeCard = {() => this.onRemoveCard(i)} />);
+        }
+        return (
+            <div className='list'>
+                <form onSubmit={this.preventDefault}>
+                    <div onClick={this.removeList} className='remove'>x</div>
+                    <p>{this.props.listInfo.listName}</p>
+                    <input type='text' onChange={this.onCardChange} value={this.state.newTask}/>
+                    <button onClick={this.addCard}>Add Card</button>
+                </form>
+                { cards }
+            </div>
+        );
+    }
+}
+
+export default List;
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Task Board</title>
+    <link rel="stylesheet" href="style/style.css">
 </head>
 
 <body>

diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "devDependencies": {
     "babel-core": "^6.11.4",
     "babel-loader": "^6.2.4",
+    "babel-plugin-transform-class-properties": "^6.10.2",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-1": "^6.5.0",
@@ -23,6 +24,9 @@
       "react",
       "stage-1",
       "es2015"
+    ],
+    "plugins": [
+      "transform-class-properties"
     ]
   },
   "dependencies": {

diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,30 @@
+.list {
+  position: relative;
+    width: 300px;
+    float: left;
+    border: 1px solid #c7c4c4;
+    background: #d8d6d6;
+    padding: 5px;
+    color: #3c3939;
+    margin: 10px;
+}
+.card {
+  position: relative;
+    color: white;
+    margin-top: 5px;
+    background: #696565;
+    padding: 5px;
+}
+.card p {
+    margin: 0;
+}
+
+.form{
+      margin-left: 10px;
+}
+
+.remove{
+  position: absolute;
+top: 0;
+right: 5px;
+}