SHARE
TWEET

Untitled

a guest Jun 16th, 2019 44 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html lang="en">
  2.     <head>
  3.         <meta charset="utf-8">
  4.     </head>
  5.     <body>
  6.         <ul id="todo-app">
  7.             <li class="todo">Walk the dog</li>
  8.             <li class="todo">Pay bills</li>
  9.             <li class="todo">Make dinner</li>
  10.             <li class="todo">Code for one hour</li>
  11.         </ul>
  12.  
  13.         <!-- We move script to avoid timeout -->
  14.         <script>
  15.           // A better way to get todos using selectors and avoiding type checking
  16.           const todos = document.querySelectorAll("#todo-app > .todo")
  17.           // iterate over with a for instead of while since we know beforehand the times it will run
  18.           for(const todo of todos) {
  19.             todo.addEventListener('click', () => {
  20.               // allow to reset the state of the todo item by reclicking it
  21.               const done = todo.style.textDecoration === 'line-through';
  22.               // avoid recreating the whole style by modifying just the textDecoration property
  23.               todo.style.textDecoration = done ? 'none' : 'line-through';
  24.               // use string templates for cleaner code
  25.               alert(`Item: "${todo.innerText}" is now ${done ? 'pending' : 'done'}`);
  26.             });
  27.           }
  28.         </script>
  29.     </body>
  30. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top