| <!DOCTYPE html> |
| <html lang="ja"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>タスク管理アプリ</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| <main class="task-app"> |
| <h1>タスク管理</h1> |
|
|
| <div class="task-form"> |
| <label for="taskInput" class="visually-hidden">新しいタスク</label> |
| <input |
| type="text" |
| id="taskInput" |
| placeholder="タスクを入力してください" |
| autocomplete="off" |
| > |
| <button type="button" id="addButton">追加</button> |
| </div> |
|
|
| <p class="task-count"> |
| 未完了のタスク:<span id="remainingCount">0</span>件 |
| </p> |
|
|
| <p id="emptyMessage">登録されているタスクはありません。</p> |
| <ul id="taskList"></ul> |
| </main> |
|
|
| <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> |
| <script src="script.js"></script> |
| </body> |
| </html> |
| |