js-study-queue/index.html at main · kodenvibekenya/js-study-queue · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Practice JavaScript arrays and objects with a study queue.">
  <title>Study Queue — JavaScript Practice</title>
  <link rel="icon" href="data:,">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <p class="eyebrow">JavaScript milestone 2</p>
    <h1>Study queue</h1>
    <p>Plan small topics, finish them, and keep the state honest.</p>

    <form id="topic-form" class="panel">
      <label for="title">Topic</label>
      <input id="title" name="title" required maxlength="60" placeholder="Array methods">
      <label for="minutes">Minutes</label>
      <input id="minutes" name="minutes" type="number" min="5" step="5" required value="25">
      <button type="submit">Add topic</button>
    </form>

    <section class="panel" aria-labelledby="queue-heading">
      <div class="section-heading">
        <div>
          <h2 id="queue-heading">Your queue</h2>
          <p id="summary" aria-live="polite"></p>
        </div>
        <div class="filters" aria-label="Filter topics">
          <button type="button" data-filter="all" aria-pressed="true">All</button>
          <button type="button" data-filter="open" aria-pressed="false">Open</button>
          <button type="button" data-filter="done" aria-pressed="false">Done</button>
        </div>
      </div>
      <ul id="topic-list" class="topic-list"></ul>
    </section>
  </main>
  <script src="script.js"></script>
</body>
</html>