Habit Garden Web Application
Sophia creates an interactive Svelte Habit Garden app with a live application preview.
Svelte application · generated web app · application preview · interactive app · habit tracker
Last updated:
Create a polished interactive Svelte habit garden web application. It should show three habit cards, a filter input, clickable habit selection, and a button that updates a visible streak counter.
I'll create a polished, interactive "Habit Garden" web application using Svelte 5. It uses the new Svelte 5 runic syntax (`$state` and `$derived`) to manage the reactive state for filtering, selection, and the streak counters. Here is the complete runnable app: ### Features include: 1. **Svelte 5 Runes**: Built using the modern reactive primitives (`$state` and `$derived`) which automatically keep the UI and data in sync. 2. **Interactive Selection**: Click any of the three habit cards to "target" them-they'll elevate slightly and gain a bright green border. 3. **Streak Logic & Plant Growth**: Every time you click "Water Selected Habit", the streak increments. As your streak hits certain milestones (3, 7, 15), the text label shows your habit growing from a "New Seed" to a "Thriving Tree". 4. **Instant Filtering**: Type in the search box at the top to dynamically filter the habit cards.