first commit

This commit is contained in:
2026-02-06 11:16:07 +03:00
commit 9a2e09864b
13 changed files with 561 additions and 0 deletions

70
src/index.html Normal file
View File

@@ -0,0 +1,70 @@
<!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>