⚔ Fantasyland Quest Log

The running project for KickstartX - JS (Shani Titelbaum, Wix). One vanilla-Vite app, built up across all seven lessons - by the end it fetches real data from a public API and renders an interactive character roster.

For students

1. Fork this project (top-right in StackBlitz) so you have your own copy to save.
2. Open the Console tab to see output. From Lesson 5 on, characters render on the page too.
3. Work through the // TODO markers in the current lesson file under src/lessons/.
4. Your instructor will tell you which lesson file is active (it is set in src/main.js).

You don't install anything - StackBlitz runs it all in the browser.

Project layout

quest-log/
  index.html                   # app shell (console + #roster page area)
  src/
    main.js                    # imports the ACTIVE lesson file (one at a time)
    style.css                  # Wix-branded styling (cards, hp bars, controls)
    lessons/
      lesson-01-character.js   # Language Core - variables, types, scope, coercion
      lesson-02-conditions.js  # Conditions, Loops & Equality
      lesson-03-functions.js   # Functions, Closures & this
      lesson-04-arrays-objects.js # Arrays & Objects
      lesson-05-dom.js         # The DOM (renders to the page)
      lesson-06-events.js      # Events (the page listens)
      lesson-07-async.js       # Async JS (capstone - real fetch)
  solutions/                   # instructor copies - completed + annotated (kept private)

Each lesson is one project step that builds on the previous. Lessons 5-7 are self-contained: they include the renderParty helper "built" in Lesson 5, so the active file always runs on its own.

---

For the instructor (Shani)

Switching the active lesson

Open src/main.js and activate exactly one import (comment out the rest):

import "./lessons/lesson-01-character.js"; // Lesson 1
// import "./lessons/lesson-02-conditions.js"; // Lesson 2
// import "./lessons/lesson-03-functions.js";  // Lesson 3
// import "./lessons/lesson-04-arrays-objects.js"; // Lesson 4
// import "./lessons/lesson-05-dom.js";        // Lesson 5
// import "./lessons/lesson-06-events.js";     // Lesson 6
// import "./lessons/lesson-07-async.js";      // Lesson 7

To reveal answers in the wrap-up, point the import at the matching solutions/ file (e.g. import "../solutions/lesson-01-solution.js";), or just open the solution file in the editor and walk through it.

Recommended flow per exercise

1. Students fork and work the starter TODOs.
2. In the wrap-up, open the matching file in solutions/ and walk through why each answer is right - the coercion and equality traps are where the "aha" lands, and Lesson 7 has a subtle trap in how HP is derived from the API data. (Specifics are in the solution files, kept out of this public repo.)
3. Then improvise live on top of the solution to show it's not magic.

Deploying for class (one-time setup)

1. Push this folder to a public GitHub repo - but keep solutions/ out of it (see below) so answers aren't visible until you reveal them.
2. Share this URL; students click Fork: https://stackblitz.com/github/<your-org>/<repo>

Keeping solutions/ private

solutions/ is listed in .gitignore, so it is never committed to the public repo - your local copy stays on your machine. To version the answers, keep them in a separate private repo (or a private branch you don't push to the public remote). During class you reveal them from your local editor.

Run locally (optional - StackBlitz needs none of this)

Requires Node 18+ (Vite 5). On a Wix machine npm defaults to the internal registry, so point it at the public one:

npm install --registry=https://registry.npmjs.org
npm run dev