<!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>