├── app.js ├── index.html └── style.css /app.js: -------------------------------------------------------------------------------- 1 | const add = document.querySelector("#add") 2 | const input = document.querySelector("#input"); 3 | var todo = document.querySelector("#todo__value") 4 | 5 | add.addEventListener("click", function() { 6 | const value = input.value 7 | const box = document.createElement('div') 8 | box.classList.add("todo__value-box") 9 | if(value == ""){ 10 | alert('you must write something'); 11 | return 12 | } 13 | var text = document.createElement("span") 14 | text.textContent = value 15 | text.className = "todo__value-box-text"; 16 | 17 | const del = document.createElement("button"); 18 | del.innerText = "Delete"; 19 | del.className = "delete"; 20 | del.addEventListener("click", function() { 21 | todo.removeChild(box) 22 | }) 23 | 24 | box.appendChild(text); 25 | box.appendChild(del); 26 | todo.appendChild(box) 27 | input.value = "" 28 | }) 29 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 |
13 |
14 |
15 |
16 | To-do List
17 |
18 |
19 | 20 | 21 |
22 |
23 |
24 | 25 | Tasks 26 | 27 |
28 |
29 |
30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Nunito&display=swap'); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: Nunito; 7 | } 8 | 9 | body { 10 | background-color: #374151; 11 | } 12 | 13 | .container { 14 | width: 100%; 15 | max-width: 1320px; 16 | margin: 0 auto; 17 | padding: 0 10px; 18 | } 19 | 20 | .todo__row { 21 | width: 100%; 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: center; 25 | align-items: center; 26 | } 27 | .todo__title { 28 | font-size: 40px; 29 | font-weight: 600; 30 | color: #000000; 31 | } 32 | .todo__input { 33 | width: 100%; 34 | display: flex; 35 | flex-direction: row; 36 | justify-content: center; 37 | align-items: center; 38 | margin: 30px 0; 39 | } 40 | .todo__input-box { 41 | width: 45%; 42 | height: 50px; 43 | display: flex; 44 | flex-direction: row; 45 | justify-content: center; 46 | align-items: center; 47 | background-color: #1F2937; 48 | } 49 | .todo__input-box input { 50 | width: 91%; 51 | height: 100%; 52 | border: none; 53 | background-color: #1F2937; 54 | color: #ffffff; 55 | } 56 | .todo__input-box input:hover, .todo__input-box input:focus { 57 | outline: none; 58 | background-color: #1F2937; 59 | } 60 | .todo__input-box input[type=text] { 61 | padding: 0 0 0 10px; 62 | } 63 | .todo__input-btn { 64 | padding: 7px 15px; 65 | background-color: #00b0ff; 66 | border: none; 67 | font-size: 15px; 68 | text-transform: uppercase; 69 | cursor: pointer; 70 | border-radius: 4px; 71 | color: #fafafa; 72 | margin-right: 10px; 73 | } 74 | .todo__value { 75 | width: 100%; 76 | display: flex; 77 | justify-content: center; 78 | align-items: center; 79 | flex-direction: column; 80 | } 81 | 82 | .todo__value-title { 83 | font-size: 30px; 84 | font-weight: 600; 85 | color: #000000; 86 | margin-bottom: 15px; 87 | } 88 | .todo__value-box { 89 | width: 45%; 90 | display: flex; 91 | align-items: center; 92 | justify-content: space-between; 93 | flex-direction: row; 94 | background-color: #111827; 95 | padding: 10px 10px; 96 | border-radius: 10px; 97 | word-break: break-all; 98 | margin-bottom: 15px; 99 | } 100 | .todo__value-box:last-child { 101 | margin-bottom: 70px; 102 | } 103 | .todo__value-box-text { 104 | width: 70%; 105 | display: flex; 106 | align-items: center; 107 | height: auto; 108 | background-color: #111827; 109 | color: #ffffff; 110 | border: none; 111 | } 112 | .todo__value-box-text:hover, .todo__value-box-text:focus { 113 | outline: none; 114 | } 115 | .todo__value-box-text[type=text] { 116 | padding: 0 0 0 10px; 117 | } 118 | .delete { 119 | padding: 7px 10px; 120 | background-color: #00b0ff; 121 | border: none; 122 | font-size: 15px; 123 | text-transform: uppercase; 124 | cursor: pointer; 125 | margin-left: 5px; 126 | border-radius: 4px; 127 | color: #fafafa; 128 | } 129 | footer { 130 | position: fixed; 131 | bottom: 0; 132 | width: 100%; 133 | padding: 10px 0; 134 | display: flex; 135 | justify-content: center; 136 | align-items: center; 137 | color: #ffffff; 138 | background-color: #000000; 139 | } 140 | 141 | @media screen and (max-width: 800px) { 142 | .todo__input-box { 143 | width: 100%; 144 | } 145 | .todo__value-box { 146 | width: 100%; 147 | } 148 | .todo__value-box-text { 149 | width: 70%; 150 | } 151 | } --------------------------------------------------------------------------------