ammet.github.io/index.html at master · Ammet/ammet.github.io · GitHub

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Notes</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="app"></div>

    <script type="text/babel">
      var Board = React.createClass({
        getInitialState: function() {
          return {
            notes: [
              'Just a comment',
              'Hello World',
              'Sample text',
              'Some new text'
            ]
          }
        },
        addNote: function() {
          var notes = this.state.notes;
          notes.push('');
          this.setState({notes: notes});
        },
        removeNote: function(index) {
          var notes = this.state.notes;
          notes.splice(index, 1);
          this.setState({notes: notes});
        },
        updateNote: function(text, index) {
          var notes = this.state.notes;
          notes[index] = text;
          this.setState({notes: notes});
        },
        renderNote: function(text, index) {
          return (
            <Note
              key={index}
              index={index}
              updateNoteText={this.updateNote}
              removeFromBoard={this.removeNote} >
              {text}
            </Note>
          )
        },
        render: function() {
          return (
            <div className="board">
              <div className="board-toolbar">
                <button className="boardButton-add" onClick={this.addNote}> Add Note </button>
              </div>
              <div>
                {this.state.notes.map(this.renderNote)}
              </div>
            </div>
          )
        }
      });

      var Note = React.createClass({
        getInitialState: function() {
          return {editing: !this.props.children}
        },
        edit: function() {
          this.setState({editing: true});
        },
        save: function() {
          var text = this.refs.textInput.value;

          if(text == '') {
            this.remove()
          } else {
            this.props.updateNoteText(text, this.props.index);
          }

          this.setState({editing: false});
        },
        remove: function() {
          this.props.removeFromBoard(this.props.index);
        },
        renderNote: function() {
          return (
            <div className="noteContainer">
              <h2 className="noteText">{this.props.children}</h2>
              <button onClick={this.edit} className="noteButton-edit">Edit</button>
              <button onClick={this.remove} className="noteButton-remove">Remove</button>
            </div>
          )
        },
        renderForm: function() {
          return (
            <div className="noteContainer">
              <input
                ref="textInput"
                className="noteTextInput"
                defaultValue={this.props.children}
              />
              <br />
              <button onClick={this.save} className="noteButton-save">Save</button>
            </div>
          )
        },
        render: function() {
          if (this.state.editing) {
            return this.renderForm();
          } else {
            return this.renderNote();
          }
        }
      });

      ReactDOM.render(<Board />, document.getElementById('app'));
    </script>
  </body>
</html>