├── LICENSE
├── README.md
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Rehmatpal Singh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Pure CSS Todo App
  2 | 
  3 | This is a fully functional Todo app built with just HTML and CSS — JavaScript OUT THE WINDOW! While I wouldn't recommend this approach for your next production app (more on the limitations below), it's a fun way to explore how creative we can get with CSS and HTML elements. Plus, it shows off a pretty cool implementation of theme selection without needing any scripts!
  4 | 
  5 | It's live on - https://duskyelf.github.io/todo-css/
  6 | 
  7 | ## How It Works?
  8 | 
  9 | ### State Management: HTML Form Controls
 10 | 
 11 | The magic happens through cleverly placed input elements that manage our app's state:
 12 | 
 13 | ```html
 14 | <input type="radio" name="tab-switcher" checked="checked">    <!-- Tab state -->
 15 | <input type="checkbox">                                       <!-- Task completion state -->
 16 | <input type="radio" name="theme">                             <!-- Theme selection -->
 17 | ```
 18 | 
 19 | These inputs are still functional but hidden from view with some CSS tricks:
 20 | 
 21 | ```css
 22 | input[type="radio"],
 23 | input[type="checkbox"] {
 24 |     width: 0;
 25 |     opacity: 0;
 26 |     cursor: pointer;
 27 |     position: absolute;
 28 | }
 29 | ```
 30 | 
 31 | Each hidden input gets wrapped with a custom-styled label that acts as its visual stand-in. The cool thing about putting an input inside a label is that clicking anywhere on the label triggers the input. We can then target these labels with selectors like `label:has(>input:checked)` to apply different styles based on their state.
 32 | 
 33 | Here's a quick example:
 34 | 
 35 | ```html
 36 | <label done-btn>✓<input type="checkbox"></label>
 37 | ```
 38 | 
 39 | ```css
 40 | [done-btn]:has(>input:checked) {
 41 |     color: var(--secondary);
 42 | }
 43 | ```
 44 | 
 45 | The key insight here is that these input elements are our only way to interact with the app. While we can't directly manipulate the DOM with CSS, we can change styles based on input states. This creates the illusion of interactivity by showing or hiding elements depending on the current state of our inputs.
 46 | 
 47 | ### "Database" Structure
 48 | 
 49 | Our app's "database" is really just a collection of pre-defined HTML elements:
 50 | 
 51 | ```html
 52 | <main todo-database>
 53 |     <label add-btn>+<input type="radio"></label>
 54 |     <div class="todo-data">
 55 |         <label done-btn>✓<input type="checkbox"></label>
 56 |         <input type="text">
 57 |     </div>
 58 |     <!-- Repeated for each potential todo item -->
 59 | </main>
 60 | ```
 61 | 
 62 | This gives us a fixed number of todo slots (pre-allocated in the HTML). We show or hide these elements using conditional CSS that acts a bit like database queries against the current state.
 63 | 
 64 | ### CSS Selector-Based Queries
 65 | 
 66 | Here's where things get really interesting! We use some pretty advanced CSS selectors to mimic what would normally be JavaScript logic:
 67 | 
 68 | ```css
 69 | body:has(label[nav-todo]>input:checked) .todo-data:has(label[done-btn]>input:checked) {
 70 |     display: none;
 71 | }
 72 | ```
 73 | 
 74 | This is basically saying:
 75 | ```
 76 | IF we're on the "todo" tab AND the task is marked as complete THEN
 77 |     hide that task
 78 | END IF
 79 | ```
 80 | 
 81 | And for the "Done" tab:
 82 | 
 83 | ```css
 84 | body:has(label[nav-done]>input:checked) .todo-data:not(:has(label[done-btn]>input:checked)) {
 85 |     display: none;
 86 | }
 87 | ```
 88 | 
 89 | Which translates to:
 90 | ```
 91 | IF we're on the "done" tab AND the task is NOT complete THEN
 92 |     hide that task
 93 | END IF
 94 | ```
 95 | 
 96 | Pretty clever, right?
 97 | 
 98 | ### Chain Reaction for Task Creation
 99 | 
100 | One of my favorite tricks in this app is how we handle adding new tasks. Each todo item has an "add" button (actually a radio button) that controls whether the next todo item appears:
101 | 
102 | ```css
103 | /* Hide the todo item if its preceding add button is not checked */
104 | [add-btn]:has(>input:not(:checked))+.todo-data {
105 |     display: none;
106 | }
107 | 
108 | /* Hide the add button once it's been clicked */
109 | [add-btn]:has(>input:checked) {
110 |     display: none;
111 | }
112 | ```
113 | 
114 | To make it look like we're dynamically adding tasks, we only show the first unchecked add button and hide all the rest:
115 | 
116 | ```css
117 | /* Hide all subsequent add buttons */
118 | [add-btn]:not(:has(>input:checked))~[add-btn] {
119 |     display: none;
120 | }
121 | ```
122 | 
123 | ### Themeable UI via CSS Variables
124 | 
125 | Want to switch themes? No problem! The app uses a nifty theming system built with CSS variables:
126 | 
127 | ```css
128 | :root:has([theme-s] label:nth-child(1)>input:checked) {
129 |     --text: #e7e4e9;
130 |     --background: #110c13;
131 |     --primary: #c1a4d2;
132 |     --secondary: #5f2e7a;
133 |     --accent: #9e4acd;
134 | }
135 | 
136 | :root:has([theme-s] label:nth-child(2)>input:checked) {
137 |     --text: #1a171c;
138 |     --background: #f1ecf3;
139 |     --primary: #4b2d5c;
140 |     --secondary: #b685d1;
141 |     --accent: #8431b4;
142 | }
143 | 
144 | /* ... more themes */
145 | 
146 | ```
147 | 
148 | When you pick a theme, the conditional `:has()` selector figures out which radio button is checked and defines the theme variables on the root accordingly. Throughout the app, all elements depend on these variables while defining their styles.
149 | 
150 | ## Technical Limitations
151 | 
152 | While this CSS-only approach is super cool, it does come with some important limitations to keep in mind:
153 | 
154 | CSS is fundamentally designed for styling pages, not creating application logic. It cannot directly interact with or manipulate the DOM like JavaScript can. Instead, we're cleverly styling elements to be visible or hidden based on the state of input elements.
155 | 
156 | There's essentially no equivalent to JavaScript's dynamic memory allocation (like `malloc()` or `free()`) in CSS. This means all possible todo items must be predefined in the HTML, just waiting to be revealed when needed. It's like having a fixed-size array instead of a dynamic data structure!
157 | 
158 | This approach also makes it impossible to:
159 | - Save todos between sessions (no localStorage or database integration)
160 | - Dynamically generate new UI components beyond what's in the initial HTML
161 | - Implement complex operations like sorting, filtering beyond simple visibility toggles
162 | - Connect to external services or APIs
163 | 
164 | Despite these constraints, it's fascinating to see just how far we can push CSS with creative thinking. This project demonstrates that sometimes limitations can spark the most innovative solutions!
165 | 
166 | ## Browser Compatibility
167 | 
168 | For this CSS wizardry to work, you'll need a browser that supports the `:has()` selector. Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
169 | - Chrome/Edge 105+
170 | - Firefox 121+
171 | - Safari 15.4+
172 | - Opera 91+
173 | 
174 | ## Technical References
175 | 
176 | Want to dive deeper? Check out these resources:
177 | - [CSS :has() Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)
178 | - [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
179 | - [CSS Combinators](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators)


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Todo CSS</title>
  8 | 
  9 |     <style>
 10 |         * {
 11 |             margin: 0;
 12 |             padding: 0;
 13 |             box-sizing: border-box;
 14 |         }
 15 | 
 16 |         html {
 17 |             display: flex;
 18 |             justify-content: center;
 19 |         }
 20 | 
 21 |         body {
 22 |             width: 100%;
 23 |             max-width: 900px;
 24 | 
 25 |             padding: 20px;
 26 |             color: var(--text);
 27 |             font-family: Arial, sans-serif;
 28 |             background-color: var(--background);
 29 |         }
 30 | 
 31 |         h1 {
 32 |             font-size: 2rem;
 33 |             padding-bottom: 10px;
 34 |             color: var(--primary);
 35 |             border-bottom: 5px dashed var(--secondary);
 36 | 
 37 |             display: flex;
 38 |             align-items: center;
 39 |             justify-content: space-between;
 40 |         }
 41 | 
 42 |         * {
 43 |             transition: color 0.3s, background-color 0.3s;
 44 |         }
 45 | 
 46 |         [theme-picker] {
 47 |             position: relative;
 48 | 
 49 |             & span {
 50 |                 display: inline-block;
 51 | 
 52 |                 width: 20px;
 53 |                 aspect-ratio: 1 / 1;
 54 |                 border-radius: 50%;
 55 |             }
 56 | 
 57 |             & [prev-primary] {
 58 |                 background-color: var(--primary);
 59 |             }
 60 | 
 61 |             & [prev-secondary] {
 62 |                 background-color: var(--secondary);
 63 |             }
 64 | 
 65 |             & [prev-accent] {
 66 |                 background-color: var(--accent);
 67 |             }
 68 | 
 69 |             & [prev-text] {
 70 |                 background-color: var(--text);
 71 |             }
 72 | 
 73 |             & [theme-s] {
 74 |                 z-index: 1000;
 75 |                 display: none;
 76 |                 position: absolute;
 77 | 
 78 |                 padding: 10px;
 79 |                 border-radius: 5px;
 80 | 
 81 |                 background-color: var(--background);
 82 |                 box-shadow: var(--text) 0px 10px 20px -10px;
 83 | 
 84 |                 & label {
 85 |                     padding: 5px;
 86 |                     cursor: pointer;
 87 |                     background-color: var(--background);
 88 | 
 89 |                     gap: 5px;
 90 |                     display: flex;
 91 |                     align-items: center;
 92 |                     justify-content: center;
 93 | 
 94 |                     opacity: 0.8;
 95 |                     transition: opacity 0.3s;
 96 | 
 97 |                     &:hover {
 98 |                         opacity: 1;
 99 |                     }
100 |                 }
101 | 
102 |                 & label:nth-child(1) {
103 |                     --text: #e7e4e9;
104 |                     --background: #110c13;
105 |                     --primary: #c1a4d2;
106 |                     --secondary: #5f2e7a;
107 |                     --accent: #9e4acd;
108 |                 }
109 | 
110 |                 & label:nth-child(2) {
111 |                     --text: #1a171c;
112 |                     --background: #f1ecf3;
113 |                     --primary: #4b2d5c;
114 |                     --secondary: #b685d1;
115 |                     --accent: #8431b4;
116 |                 }
117 | 
118 |                 & label:nth-child(3) {
119 |                     --text: #e1dafb;
120 |                     --background: #030109;
121 |                     --primary: #987df2;
122 |                     --secondary: #8b0f99;
123 |                     --accent: #ea2ed1;
124 |                 }
125 | 
126 |                 & label:nth-child(4) {
127 |                     --text: #0b0425;
128 |                     --background: #f8f6fe;
129 |                     --primary: #280d82;
130 |                     --secondary: #e266f0;
131 |                     --accent: #d115b8;
132 |                 }
133 |             }
134 | 
135 |             &:hover [theme-s] {
136 |                 display: block;
137 |             }
138 |         }
139 | 
140 |         :root:has([theme-s] label:nth-child(1)>input:checked) {
141 |             --text: #e7e4e9;
142 |             --background: #110c13;
143 |             --primary: #c1a4d2;
144 |             --secondary: #5f2e7a;
145 |             --accent: #9e4acd;
146 |         }
147 | 
148 |         :root:has([theme-s] label:nth-child(2)>input:checked) {
149 |             --text: #1a171c;
150 |             --background: #f1ecf3;
151 |             --primary: #4b2d5c;
152 |             --secondary: #b685d1;
153 |             --accent: #8431b4;
154 |         }
155 | 
156 |         :root:has([theme-s] label:nth-child(3)>input:checked) {
157 |             --text: #e1dafb;
158 |             --background: #030109;
159 |             --primary: #987df2;
160 |             --secondary: #8b0f99;
161 |             --accent: #ea2ed1;
162 |         }
163 | 
164 |         :root:has([theme-s] label:nth-child(4)>input:checked) {
165 |             --text: #0b0425;
166 |             --background: #f8f6fe;
167 |             --primary: #280d82;
168 |             --secondary: #e266f0;
169 |             --accent: #d115b8;
170 |         }
171 | 
172 |         /* hide the default radio indicator*/
173 |         input[type="radio"],
174 |         input[type="checkbox"] {
175 |             width: 0;
176 |             opacity: 0;
177 |             cursor: pointer;
178 |             position: absolute;
179 |         }
180 | 
181 |         /* associate the label for the radio button clickable */
182 |         label:has(>input[type="radio"]),
183 |         label:has(>input[type="checkbox"]) {
184 |             cursor: pointer;
185 |         }
186 | 
187 |         nav {
188 |             margin: 20px;
189 |             font-size: 1.5rem;
190 |             position: relative;
191 | 
192 |             gap: 50px;
193 |             display: inline-flex;
194 | 
195 |             & label {
196 |                 opacity: 0.6;
197 |                 color: var(--primary);
198 |                 transition: opacity 0.3s;
199 |             }
200 | 
201 |             & label:hover,
202 |             & label:has(>input:checked) {
203 |                 opacity: 1;
204 |             }
205 | 
206 |             & [nav-indicator] {
207 |                 color: var(--accent);
208 |                 position: absolute;
209 |                 pointer-events: none;
210 | 
211 |                 transition: left 0.3s, width 0.3s;
212 | 
213 |                 display: inline-flex;
214 |                 align-items: center;
215 |                 justify-content: space-between;
216 | 
217 |                 &::before {
218 |                     content: "[";
219 |                 }
220 | 
221 |                 &::after {
222 |                     content: "]";
223 |                 }
224 |             }
225 | 
226 |             &:has(label[nav-todo]>input:checked) [nav-indicator] {
227 |                 left: -1ch;
228 |                 width: 5.7ch;
229 |             }
230 | 
231 |             &:has(label[nav-done]>input:checked) [nav-indicator] {
232 |                 left: calc(100% - 5.1ch);
233 |                 width: 6.1ch;
234 |             }
235 |         }
236 | 
237 |         main {
238 |             padding: 0 2.3ch;
239 | 
240 |             & [add-btn] {
241 |                 padding: 5px;
242 |                 border-radius: 5px;
243 |                 position: absolute;
244 |                 transform: translateY(5px);
245 | 
246 |                 color: var(--background);
247 |                 background-color: var(--primary);
248 | 
249 |                 transition: opacity 0.3s, transform 0.3s;
250 | 
251 |                 &:hover {
252 |                     opacity: 0.9;
253 |                     transform: scale(1.1) translateY(5px);
254 |                 }
255 |             }
256 | 
257 |             & [add-btn]:has(>input:checked) {
258 |                 display: none;
259 |             }
260 | 
261 |             & [add-btn]:not(:has(>input:checked))~[add-btn] {
262 |                 display: none;
263 |             }
264 | 
265 |             & [add-btn]:has(>input:not(:checked))+.todo-data {
266 |                 display: none;
267 |             }
268 |         }
269 | 
270 |         body:has(label[nav-done]>input:checked) [add-btn] {
271 |             display: none;
272 |         }
273 | 
274 |         .todo-data {
275 |             display: flex;
276 |             align-self: center;
277 |             gap: 1ch;
278 | 
279 |             & [done-btn] {
280 |                 font-size: 1.2rem;
281 |                 color: transparent;
282 | 
283 |                 &:hover {
284 |                     color: var(--secondary);
285 |                 }
286 | 
287 |                 &:active {
288 |                     color: var(--primary);
289 |                     transform: scale(1.5);
290 |                 }
291 | 
292 |                 &::before {
293 |                     content: "[";
294 |                     color: var(--accent);
295 |                 }
296 | 
297 |                 &::after {
298 |                     content: "]";
299 |                     color: var(--accent);
300 |                 }
301 |             }
302 | 
303 |             & [done-btn]:has(>input:checked) {
304 |                 color: var(--secondary);
305 |             }
306 | 
307 |             & input[type="text"] {
308 |                 flex-grow: 1;
309 |                 border: none;
310 |                 color: inherit;
311 |                 background-color: transparent;
312 | 
313 |                 padding: 1px 1ch;
314 |                 font-size: 1.2rem;
315 | 
316 |                 opacity: 0.6;
317 |                 border-left: 0.15em solid var(--accent);
318 | 
319 |                 transition: opacity 0.3s;
320 | 
321 |                 &:focus {
322 |                     outline: none;
323 |                     opacity: 1;
324 |                 }
325 |             }
326 | 
327 |             &:hover input[type="text"] {
328 |                 opacity: 1;
329 |             }
330 |         }
331 | 
332 |         body:has(label[nav-todo]>input:checked) .todo-data:has(label[done-btn]>input:checked) {
333 |             display: none;
334 |         }
335 | 
336 |         body:has(label[nav-done]>input:checked) .todo-data:not(:has(label[done-btn]>input:checked)) {
337 |             display: none;
338 |         }
339 |     </style>
340 | </head>
341 | 
342 | <body>
343 |     <h1>Pure CSS ToDo App
344 |         <div theme-picker>
345 |             <span prev-primary></span>
346 |             <span prev-secondary></span>
347 |             <span prev-accent></span>
348 |             <span prev-text></span>
349 |             <div theme-s>
350 |                 <label>
351 |                     <input type="radio" name="theme" checked="checked">
352 |                     <span prev-primary></span>
353 |                     <span prev-secondary></span>
354 |                     <span prev-accent></span>
355 |                     <span prev-text></span>
356 |                 </label>
357 |                 <label>
358 |                     <input type="radio" name="theme">
359 |                     <span prev-primary></span>
360 |                     <span prev-secondary></span>
361 |                     <span prev-accent></span>
362 |                     <span prev-text></span>
363 |                 </label>
364 |                 <label>
365 |                     <input type="radio" name="theme">
366 |                     <span prev-primary></span>
367 |                     <span prev-secondary></span>
368 |                     <span prev-accent></span>
369 |                     <span prev-text></span>
370 |                 </label>
371 |                 <label>
372 |                     <input type="radio" name="theme">
373 |                     <span prev-primary></span>
374 |                     <span prev-secondary></span>
375 |                     <span prev-accent></span>
376 |                     <span prev-text></span>
377 |                 </label>
378 |             </div>
379 |         </div>
380 |     </h1>
381 |     <nav>
382 |         <label nav-todo>
383 |             <input type="radio" name="tab-switcher" checked="checked">Todo
384 |         </label>
385 |         <label nav-done>
386 |             <input type="radio" name="tab-switcher">Done
387 |         </label>
388 |         <span nav-indicator></span>
389 |     </nav>
390 | 
391 |     <main todo-database>
392 |         <label add-btn>+<input type="radio"></label>
393 |         <div class="todo-data">
394 |             <label done-btn>✓<input type="checkbox"></label>
395 |             <input type="text">
396 |         </div>
397 |         <label add-btn>+<input type="radio"></label>
398 |         <div class="todo-data">
399 |             <label done-btn>✓<input type="checkbox"></label>
400 |             <input type="text">
401 |         </div>
402 |         <label add-btn>+<input type="radio"></label>
403 |         <div class="todo-data">
404 |             <label done-btn>✓<input type="checkbox"></label>
405 |             <input type="text">
406 |         </div>
407 |         <label add-btn>+<input type="radio"></label>
408 |         <div class="todo-data">
409 |             <label done-btn>✓<input type="checkbox"></label>
410 |             <input type="text">
411 |         </div>
412 |         <label add-btn>+<input type="radio"></label>
413 |         <div class="todo-data">
414 |             <label done-btn>✓<input type="checkbox"></label>
415 |             <input type="text">
416 |         </div>
417 |         <label add-btn>+<input type="radio"></label>
418 |         <div class="todo-data">
419 |             <label done-btn>✓<input type="checkbox"></label>
420 |             <input type="text">
421 |         </div>
422 |         <label add-btn>+<input type="radio"></label>
423 |         <div class="todo-data">
424 |             <label done-btn>✓<input type="checkbox"></label>
425 |             <input type="text">
426 |         </div>
427 |         <label add-btn>+<input type="radio"></label>
428 |         <div class="todo-data">
429 |             <label done-btn>✓<input type="checkbox"></label>
430 |             <input type="text">
431 |         </div>
432 |         <label add-btn>+<input type="radio"></label>
433 |         <div class="todo-data">
434 |             <label done-btn>✓<input type="checkbox"></label>
435 |             <input type="text">
436 |         </div>
437 |         <label add-btn>+<input type="radio"></label>
438 |         <div class="todo-data">
439 |             <label done-btn>✓<input type="checkbox"></label>
440 |             <input type="text">
441 |         </div>
442 |         <label add-btn>+<input type="radio"></label>
443 |         <div class="todo-data">
444 |             <label done-btn>✓<input type="checkbox"></label>
445 |             <input type="text">
446 |         </div>
447 |         <label add-btn>+<input type="radio"></label>
448 |         <div class="todo-data">
449 |             <label done-btn>✓<input type="checkbox"></label>
450 |             <input type="text">
451 |         </div>
452 |         <label add-btn>+<input type="radio"></label>
453 |         <div class="todo-data">
454 |             <label done-btn>✓<input type="checkbox"></label>
455 |             <input type="text">
456 |         </div>
457 |         <label add-btn>+<input type="radio"></label>
458 |         <div class="todo-data">
459 |             <label done-btn>✓<input type="checkbox"></label>
460 |             <input type="text">
461 |         </div>
462 |         <label add-btn>+<input type="radio"></label>
463 |         <div class="todo-data">
464 |             <label done-btn>✓<input type="checkbox"></label>
465 |             <input type="text">
466 |         </div>
467 |         <label add-btn>+<input type="radio"></label>
468 |         <div class="todo-data">
469 |             <label done-btn>✓<input type="checkbox"></label>
470 |             <input type="text">
471 |         </div>
472 |         <label add-btn>+<input type="radio"></label>
473 |         <div class="todo-data">
474 |             <label done-btn>✓<input type="checkbox"></label>
475 |             <input type="text">
476 |         </div>
477 |         <label add-btn>+<input type="radio"></label>
478 |         <div class="todo-data">
479 |             <label done-btn>✓<input type="checkbox"></label>
480 |             <input type="text">
481 |         </div>
482 |         <label add-btn>+<input type="radio"></label>
483 |         <div class="todo-data">
484 |             <label done-btn>✓<input type="checkbox"></label>
485 |             <input type="text">
486 |         </div>
487 |         <label add-btn>+<input type="radio"></label>
488 |         <div class="todo-data">
489 |             <label done-btn>✓<input type="checkbox"></label>
490 |             <input type="text">
491 |         </div>
492 |         <label add-btn>+<input type="radio"></label>
493 |         <div class="todo-data">
494 |             <label done-btn>✓<input type="checkbox"></label>
495 |             <input type="text">
496 |         </div>
497 |         <label add-btn>+<input type="radio"></label>
498 |         <div class="todo-data">
499 |             <label done-btn>✓<input type="checkbox"></label>
500 |             <input type="text">
501 |         </div>
502 |         <label add-btn>+<input type="radio"></label>
503 |         <div class="todo-data">
504 |             <label done-btn>✓<input type="checkbox"></label>
505 |             <input type="text">
506 |         </div>
507 |         <label add-btn>+<input type="radio"></label>
508 |         <div class="todo-data">
509 |             <label done-btn>✓<input type="checkbox"></label>
510 |             <input type="text">
511 |         </div>
512 |         <label add-btn>+<input type="radio"></label>
513 |         <div class="todo-data">
514 |             <label done-btn>✓<input type="checkbox"></label>
515 |             <input type="text">
516 |         </div>
517 |         <label add-btn>+<input type="radio"></label>
518 |         <div class="todo-data">
519 |             <label done-btn>✓<input type="checkbox"></label>
520 |             <input type="text">
521 |         </div>
522 |         <label add-btn>+<input type="radio"></label>
523 |         <div class="todo-data">
524 |             <label done-btn>✓<input type="checkbox"></label>
525 |             <input type="text">
526 |         </div>
527 |         <label add-btn>+<input type="radio"></label>
528 |         <div class="todo-data">
529 |             <label done-btn>✓<input type="checkbox"></label>
530 |             <input type="text">
531 |         </div>
532 |         <label add-btn>+<input type="radio"></label>
533 |         <div class="todo-data">
534 |             <label done-btn>✓<input type="checkbox"></label>
535 |             <input type="text">
536 |         </div>
537 |         <label add-btn>+<input type="radio"></label>
538 |         <div class="todo-data">
539 |             <label done-btn>✓<input type="checkbox"></label>
540 |             <input type="text">
541 |         </div>
542 |         <label add-btn>+<input type="radio"></label>
543 |         <div class="todo-data">
544 |             <label done-btn>✓<input type="checkbox"></label>
545 |             <input type="text">
546 |         </div>
547 |         <label add-btn>+<input type="radio"></label>
548 |         <div class="todo-data">
549 |             <label done-btn>✓<input type="checkbox"></label>
550 |             <input type="text">
551 |         </div>
552 |         <label add-btn>+<input type="radio"></label>
553 |         <div class="todo-data">
554 |             <label done-btn>✓<input type="checkbox"></label>
555 |             <input type="text">
556 |         </div>
557 |         <label add-btn>+<input type="radio"></label>
558 |         <div class="todo-data">
559 |             <label done-btn>✓<input type="checkbox"></label>
560 |             <input type="text">
561 |         </div>
562 |         <label add-btn>+<input type="radio"></label>
563 |         <div class="todo-data">
564 |             <label done-btn>✓<input type="checkbox"></label>
565 |             <input type="text">
566 |         </div>
567 |         <label add-btn>+<input type="radio"></label>
568 |         <div class="todo-data">
569 |             <label done-btn>✓<input type="checkbox"></label>
570 |             <input type="text">
571 |         </div>
572 |         <label add-btn>+<input type="radio"></label>
573 |         <div class="todo-data">
574 |             <label done-btn>✓<input type="checkbox"></label>
575 |             <input type="text">
576 |         </div>
577 |         <label add-btn>+<input type="radio"></label>
578 |         <div class="todo-data">
579 |             <label done-btn>✓<input type="checkbox"></label>
580 |             <input type="text">
581 |         </div>
582 |         <label add-btn>+<input type="radio"></label>
583 |         <div class="todo-data">
584 |             <label done-btn>✓<input type="checkbox"></label>
585 |             <input type="text">
586 |         </div>
587 |         <label add-btn>+<input type="radio"></label>
588 |         <div class="todo-data">
589 |             <label done-btn>✓<input type="checkbox"></label>
590 |             <input type="text">
591 |         </div>
592 |         <label add-btn>+<input type="radio"></label>
593 |         <div class="todo-data">
594 |             <label done-btn>✓<input type="checkbox"></label>
595 |             <input type="text">
596 |         </div>
597 |         <label add-btn>+<input type="radio"></label>
598 |         <div class="todo-data">
599 |             <label done-btn>✓<input type="checkbox"></label>
600 |             <input type="text">
601 |         </div>
602 |         <label add-btn>+<input type="radio"></label>
603 |         <div class="todo-data">
604 |             <label done-btn>✓<input type="checkbox"></label>
605 |             <input type="text">
606 |         </div>
607 |         <label add-btn>+<input type="radio"></label>
608 |         <div class="todo-data">
609 |             <label done-btn>✓<input type="checkbox"></label>
610 |             <input type="text">
611 |         </div>
612 |         <label add-btn>+<input type="radio"></label>
613 |         <div class="todo-data">
614 |             <label done-btn>✓<input type="checkbox"></label>
615 |             <input type="text">
616 |         </div>
617 |         <label add-btn>+<input type="radio"></label>
618 |         <div class="todo-data">
619 |             <label done-btn>✓<input type="checkbox"></label>
620 |             <input type="text">
621 |         </div>
622 |         <label add-btn>+<input type="radio"></label>
623 |         <div class="todo-data">
624 |             <label done-btn>✓<input type="checkbox"></label>
625 |             <input type="text">
626 |         </div>
627 |         <label add-btn>+<input type="radio"></label>
628 |         <div class="todo-data">
629 |             <label done-btn>✓<input type="checkbox"></label>
630 |             <input type="text">
631 |         </div>
632 |         <label add-btn>+<input type="radio"></label>
633 |         <div class="todo-data">
634 |             <label done-btn>✓<input type="checkbox"></label>
635 |             <input type="text">
636 |         </div>
637 |         <label add-btn>+<input type="radio"></label>
638 |         <div class="todo-data">
639 |             <label done-btn>✓<input type="checkbox"></label>
640 |             <input type="text">
641 |         </div>
642 |         <label add-btn>+<input type="radio"></label>
643 |         <div class="todo-data">
644 |             <label done-btn>✓<input type="checkbox"></label>
645 |             <input type="text">
646 |         </div>
647 |         <label add-btn>+<input type="radio"></label>
648 |         <div class="todo-data">
649 |             <label done-btn>✓<input type="checkbox"></label>
650 |             <input type="text">
651 |         </div>
652 |         <label add-btn>+<input type="radio"></label>
653 |         <div class="todo-data">
654 |             <label done-btn>✓<input type="checkbox"></label>
655 |             <input type="text">
656 |         </div>
657 |         <label add-btn>+<input type="radio"></label>
658 |         <div class="todo-data">
659 |             <label done-btn>✓<input type="checkbox"></label>
660 |             <input type="text">
661 |         </div>
662 |         <label add-btn>+<input type="radio"></label>
663 |         <div class="todo-data">
664 |             <label done-btn>✓<input type="checkbox"></label>
665 |             <input type="text">
666 |         </div>
667 |         <label add-btn>+<input type="radio"></label>
668 |         <div class="todo-data">
669 |             <label done-btn>✓<input type="checkbox"></label>
670 |             <input type="text">
671 |         </div>
672 |         <label add-btn>+<input type="radio"></label>
673 |         <div class="todo-data">
674 |             <label done-btn>✓<input type="checkbox"></label>
675 |             <input type="text">
676 |         </div>
677 |         <label add-btn>+<input type="radio"></label>
678 |         <div class="todo-data">
679 |             <label done-btn>✓<input type="checkbox"></label>
680 |             <input type="text">
681 |         </div>
682 |         <label add-btn>+<input type="radio"></label>
683 |         <div class="todo-data">
684 |             <label done-btn>✓<input type="checkbox"></label>
685 |             <input type="text">
686 |         </div>
687 |         <label add-btn>+<input type="radio"></label>
688 |         <div class="todo-data">
689 |             <label done-btn>✓<input type="checkbox"></label>
690 |             <input type="text">
691 |         </div>
692 |         <label add-btn>+<input type="radio"></label>
693 |         <div class="todo-data">
694 |             <label done-btn>✓<input type="checkbox"></label>
695 |             <input type="text">
696 |         </div>
697 |         <label add-btn>+<input type="radio"></label>
698 |         <div class="todo-data">
699 |             <label done-btn>✓<input type="checkbox"></label>
700 |             <input type="text">
701 |         </div>
702 |         <label add-btn>+<input type="radio"></label>
703 |         <div class="todo-data">
704 |             <label done-btn>✓<input type="checkbox"></label>
705 |             <input type="text">
706 |         </div>
707 |         <label add-btn>+<input type="radio"></label>
708 |         <div class="todo-data">
709 |             <label done-btn>✓<input type="checkbox"></label>
710 |             <input type="text">
711 |         </div>
712 |     </main>
713 | </body>
714 | 
715 | </html>


--------------------------------------------------------------------------------