To-Do App in JavaScript
Render from state, never edit the page in place — the idea every framework is built on.
- JavaScript
- CSS
- HTML
About this project
Add, tick, edit, delete, filter, drag to reorder and clear the finished ones, saved in localStorage so the list survives a reload. No framework, no build step, nothing fetched from the network.
The idea it is built around is that the list on screen is a pure function of one array. Ticking a box does not find that row and cross it out — it flips a boolean and asks for a redraw. That sounds like extra work until the fourth feature, and the README is specific about where the other approach breaks: once a filter exists, the function that ticks a box also has to decide whether the row still belongs on screen, update the counter, and do it identically in every code path. Miss one and something on screen disagrees with something else on screen.
The second theme is that localStorage is a stranger. It stores strings, so loading means JSON.parse on whatever happens to be there — someone else's key, a half-written value, or your own older format. This app validates every item, namespaces its key, versions its schema, and moves unreadable data aside rather than deleting it.
What you will learn
- Keep one array as the only truth and redraw from it, instead of patching the DOM by hand
- See why the in-place version stops scaling at about the fourth feature
- Treat data read back from localStorage as untrusted input, not as your own objects
- Version a saved schema, and refuse to overwrite data written by a newer version
- Build filters, inline editing and drag-to-reorder without any of them knowing about each other
Before you start
- JavaScript basics — arrays, objects and events
- A browser and a text editor. Nothing to install.
New to JavaScript? The free JavaScript course covers everything this project assumes.
Academic integrity notice
These projects are provided for learning, experimentation and reference. Understand the code, modify it for your own requirements, and acknowledge external work according to your institution’s academic policies. Priodemy does not supply work to be submitted as your own.
Features
- One array as the only state, with every action going through a redraw
- Filters, inline editing, drag to reorder, clear completed, and an undo message
- Saved data validated item by item, with a versioned schema
- Unreadable saved data quarantined rather than discarded, and the app says so
- Storage failures handled — it keeps working in memory and tells you persistence is off
- Real checkboxes and buttons, live-region announcements, fully keyboard operable
Technology stack
Track: Web Development · Level: Starter
What is included
- index.html, style.css and script.js — commented throughout
- A README on render-from-state and on the four ways saved data betrays you
- Suggested extensions, including an undo stack and cross-tab sync
Delivered as a 22 KB ZIP. SHA-256 published under Changelog so you can verify it.
System requirements
- Operating system
- Any
- Runtime
- Any modern browser. No install, no build step.
Licence
Learn from it, change it, and use it in your own coursework and personal projects. Do not resell it or pass it off as your own original work.
- Personal and educational use
- Modifying the code however you like
- Using it as the basis of your own coursework, with honest acknowledgement
- Putting your modified version in a portfolio or on your own GitHub
- Reselling or redistributing the project, modified or not
- Presenting it as your own original work
- Commercial deployment — see the Commercial licence
Support window: 6 months from download.
Frequently asked
Why redraw everything instead of just changing the one row?
Because the "just change the one row" version has to be taught about every feature you add. After a filter, a counter and a reorder, the function that ticks a box touches five unrelated parts of the page and the bug is always the same: one path forgot one of them. Redrawing means the counter and the filter are worked out once, from the only copy of the truth.
Is redrawing the whole list not slow?
At this size it is imperceptible, and the README says so rather than pretending otherwise. Making the redraw cheap — working out the smallest change instead of replacing everything — is exactly what a framework earns its place doing, and it is the last suggested extension.
Where is my data stored?
In this browser on this machine, under a key named after the app. There is no account and no server. Clearing your browser data clears the list, and the app can tell you when the browser has refused it permission to save.
Changelog
- First release
SHA-256285d50195ba1bed118c3e30979e6cae0030e026cb47dc3b33811a42352c9effb
You might also like
Free Personal Portfolio Website
A responsive portfolio in plain HTML and CSS — no framework, no build step.
- HTML
- CSS
Free Snake Game
The classic game in about 180 lines of plain JavaScript and a canvas.
- JavaScript
- Canvas
- HTML
Free Tic-Tac-Toe with AI
An opponent that plays perfectly, using minimax with alpha-beta pruning.
- JavaScript
- Minimax
- HTML
Free Typing Speed Test
A speed test that shows its own arithmetic, because WPM is a definition rather than a measurement.
- JavaScript
- CSS
- HTML