/
app.js
95 lines (88 loc) · 2.57 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "bulma/bulma";
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: ["Go to the store", "Wash the dishes", "Learn some code"]
};
this.addItem = this.addItem.bind(this);
this.removeItem = this.removeItem.bind(this);
}
addItem(e) {
// Prevent button click from submitting form
e.preventDefault();
// Create variables for our list, the item to add, and our form
let list = this.state.list;
const newItem = document.getElementById("addInput");
const form = document.getElementById("addItemForm");
// If our input has a value
if (newItem.value != "") {
// Add the new item to the end of our list array
list.push(newItem.value);
// Then we use that to set the state for list
this.setState({
list: list
});
// Finally, we need to reset the form
newItem.classList.remove("is-danger");
form.reset();
} else {
// If the input doesn't have a value, make the border red since it's required
newItem.classList.add("is-danger");
}
}
removeItem(item) {
// Put our list into an array
const list = this.state.list.slice();
// Check to see if item passed in matches item in array
list.some((el, i) => {
if (el === item) {
// If item matches, remove it from array
list.splice(i, 1);
return true;
}
});
// Set state to list
this.setState({
list: list
});
}
render() {
return (
<div className="content">
<div className="container">
<section className="section">
<ul>
{this.state.list.map(item => (
<li key={item}>
{item}
<span
className="delete"
onClick={() => this.removeItem(item)}
/>
</li>
))}
</ul>
</section>
<hr />
<section className="section">
<form className="form" id="addItemForm">
<input
type="text"
className="input"
id="addInput"
placeholder="Something that needs ot be done..."
/>
<button className="button is-info" onClick={this.addItem}>
Add Item
</button>
</form>
</section>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));