Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 26th, 2012  |  syntax: None  |  size: 0.86 KB  |  hits: 9  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. // index.html
  2.  
  3. <html>
  4.     <head>
  5.         <title>Todo List</title>
  6.         <style>
  7.             .complete { text-decoration:line-through; }
  8.         </style>
  9.     </head>
  10.    
  11.     <body>
  12.         <ul></ul>
  13.         <input type="text" x-webkit-speech />
  14.         <button>Submit</button>
  15.     </body>
  16.    
  17.     <script type="text/javascript" src="jquery.js"></script>
  18.     <script type="text/javascript" src="main.js"></script>
  19. </html>
  20.  
  21. // main.js
  22.  
  23. var $list = $('ul');
  24. var $input = $('input');
  25. var $button = $('button');
  26.  
  27. $button.click(function() {
  28.     var task = $input.val();
  29.     var $item = $('<li class="incomplete">' + task + '</li>');
  30.     $item.click(toggleTask);
  31.     $list.append($item);
  32.     $input.val('');
  33. });
  34.  
  35. function toggleTask() {
  36.     $(this).hasClass('incomplete') ? $(this).attr('class', 'complete')
  37.                                    : $(this).attr('class', 'incomplete')
  38. }