SHARE
TWEET

Untitled

a guest Jan 28th, 2020 83 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. let todos = [
  2.   { id: 0, name: 'Buy milk', due: '2019-05-30', isDone: true },
  3.   { id: 1, name: 'Buy beer', due: '2019-06-03', isDone: false },
  4.   { id: 2, name: 'Read "The Hitchhiker\'s Guide to the Galaxy" book', due: '2019-06-14', isDone: false },
  5. ];
  6.  
  7. const statics = {
  8.   id: todos.length,
  9. };
  10.  
  11. const populateTodos = (todos, container) => {
  12.   const $div = $(container);
  13.   $div.empty();
  14.  
  15.   todos.map(todo => {
  16.     $div.append(todoView(todo)
  17.     )
  18.   });
  19.  
  20.  
  21.  
  22.   // Finish the function
  23. };
  24.  
  25. const todoView = (todo, container) => {
  26.   const $div = $(container);
  27.   return (`
  28.   <div class="todo-single">
  29.     <input data-check-id="${todo.id}" type="checkbox" ${todo.isDone ? 'checked' : ''}/>
  30.     <span>${todo.name} - ${moment(todo.due).format('MMMM Do YYYY')}</span>
  31.     <button data-id="${todo.id}">X</button>
  32.   </div>
  33.   `);
  34. }
  35.  
  36. (() => {
  37.   // Initial populate
  38.   populateTodos(todos, '#todos');
  39.  
  40.   // Attach events here
  41.   // Add event
  42.   $(document).on('click', '#btn-add', (ev) => {
  43.     const $input = $('#todo-text');
  44.     const $date = $('#todo-date');
  45.     const $todo1 = { id: statics.id++, name: $input.val(), due: $date.val(), isDone: false };
  46.     if ($date.val() === '') {
  47.       alert('Invalid date!');
  48.     } else {
  49.       todos.push($todo1);
  50.       populateTodos(todos, '#todos');
  51.       $input.val('');
  52.       $date.val('');
  53.       alert('Todo Added!');
  54.     }
  55.  
  56.   });
  57.  
  58.   // Remove event
  59.   $(document).on('click', '[data-id]', (ev) => {
  60.     const $target = +$(ev.currentTarget).attr('data-id');
  61.     todos.splice(todos.findIndex(key => key.id === $target), 1);
  62.  
  63.     // statics++;
  64.     populateTodos(todos, '#todos');
  65.     alert('Todo Deleted!');
  66.   });
  67.  
  68.   // Check event
  69.   $(document).on('click', ':checkbox', (ev) => {
  70.     const $target = +$(ev.currentTarget).attr('data-check-id');
  71.     const index = todos.findIndex(el => el.id === $target);
  72.  
  73.     if(ev.target.checked) {
  74.       todos[index].isDone = true;
  75.     }else {
  76.       todos[index].isDone = false;
  77.     }
  78.  
  79.  
  80.  
  81.      alert('Todo Toggled!');
  82.   });
  83. })();
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