https://github.com/mattzeunert/CSS-Todo-App
Basic todo app functionality without using JavaScript
https://github.com/mattzeunert/CSS-Todo-App
css
Last synced: over 1 year ago
JSON representation
Basic todo app functionality without using JavaScript
- Host: GitHub
- URL: https://github.com/mattzeunert/CSS-Todo-App
- Owner: mattzeunert
- License: mit
- Created: 2017-10-28T05:09:54.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-10-23T11:06:28.000Z (over 5 years ago)
- Last Synced: 2025-03-10T14:06:19.134Z (over 1 year ago)
- Topics: css
- Language: HTML
- Homepage: http://www.mattzeunert.com/TodoCSS/#/
- Size: 73.2 KB
- Stars: 136
- Watchers: 8
- Forks: 31
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- stars - mattzeunert/CSS-Todo-App
README
# CSS Todo App
Basic todo app functionality implemented without using JavaScript.
Instead it uses pre-rendered HTML, the ~ combinator, CSS counters, and
the :checked and :target pseudo selectors.
Styling based on [TodoMVC](http://todomvc.com/).
[Live demo](http://www.mattzeunert.com/TodoCSS/#/)
[Blog post on how it works](http://www.mattzeunert.com/2017/10/30/javascript-free-todo-app.html)
## What works
- Add new todo item (up to 50 items)
- Mark items as done
- Delete items
- Filter items (done/not done)
- Show number of items left to do
- Don't allow add empty items
## What doesn't work
- Persistence after page reload
- Mark all as done
- Create item by pressing enter
## Source code
`node generate.js` creates the `index.html` file. `todos.css` contains the styles.