|
13 | 13 | <script type="module" src="script.mjs"></script> |
14 | 14 | </head> |
15 | 15 | <body> |
16 | | - <div class="todo-container"> |
17 | | - <h1>My ToDo List</h1> |
| 16 | + <form> |
| 17 | + <div class="todo-container"> |
| 18 | + <h1>My ToDo List</h1> |
18 | 19 |
|
19 | | - <div class="todo-input"> |
20 | | - <input |
21 | | - type="text" |
22 | | - id="new-task-input" |
23 | | - placeholder="Enter a new task..." |
24 | | - /> |
25 | | - <input type="date" id="new-task-deadline" /> |
26 | | - <button id="add-task-btn">Add</button> |
27 | | - </div> |
| 20 | + <div class="todo-input"> |
| 21 | + <input |
| 22 | + type="text" |
| 23 | + id="new-task-input" |
| 24 | + placeholder="Enter a new task..." |
| 25 | + required |
| 26 | + maxlength="20" |
| 27 | + /> |
| 28 | + <input type="date" id="new-task-deadline" min="2026-02-21" /> |
| 29 | + <button id="add-task-btn">Add</button> |
| 30 | + </div> |
28 | 31 |
|
29 | | - <ul id="todo-list" class="todo-list"></ul> |
| 32 | + <ul id="todo-list" class="todo-list"></ul> |
30 | 33 |
|
31 | | - <!-- |
32 | | - This is a template for the To-do list item. |
33 | | - It can simplify the creation of list item node in JS script. |
34 | | - --> |
35 | | - <template id="todo-item-template"> |
36 | | - <li class="todo-item"> |
37 | | - <span class="description">Task description</span> |
38 | | - <span class="deadline"></span> |
39 | | - <div class="actions"> |
40 | | - <button class="complete-btn"> |
41 | | - <span class="fa-solid fa-check" aria-hidden="true"></span> |
42 | | - </button> |
43 | | - <button class="delete-btn"> |
44 | | - <span class="fa-solid fa-trash" aria-hidden="true"></span> |
45 | | - </button> |
46 | | - </div> |
47 | | - </li> |
48 | | - </template> |
| 34 | + <template id="todo-item-template"> |
| 35 | + <li class="todo-item"> |
| 36 | + <span class="description">Task description</span> |
| 37 | + <span class="deadline"></span> |
| 38 | + <div class="actions"> |
| 39 | + <button class="complete-btn"> |
| 40 | + <span class="fa-solid fa-check" aria-hidden="true"></span> |
| 41 | + </button> |
| 42 | + <button class="delete-btn"> |
| 43 | + <span class="fa-solid fa-trash" aria-hidden="true"></span> |
| 44 | + </button> |
| 45 | + </div> |
| 46 | + </li> |
| 47 | + </template> |
49 | 48 |
|
50 | | - <button class="clear-completed" id="clear-completed"> |
51 | | - Delete completed tasks |
52 | | - </button> |
53 | | - </div> |
| 49 | + <button class="clear-completed" id="clear-completed"> |
| 50 | + Delete completed tasks |
| 51 | + </button> |
| 52 | + </div> |
| 53 | + </form> |
54 | 54 | </body> |
55 | 55 | </html> |
0 commit comments