{"repo":"DuskyElf/todo-css","free":true,"listed":false,"github":"https://github.com/DuskyElf/todo-css","clone":"git clone https://github.com/DuskyElf/todo-css.git","description":"A ToDo app made in pure HTML and CSS without using JS","language":"HTML","stars":35,"topics":["css","html","nojs","todo-app","pure-css"],"license":"MIT","category":"productivity","readme_excerpt":"Pure CSS Todo App 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! It's live on - https://duskyelf.github.io/todo-css/ How It Works? State Management: HTML Form Controls The magic happens through cleverly placed input elements that manage our app's state: These inputs are still functional but hidden from view with some CSS tricks: 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. Here's a quick example: 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. \"Database\" Structure Our app's \"database\" is really just a collection of pre-defined HTML elements: This gives us a fixed number of todo slots (pre-allocated in the HTML). We show or","default_branch":null,"files":null,"tree":[],"storefront":"/r/DuskyElf","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/DuskyElf/todo-css/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}