QuestLog

• 

  The landing page

• 

  Questlog's loading page

• 

  Responsive layout

Inspiration

Most to-do apps are efficient but forgettable. You check a box and nothing happens, so motivation fades, especially for habits like exercise, studying or networking. We looked at why video games are so good at keeping people engaged: instant feedback, visible progress, loot, levels and consequences. We asked: what if your real-life tasks gave you the same rewards? QuestLog turns your daily to-dos into a role-playing adventure where finishing work feels like winning.

What it does

Quests: create tasks as quests with an Easy, Medium or Hard difficulty and a discipline (Strength, Intellect or Charisma). Completing them earns XP and gold, levels up your hero and unlocks rank titles. Loot drops and inventory: Hard quests drop a bouncing treasure chest that flips to reveal gear in four rarity tiers. You equip items on a paper-doll character. Skill trees: each discipline levels up on its own and unlocks passive bonuses on an SVG skill tree. Dungeon Raid: a Pomodoro-style Boss Room. If you switch tabs, combat pauses, a “Boss is attacking!” notification fires and you take damage. Winning earns big rewards. Tavern Shop: spend gold on four themes (Pixel Dungeon, Cyberpunk Neon, Elven Woods, Crimson Vampire) and switch instantly. Hero’s Ledger: a parchment chronicle with themed Chart.js charts and fantasy-worded stats like “Most Valorous Day.” Spell-Book backup: export your hero to a JSON file and import it on another browser.

How we built it

We used HTML, Tailwind CSS (via CDN) and vanilla JavaScript, with no build step. The base app handles quests, XP, gold and autosave to localStorage. The six features and the theme system were added as a separate add-on script that injects its own UI and wraps the existing functions, so the original code stayed untouched.

Themes use CSS custom properties and a data-theme attribute on the root element. Loot uses a weight-based random number generator over item tables grouped by rarity. Skill tree is drawn in SVG, with a separate vertical layout for phones. Raid timer uses the Page Visibility and Web Notifications APIs. Ledger uses Chart.js with custom fonts, colors and pin-style tooltips. Backup uses Blob, URL.createObjectURL and FileReader. Sound is synthesized with the Web Audio API, and particles run on Canvas.

We also added a responsive layer for phones and tablets, a themed 1.9-second loading screen, and a favicon that matches the logo. Claude (Anthropic) helped with the add-on code, the responsive layer and the write-ups.

Challenges we ran into

Adding big features without breaking the original. We wrapped existing functions instead of rewriting them, which meant managing script load order and shared global state carefully. Theming a Tailwind-heavy page. The original used hardcoded color classes, so we remapped them per theme with attribute-selector overrides. Staying responsive in every theme. Wide fonts like Press Start 2P overflowed on phones, and the skill tree became unreadable when scaled down. A fair focus timer. Browsers throttle background tabs, so the raid timer relies on real elapsed time and applies damage when you return. Misplaced floating text. Reward text appeared in the wrong place after scrolling until we pinned it to the screen. Backup with no server. Imported saves had to be validated and migrated to the new data format.

Accomplishments that we're proud of

Six major features plus a five-theme system added without removing anything from the original code. Theme switching that changes colors, fonts and backgrounds instantly, with no reload. A satisfying reward loop: chest flip, rarity glow, particles and synthesized sound, all without a single audio file. A mobile layout that keeps working across all themes, including a purpose-built skill tree for small screens. A fully offline-capable hero profile that can move between browsers with one file.

What we learned

Wrapping and extending existing functions is a safe way to grow a codebase. CSS variables and a data-theme attribute make instant theming simple. Reward feel comes from small details: sound, motion and rarity colors. Complex visuals like SVG trees need their own layouts on phones, not just scaling. Weighted random selection gives clean control over rare drops. Browser timers and visibility events behave differently across tabs and devices, so they need real testing.

What's next for QuestLog

Optional cloud sync and accounts, so progress follows you between devices. Recurring quests and streaks for daily habits. More gear, set bonuses and an item upgrade system. Boss variety with different mechanics, and raids that survive a page reload. Friends and guilds with shared quests, leaderboards and co-op raids. An installable PWA with offline support and reminder notifications. Deeper analytics, such as monthly summaries and discipline trends. Accessibility upgrades: keyboard navigation, screen-reader labels and a high-contrast theme. Automated tests and wider cross-device QA.

Built With

• api
• html
• javascript
• localstorage
• tailwindcss