---

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Мои задачи</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <main class="board">
    <h1>Мои задачи</h1>
    <p class="hint" id="hint">Перетащи задачу в другой блок или нажми на неё.</p>
    <div class="columns">
      <section class="column" data-status="active" aria-labelledby="active-heading">
        <h2 id="active-heading">Активные (<span class="count">2</span>)</h2>
        <div class="task-list" aria-label="Активные задачи">
          <button class="task" type="button" draggable="true" id="task-1">Сдать практику</button>
          <button class="task" type="button" draggable="true" id="task-2">Повторить циклы</button>
        </div>
      </section>
      <section class="column" data-status="done" aria-labelledby="done-heading">
        <h2 id="done-heading">Готово (<span class="count">2</span>)</h2>
        <div class="task-list" aria-label="Готовые задачи">
          <button class="task" type="button" draggable="true" id="task-3">Сделать тест по JS</button>
          <button class="task" type="button" draggable="true" id="task-4">Разобрать DOM</button>
        </div>
      </section>
    </div>
    <p class="sr-only" id="announcement" aria-live="polite"></p>
  </main>
</body>
</html>