├── index.html └── src ├── css └── style.css └── js └── index.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | HW7-DOM-part-3 9 | 10 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |

Список дел

19 |
20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 |
29 |
30 |
31 |
    32 |
33 |
34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #262424; 3 | } 4 | .main{ 5 | height: 100vh; 6 | width: 400px; 7 | display: flex; 8 | justify-content: center; 9 | flex-direction: column; 10 | margin: auto; 11 | } 12 | .title { 13 | color: #ffffff; 14 | } 15 | .tasksBoard ul { 16 | list-style: none; 17 | padding-left: 0; 18 | overflow-y: auto; 19 | max-height: 300px; 20 | margin-bottom: 0; 21 | } 22 | .tasksBoard ul li { 23 | position: relative; 24 | } 25 | .tasksBoard ul li label { 26 | word-wrap: break-word; 27 | width: 300px; 28 | } 29 | .delete{ 30 | color: #ff6161; 31 | cursor: pointer; 32 | position: absolute; 33 | right: 10px; 34 | } -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | document.getElementById('toDoList').addEventListener('submit',createTicket); 2 | document.querySelector('ul.tasks').addEventListener('click',deleteOrTick); 3 | 4 | function createTicket(e){ 5 | e.preventDefault(); 6 | let input = document.querySelector('input'); 7 | if(input.value != '') { 8 | addTask(input.value); 9 | } 10 | input.value = ''; 11 | } 12 | 13 | function addTask(task){ 14 | let ul = document.querySelector('ul'); 15 | let li = document.createElement('li'); 16 | li.className = 'd-flex justify-content-between align-items-center p-2 mb-2'; 17 | let id = new Date().getTime(); 18 | li.innerHTML = `
`; 19 | li.style.background = "#f8ff49"; 20 | ul.appendChild(li); 21 | } 22 | 23 | function deleteOrTick(e){ 24 | if(e.target.classList.contains('delete')) 25 | deleteTask(e); 26 | else { 27 | tickTask(e); 28 | } 29 | } 30 | 31 | 32 | function deleteTask(e){ 33 | let el = e.target.parentElement.parentElement; 34 | let parentNode = el.parentElement; 35 | parentNode.removeChild(el); 36 | } 37 | 38 | function tickTask(e){ 39 | const task = e.target.nextSibling; 40 | const li = e.target.parentElement.parentElement; 41 | if (task && task.style) { 42 | if(e.target.checked){ 43 | task.style.textDecoration = "line-through"; 44 | li.style.background = "#66fc88"; 45 | }else { 46 | task.style.textDecoration = "none"; 47 | li.style.background = "#fff139"; 48 | } 49 | } 50 | } 51 | --------------------------------------------------------------------------------