70 lines
3.1 KiB
HTML
70 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<title>To Do List</title>
|
|
<link rel="stylesheet" href="styles/index.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="todo data-js-todo">
|
|
<h1 class="todo_title">To Do List</h1>
|
|
<form class="todo_form" data-js-todo-new-task-form>
|
|
<div class="todo_field field">
|
|
<label class="field_label" for="new_task">
|
|
New task title
|
|
</label>
|
|
<input class="field_input" id="new_task" placeholder=" " autocomplete="off" data-js-todo-new-task-input>
|
|
</div>
|
|
<button class="button" type="submit">Add</button>
|
|
</form>
|
|
<form class="todo_form" data-js-todo-search-task-form>
|
|
<div class="todo_field field">
|
|
<label class="field_label" for="search_task">
|
|
Search task
|
|
</label>
|
|
<input class="field_input" id="search_task" placeholder=" " autocomplete="off" type="search" data-js-todo-search-task-input>
|
|
</div>
|
|
</form>
|
|
<div class="todo_info">
|
|
<div class="todo_total-tasks">
|
|
Total Tasks: <span data-js-todo-total-tasks>0</span>
|
|
</div>
|
|
<button class="todo_delete-all-button" type="button" data-js-todo-delete-all-button>
|
|
Delete All
|
|
</button>
|
|
</div>
|
|
<ul class="todo_list" data-js-todo-list>
|
|
<li class="todo_item todo-item" data-js-todo-item>
|
|
<input class="todo_item_checkbox" type="checkbox" id="todo-1" data-js-todo-item-checkbox>
|
|
<label class="todo-item_label" for="todo-1" data-js-todo-item-label>Todo 1</label>
|
|
<button class="todo_item_delete-button" type="button" aria-label="Delete" title="Delete" data-js-todo-item-delete-button>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15 5L5 15M5 5L15 15" stroke="#757575" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
|
|
</button>
|
|
</li>
|
|
<li class="todo_item todo-item" data-js-todo-item>
|
|
<input class="todo_item_checkbox" type="checkbox" id="todo-1" data-js-todo-item-checkbox>
|
|
<label class="todo-item_label" for="todo-1" data-js-todo-item-label>Todo 1</label>
|
|
<button class="todo_item_delete-button" type="button" aria-label="Delete" title="Delete" data-js-todo-item-delete-button>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15 5L5 15M5 5L15 15" stroke="#757575" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<div class="todo_empty-message" data-js-todo-empty-message>
|
|
|
|
</div>
|
|
</div>
|
|
<script src="main.js" type="module"></script>
|
|
</body>
|
|
|
|
</html> |