todo-list-javascript/index.html at main · Beckerr11/todo-list-javascript · 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Taskboard Lite | Vanilla JavaScript</title>
    <meta
      name="description"
      content="Taskboard Lite is a polished task management demo built with HTML, CSS, and vanilla JavaScript."
    />
    <link
      rel="icon"
      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='18' fill='%230d9488'/%3E%3Cpath d='M18 33.5l8 8L46 22' fill='none' stroke='%23ffffff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="page-shell">
      <header class="hero-card">
        <div class="hero-copy">
          <span class="eyebrow">Vanilla productivity app</span>
          <h1>Plan tasks in one clean workspace.</h1>
          <p>
            A simple front-end demo with local persistence, fast filters, progress
            tracking, and responsive UX built without frameworks.
          </p>

          <div class="hero-actions">
            <button type="button" class="ghost-button" data-suggestion="Plan client delivery">
              Add sample task
            </button>
            <a class="text-link" href="#task-form">Jump to board</a>
          </div>
        </div>

        <div class="hero-panel">
          <article class="metric-card">
            <span>Progress</span>
            <strong id="hero-progress">0%</strong>
            <small id="hero-progress-copy">No completed tasks yet.</small>
          </article>
          <article class="metric-card">
            <span>Open today</span>
            <strong id="hero-open-count">0</strong>
            <small>Tasks still waiting for action.</small>
          </article>
        </div>
      </header>

      <main class="app-grid">
        <section class="surface-card">
          <div class="section-head">
            <div>
              <span class="section-label">Composer</span>
              <h2>Capture the next priority.</h2>
            </div>
            <p>Keep the workflow focused on what needs to move now.</p>
          </div>

          <form id="task-form" class="task-form" novalidate>
            <label class="sr-only" for="task-input">Task title</label>
            <input
              id="task-input"
              name="task"
              placeholder="Add a task, milestone, or delivery"
              autocomplete="off"
            />
            <button type="submit">Create task</button>
          </form>

          <div class="quick-row" aria-label="Quick task suggestions">
            <button type="button" class="quick-chip" data-suggestion="Review landing page copy">
              Review copy
            </button>
            <button type="button" class="quick-chip" data-suggestion="Reply to client feedback">
              Client follow-up
            </button>
            <button type="button" class="quick-chip" data-suggestion="Publish new portfolio demo">
              Publish demo
            </button>
          </div>

          <p id="form-feedback" class="form-feedback" role="status">
            Add a task to start the board.
          </p>
        </section>

        <section class="stats-grid" aria-label="Task overview">
          <article class="stat-card">
            <span>Total</span>
            <strong id="total-count">0</strong>
            <small>All registered tasks</small>
          </article>
          <article class="stat-card">
            <span>Active</span>
            <strong id="open-count">0</strong>
            <small>Tasks in progress</small>
          </article>
          <article class="stat-card">
            <span>Completed</span>
            <strong id="done-count">0</strong>
            <small>Finished and archived</small>
          </article>
        </section>

        <section class="surface-card board-card">
          <div class="section-head board-head">
            <div>
              <span class="section-label">Task board</span>
              <h2>Track the day with less noise.</h2>
            </div>
            <p id="board-summary">No tasks added yet.</p>
          </div>

          <div class="progress-block" aria-hidden="true">
            <div class="progress-track">
              <span id="progress-bar" class="progress-bar"></span>
            </div>
          </div>

          <div class="board-toolbar">
            <div class="filter-row" role="tablist" aria-label="Task filters">
              <button type="button" class="filter-button is-active" data-filter="all">
                All
              </button>
              <button type="button" class="filter-button" data-filter="open">
                Open
              </button>
              <button type="button" class="filter-button" data-filter="done">
                Completed
              </button>
            </div>

            <button id="clear-completed" type="button" class="clear-button">
              Clear completed
            </button>
          </div>

          <ul id="task-list" class="task-list" aria-live="polite"></ul>
        </section>
      </main>
    </div>

    <script src="script.js"></script>
  </body>
</html>