asd295 / css-todo-app

Basic todo app functionality without using JavaScript

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.

Live demo
Blog post on how it works

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.