Habit Tracker That Survives a Reload
Hard · Reducers
Build a habit tracker whose state survives a page reload. Goal: practise useReducer and syncing it to window.localStorage.
The finished App has a "Reload page" button that remounts HabitTracker, like a real reload. In HabitTracker:
- <input className="new-habit"> + "Add" adds a habit (trimmed; empty names and duplicates, ignoring case, are ignored)
- each habit is an <li> with <label><input type="checkbox" /> Read</label>; a checked habit is done and its <li> has the class done
- <p className="progress">1 of 3 done</p>; "Reset day" unchecks all habits
After every change save the habits as JSON under the key "habit-tracker", e.g. [{"name":"Run","done":true}]. On mount load them; if nothing is saved or the data is broken, start with "Drink water" and "Read", not done.