Created
March 18, 2012 20:45
-
-
Save schatekar/2081207 to your computer and use it in GitHub Desktop.
Example source for "writing better javascript, part - 1"
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function () { | |
| // Returns formatted HTML for a todo item | |
| function getToDoHtml(todo) { | |
| return '<li><span class="todo">' + todo + '</span><a class="edit">Edit</a><a class="remove">Remove</a></li>'; | |
| } | |
| // When Add button is clicked, appends the todo item from the textbox to the list of todo items | |
| $('input[type="submit"].add-todo').click(function () { | |
| var todo = $('input[type="text"].add-todo').val(); | |
| if (todo !== null) { | |
| $('.todo-list').append(getToDoHtml(todo)); | |
| $('input[type="text"].add-todo').val(null); | |
| } | |
| }); | |
| // when edit link is clicked for a particular todo item, changes HTML so that todo item can be edited | |
| $('a.edit').live('click', function () { | |
| $(this).siblings('.remove').remove(); | |
| var todoSpan = $(this).siblings('span'); | |
| var todo = $(todoSpan).text(); | |
| var edittodo = '<input class="editing" type="text" data-original-value="' + todo + '" value="' + todo + '" />'; | |
| todoSpan.replaceWith(edittodo); | |
| var actions = '<a class="save">Save</a><a class="cancel">Cancel</a>'; | |
| $(this).replaceWith(actions); | |
| }); | |
| // While in edit mode, when save link is clicked, saves the changes | |
| $('a.save').live('click', function () { | |
| var todo = $(this).parent().children('.editing').val(); | |
| if (todo !== null) { | |
| $(this).parent().replaceWith(getToDoHtml(todo)); | |
| } | |
| }); | |
| // While editing, when cancel link is clicked, goes back to todo item list | |
| $('a.cancel').live('click', function () { | |
| var todo = $(this).parent().children('.editing').attr('data-original-value'); | |
| if (todo !== null) { | |
| $(this).parent().replaceWith(getToDoHtml(todo)); | |
| } | |
| }); | |
| // When clicked on remove link for a particular todo item, removes that item | |
| $('a.remove').live('click', function () { | |
| var confirmremove = confirm("Are you sure you want to remove this todo item?"); | |
| if (confirmremove) { | |
| $(this).parent().remove(); | |
| } | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Todo example</title> | |
| <style> | |
| input[type="submit"].add-todo { margin-left: 20px;} | |
| span.add-todo { font-size: 20px;} | |
| input[type="text"].add-todo, input[type="text"].editing {font-size: 20px; margin-left: 40px;} | |
| ul.todo-list li {list-style: none;margin-left: 40px;} | |
| ul.todo-list li span{font-size: 20px;padding: 10px;} | |
| ul.todo-list li .edit{padding-left: 30px;font-size: 10px;color: red;} | |
| ul.todo-list li .remove{padding: 10px;font-size: 10px;color: red;} | |
| ul.todo-list li .save{ padding-left: 30px;font-size: 10px;color: green;} | |
| ul.todo-list li .cancel{padding: 10px;font-size: 10px;color: red;} | |
| </style> | |
| <script src="./jquery-1.5.1.min.js" type="text/javascript"></script> | |
| <script type="text/javascript" src="./todo-1.js"></script> | |
| </head> | |
| <body> | |
| <div class="add-todo"> | |
| <span class="add-todo">Add a new todo item</span> | |
| <input type="text" class="add-todo"/> | |
| <input class="add-todo" type="submit" value="Add"/> | |
| </div> | |
| <h2>Here is your list of todo...</h2> | |
| <ul class="todo-list"> | |
| </ul> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment