├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |

Todo List

23 | 24 |
25 | 26 |
27 | 28 |
29 | 30 | 33 | A short one line description of your task 34 |
35 |
36 | 37 | 38 |
39 |
40 |
41 | 44 |
45 |
46 | 49 |
50 |
51 | 54 |
55 |
56 | 59 |
60 |
61 | 62 |
63 |
64 | 65 | 66 | 67 | 69 |
70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let ulTasks = $('#ulTasks') 2 | let btnAdd = $('#btnAdd') 3 | let btnReset = $('#btnReset') 4 | let btnSort = $('#btnSort') 5 | let btnCleanup = $('#btnCleanup') 6 | let inpNewTask = $('#inpNewTask') 7 | 8 | function addItem() { 9 | let listItem = $('
  • ', { 10 | 'class': 'list-group-item', 11 | text: inpNewTask.val() 12 | }) 13 | listItem.click(() => { 14 | listItem.toggleClass('done') 15 | }) 16 | ulTasks.append(listItem) 17 | inpNewTask.val('') 18 | toggleInputButtons() 19 | } 20 | 21 | function clearDone() { 22 | $('#ulTasks .done').remove() 23 | toggleInputButtons() 24 | } 25 | 26 | function sortTasks() { 27 | $('#ulTasks .done').appendTo(ulTasks) 28 | } 29 | 30 | function toggleInputButtons() { 31 | btnReset.prop('disabled', inpNewTask.val() == '') 32 | btnAdd.prop('disabled', inpNewTask.val() == '') 33 | btnSort.prop('disabled', ulTasks.children().length < 1) 34 | btnCleanup.prop('disabled', ulTasks.children().length < 1) 35 | } 36 | 37 | inpNewTask.keypress((e) => { 38 | if (e.which == 13) addItem() 39 | }) 40 | inpNewTask.on('input', toggleInputButtons) 41 | 42 | btnAdd.click(addItem) 43 | btnReset.click(() => { 44 | inpNewTask.val('') 45 | toggleInputButtons() 46 | }) 47 | btnCleanup.click(clearDone) 48 | btnSort.click(sortTasks) 49 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | #ulTasks li.done { 2 | color: #6c757d; 3 | text-decoration: line-through; 4 | } 5 | --------------------------------------------------------------------------------