jQuery Notes App

A simple jQuery Notes App with ability to add notes to a list.

HTML

<div id="new-note">
     <h2>New Note</h2>

    <form action="">
        <textarea></textarea>
        <br>
        <input type="submit" value="Add" />
    </form>
</div>
<hr>
<div id="notes">
     <h2>Notes</h2>

    <ul></ul>
</div>

CSS

body {
    margin: 30px;
}
body {
    font-family: Arial;
}
h1 {
    font-weight:bold;
    font-size:16px;
}
p {
    margin:5px 0px 5px 0px;
}
li a {
    margin-left:5px;
}

JavaScript

$(document).ready(function () {
    $('#new-note form').submit(function (e) {
        e.preventDefault();

        var request = $.ajax({
            type: "post",
            url: "/echo/json/",
            data: {
                json: JSON.stringify({
                    text: $('#new-note').find('textarea').val(),
                    id: Math.floor((Math.random()*100)+1)
                })
            },
            dataType: 'json'
        });

        request.done(function (note) {
            $('#notes ul').prepend('<li data-id=' + note.id + '>' + note.text + '<a class="edit" href="#">edit</a></li>');
            $('#new-note').find('textarea').val('');
        });
    });

    $("#notes").on("click", ".edit", function (e) {
        e.preventDefault();
        var id = $(this).parents().first().attr("data-id");
        alert("You are editing the record with id: " + id);
    });
});