Botón Añadir Nota

In this example below you will see how to do a Botón Añadir Nota with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0utKast, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0utKast ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Botón Añadir Nota</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <script src='https://cdn.rawgit.com/bradleyboy/codepen-react/master/dist/codepen-react-0.1.1.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.0/lodash.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0utKast/botandxf3n-aandxf1adir-nota-VLvwMX */
.note-list {
    border-bottom: solid 1px gray;
}

.note-summary {
    border-top: solid 1px gray;
}

.note-selected {
    font-weight: bold;
}

/*Downloaded from https://www.codeseek.co/0utKast/botandxf3n-aandxf1adir-nota-VLvwMX */
var notepad = {
    notes: [],
    selectedId: null
};

var nextNodeId = 1;

var onAddNote = function () {
    var note = {id: nextNodeId, content: ''};
    nextNodeId++;
    notepad.notes.push(note);
    notepad.selectedId = note.id;
    onChange();
};

var onChangeNote = function (id, value) {
    var note = _.find(notepad.notes, function (note) {
        return note.id === id;
    });
    if (note) {
        note.content = value;
    }
    onChange();
};

var onSelectNote = function (id) {
    notepad.selectedId = id;
    onChange();
};

var NoteSummary = React.createClass({
    render: function () {
        var note = this.props.note;
        var title = note.content;
        if (title.indexOf('\n') > 0) {
            title = note.content.substring(0, note.content.indexOf('\n'));
        }
        if (!title) {
            title = 'Untitled';
        }
    
        return (
            <div className="note-summary">{title}</div>
        );
    }
});

var NotesList = React.createClass({
    render: function () {
        var notepad = this.props.notepad;
        var notes = notepad.notes;
    
        return (
            <div className="note-list">
                {
                    notes.map(function (note) {
                        return (
                            <div key={note.id} className={notepad.selectedId === note.id ? 'note-selected' : ''}>
                                <a href="#" onClick={this.props.onSelectNote.bind(null, note.id)}>
                                    <NoteSummary note={note}/>
                                </a>
                            </div>
                        );
                    }.bind(this))
                }
            </div>
        );
    }
});

var NoteEditor = React.createClass({
    onChange: function (event) {
        this.props.onChange(this.props.note.id, event.target.value);
    },

    render: function () {
        return (
            <textarea rows={5} cols={40} value={this.props.note.content} onChange={this.onChange}/>
        );
    }
});

var Notepad = React.createClass({
    render: function () {
        var notepad = this.props.notepad;
    
        var editor = null;
        
        var selectedNote = _.find(notepad.notes, function (note) {
            return note.id === notepad.selectedId;
        });
        
        if (selectedNote) {
            editor = <NoteEditor note={selectedNote} onChange={this.props.onChangeNote}/>
        }
    
        return (
            <div id="notepad">
                <NotesList notepad={notepad} onSelectNote={this.props.onSelectNote}/>
                <div><button onClick={this.props.onAddNote}>Add note</button></div>
                {editor}
            </div>
        );
    }
});

var onChange = function () {
    React.render(
        <Notepad notepad={notepad} onAddNote={onAddNote} onSelectNote={onSelectNote} onChangeNote={onChangeNote}/>,
        document.body
    );
};

onChange();

Comments