Cuaderno Notas primera

In this example below you will see how to do a Cuaderno Notas primera 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>Cuaderno Notas primera</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="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0utKast/cuaderno-notas-primera-pJgddX */
.note-list {
    border-bottom: solid 1px gray;
}

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

/*Downloaded from https://www.codeseek.co/0utKast/cuaderno-notas-primera-pJgddX */
var notepad = {
    notes: [
        {
            id: 1,
            content: "¡Hola, mundo! \nUno.\nDos.\nTres."
        },
        {
            id: 2,
            content: "React es sorprendente.\nEn serio, es el más grande."
        },
        {
            id: 3,
            content: "Los robots son muy divertidos.\nLos Robots son magníficos, hasta que empiezan a pensar por su cuenta."
        },
        {
            id: 4,
            content: "Claudio.\nYo Claudio, excelente serie de TV."
        }
    ]
};

var NotesList = React.createClass({
    render: function () {
        var notes = this.props.notepad.notes;
    
        return (
            <div className="note-list">
                {
                    notes.map(function (note) {
                        var title = note.content.substring(0,
                            note.content.indexOf('\n')
                        );
                        title = title || note.content;
                    
                        return (
                            <div key={note.id} className="note-summary">{title}</div>
                        );
                    })
                }
            </div>
        );
    }
});

React.render(
    <NotesList notepad={notepad}/>,
    document.body
);

Comments