---
title: "Life-Quest"
kind: student-project
location: "Holy Angel University"
tags: [students, student-work, introweb]
summary: "Turns tasks and habits into quests, with XP, streaks and badges."
---

*A final project from Introduction to Web Development, 2026 first semester. Part of [Four websites built with nothing but HTML, CSS and JavaScript](/calendar/2026-s1-introweb-students).*

<figure data-lightbox-group style="max-width: 22rem; margin: 0 0 var(--space-6, 2rem)"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/life-quest/square.webp"><img src="/media/projects/2026-1st-sem/life-quest/square.webp" width="1080" height="1080" alt="Life-Quest, the project's square image" loading="eager" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>

## What it is

Life-Quest is a productivity site dressed as an RPG. Add a quest, pick a category and an XP reward, build habit streaks, and earn badges in the reward hall.

Built with HTML, CSS and JavaScript.

## Why it is here

The look commits completely, gold serif and all. The team also published how much of it AI wrote, right at the top of the README, which is exactly the kind of honesty the course asks for.

## Find it

- Project: [github.com/aaronsalunga098-ai/Life-Quest](https://github.com/aaronsalunga098-ai/Life-Quest)
- Live: [aaronsalunga098-ai.github.io/Life-Quest](https://aaronsalunga098-ai.github.io/Life-Quest/)
- GitHub: [@aaronsalunga098-ai](https://github.com/aaronsalunga098-ai)

## Screenshots

<div class="gallery" data-lightbox-group style="--gallery-min: 14rem; align-items: start">
<figure class="gallery__item" style="grid-column: 1 / -1"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/life-quest/shot-1.webp"><img src="/media/projects/2026-1st-sem/life-quest/shot-1.webp" width="1280" height="800" alt="Life-Quest, screenshot 1 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
<figure class="gallery__item"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/life-quest/shot-2.webp"><img src="/media/projects/2026-1st-sem/life-quest/shot-2.webp" width="1280" height="800" alt="Life-Quest, screenshot 2 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
<figure class="gallery__item"><a class="gallery__link" data-lightbox href="/media/projects/2026-1st-sem/life-quest/shot-3.webp"><img src="/media/projects/2026-1st-sem/life-quest/shot-3.webp" width="1280" height="800" alt="Life-Quest, screenshot 3 of 3" loading="lazy" decoding="async" style="aspect-ratio:auto;height:auto;object-fit:contain"></a></figure>
</div>
