/Web Dev/Phase 2

Phase 2Days 13-28

JavaScript Essentials

Make things actually do things

Phase Goal

Read, write, and reason about modern JavaScript. End the phase with two interactive apps shipped to the web.

Progress

Notes

Open the written lectures for this course before checking off the phase topics.

Mini Projects

Trail-condition digest

Build an EquipmentPool class

Inspection queue triage

Live filter for public meeting records

Astronaut roster viewer

Ten shipped interface instruments

Projects

Community Pantry Dispatch Board

Public Art Walk Planner

Phase 2 Capstone — Two deployed civic tools

Day 13: JS Runtimes & The Mental Model

Install nvm: curl from nvm-sh repo (no sudo)nvm install --lts && nvm use --ltsnode -v, npm -vWhy nvm beats the official installer

Browser console (DevTools)<script> tag in HTMLNode REPL & node file.jsSame language, different APIs (no DOM in Node, no fs in browser)

let vs const (default to const)Why var is dead (function scope, hoisting)Block scope { } isolates let/constRe-assignment vs mutation

string, number, boolean, null, undefined, bigint, symboltypeof and the typeof null === "object" trapNumber gotchas: NaN, Infinity, 0.1 + 0.2Template literals: `${name}`String methods worth knowing: includes, slice, split, trim, replaceAll

Build 5 small calculations in the Node REPLFormat a date string with template literalsRound 0.1 + 0.2 to 1 decimal place using Number.toFixed

Day 14: Functions & Scope

Declaration: function add(a, b) { }Expression: const add = function(a, b) { }Arrow: const add = (a, b) => a + bWhen each fits (default to arrow for callbacks, declaration for top-level)

Defaults: function greet(name = "friend")Rest: function sum(...nums)Spread when calling: Math.max(...arr)Avoid arguments object in modern code

Inner function "captures" outer variablesWhy setTimeout in a loop confuses people (with var)Closure as private state (counter factory example)You'll use this every day in React

Same input → same output, no side effects = pureWhy pure is testable, predictable, parallelizableSide effects: DOM, network, console, mutationPush impure to the edges of your code

Functions that take or return functionsSetup for tomorrow's array methodsTiny example: build a memoize() utility

Day 15: Control Flow

if / else if / elseTernary for one-line returnsswitch + when to avoid (object lookup is usually cleaner)Early returns over deep nesting

for (let i = 0; ...)for...of for arraysfor...in for object keys (rarely; prefer Object.keys)while + do...whilebreak / continue

The 6 falsy: false, 0, "", null, undefined, NaNEverything else is truthy (including [] and {})Boolean(value) for explicit conversion!!value as a coerce-to-boolean trick

== triggers coercion (avoid)=== compares without coercion (always use)Object.is for NaN and -0 edge casesReference vs value equality for objects

FizzBuzz in 3 different styles (verbose, ternary, map)Print first 50 primesBuild a guessing game in Node (use prompt-sync)

Day 16: Arrays & Their Key Methods

Literal []; access by indexlength, push/pop, shift/unshiftMutating vs non-mutating (the big confusion)Array.from + Array.of constructors

map: transform each elementfilter: keep some elementsreduce: collapse to a single valuefind: first element matchingThese chain — practice chains

some / every — boolean checksflatMap — map then flattensort with comparator: arr.sort((a, b) => a - b)includes / indexOfNew non-mutating versions: toSorted, toReversed, toSpliced (ES2023)

forEach vs for...of (forEach can't break)When for-loop beats methods (early exit, perf-sensitive)Avoid forEach for async work

Take a JSON array of productsFilter by category, sort by price, render as HTML cardsPure functions only

Mini Project

Trail-condition digest

Given a hardcoded array of trail reports with route, difficulty, status, and last inspection, filter open routes, sort by inspection age, and render a compact digest using array methods only. No loops written by hand.

Day 17: Objects, Destructuring, Spread

Literal { key: value }Dot vs bracket access (bracket for dynamic keys)Shorthand: { name } instead of { name: name }Computed keys: { [dynamic]: value }

Object: const { name, age } = userArray: const [first, second] = arrDefaults: const { name = "anon" } = userRename: const { name: fullName } = userNested + rest combined

Spread copies (shallow): { ...obj }, [...arr]Override patterns: { ...defaults, ...userInput }Rest in destructuring: const { name, ...rest } = userAvoid deep-copy via JSON.stringify (use structuredClone)

Object.keys / values / entriesObject.fromEntries (great with map/filter on entries)Object.assign (mostly replaced by spread)structuredClone for deep copies

JSON.stringify / JSON.parseJSON.stringify(obj, null, 2) for pretty printingReviver / replacer functionsPitfalls: undefined, functions, Date, BigInt are lost

Day 18: Classes & OOP in JS

Objects with state + behaviour belong together — classes are a shape contractJS uses prototypes under the hood; class syntax is sugar over themWhen to reach for a class vs a plain object factory functionIn modern web work: rare in UI code, common in domain models, errors, services

class User { constructor(name) { this.name = name } }Methods: defined inside the body, no function keyword, no commasInstance fields: name = "anon" at class levelGetters / setters: get fullName() { ... }new User("Lucky") — what `new` actually does (creates object, binds this, returns it)

`this` is set by HOW the function is called, not where it was writtenInside a class method, `this` = the instance — usuallyLose it when you pass the method as a callback (setTimeout, addEventListener)Two fixes: arrow-function class fields, or .bind(this) in constructorArrow functions inherit `this` from their enclosing scope (no own `this`)

class AdminUser extends User { ... } — single-parent onlysuper(name) in constructor (mandatory before using `this`)super.method() to call parent methodOverride pattern: redeclare a method in the childComposition usually beats inheritance — prefer plain objects + functions when you can

static method/field — lives on the class itself, not instances (Math.max style)#privateField — true privacy enforced by the language (since 2022, safe in 2026)Naming convention _underscore = "soft private" (still accessible, just polite)When to use static factories: User.fromJSON(data)

Custom error types: class ApiError extends Error { ... }Domain models on the backend (User, Order, Invoice with methods like .total())Service / client wrappers: class StripeClient { charge() { ... } }Stateful utilities: class EventBus, class CacheWhen NOT to use: React components (use functions), small data bags (use objects), single-call helpers (use functions)

Every object has a hidden link to a prototype — that is the inheritance chainclass is just sugar: User.prototype.greet === instance.greetYou almost never write to .prototype directly anymore — but reading it in DevTools clarifies bugsObject.create(proto) — the only time you reach for it is library internals

Build an EquipmentPool class with a private #loans arrayAdd methods: add(item), remove(id), total() getter, and static empty() factoryThrow a custom CartError (extending Error) when removing an unknown idRun with node cart.js — no frameworks

Mini Project

Build an EquipmentPool class

Model a lending pool with private #loans, checkout(item), returnItem(id), availableCount getter, and a static empty() factory. Throw a custom LoanError when returning an unknown loan. No frameworks — run it with Node.

Day 19: DOM Manipulation

document.querySelector / querySelectorAllgetElementById (still fast, still useful)NodeList vs HTMLCollection (NodeList has forEach)Why we don't use document.write

textContent vs innerText vs innerHTML (and XSS)getAttribute / setAttributeclassList.add / remove / toggle / containsstyle for one-offs; classes for everything else

document.createElement + appendCloning templates with <template>Insertion: append, prepend, before, after, replaceWithinnerHTML for static markup (escape user input)

<button data-id="42"> in HTMLRead via element.dataset.idThe right way to pass IDs to JS handlers

One listener on the parent, check event.targetWhy: dynamic children, fewer listeners, perfclosest() for finding the right ancestorApply the pattern to an incoming inspection-report queue

Mini Project

Inspection queue triage

Render incoming inspection reports with resolve actions. Use one delegated click listener on the queue container and preserve the report ID through data attributes.

Day 20: Events

addEventListener(type, handler, options)Event object: target, currentTarget, typepreventDefault — what default actions exist (form submit, link click)stopPropagation — when you actually need it

Phase: capture → target → bubbleDefault phase is bubbleoptions: { capture: true } to catch in capture phaseoptions: { once: true, passive: true } for special cases

submit (on the form, not the button)input (every keystroke) vs change (on blur for some inputs)FormData object — read all fields at once

keydown vs keypress vs keyupevent.key vs event.codeBuild debounce(fn, ms) yourselfBuild throttle(fn, ms) yourselfUse debounce on a search input

Add a search input above the product gridFilter visible cards on input (debounced)Empty state when no matches

Mini Project

Live filter for public meeting records

Filter a meeting-record index by committee, topic, or speaker in real time. Debounce by 200ms and render a useful no-matches state.

Day 21: Async JS — The Event Loop

JavaScript is single-threaded"Blocking" = the thread is busy and nothing else runsNetwork, timers, file I/O are async — they don't block

Call stack: where sync code runsTask queue: setTimeout, I/O callbacksMicrotask queue: Promise.then, queueMicrotaskMicrotasks drain before next taskVisualize: loupe.tools or Lydia Hallie diagrams

setTimeout(fn, 0) — minimum 4ms in browserssetInterval (avoid for animation; prefer requestAnimationFrame)clearTimeout / clearIntervalqueueMicrotask for "after this tick"

Old style: nested callbacksWhy this collapses (error handling, ordering)Promise as a value representing a future resultTomorrow we use them properly

Day 22: Promises & fetch

pending → fulfilled (value) | rejected (reason)A promise can settle oncenew Promise((resolve, reject) => ...) — rare; usually use async

.then(value => ...) returns a new promise.catch(err => ...) catches anywhere upstream.finally(() => ...) for cleanupReturning a promise from then chains it

Promise.all — all succeed or first failurePromise.allSettled — wait for everything regardlessPromise.race — first to settle winsPromise.any — first to fulfill wins

fetch(url) returns Promise<Response>response.ok, response.status, response.json()POST: { method, headers, body: JSON.stringify(...) }fetch only rejects on network error — check ok yourself

Use a public people-in-space endpoint with no API keyRender results to the DOMHandle the loading state (spinner / text)

Mini Project

Astronaut roster viewer

Fetch the current people-in-space roster from a public API and render mission-grouped results. Show explicit loading, empty, stale, and failure states.

Day 23: async / await & Error Handling

async function returns a promiseawait pauses inside async functions onlyTop-level await in modulesRewrite yesterday's fetch with async/await

Wrap awaited codeRe-throw with context: throw new Error(`Fetch failed: ${e.message}`)Result/error tuple pattern: const [data, error] = await safe(promise)

const c = new AbortController(); fetch(url, { signal: c.signal })c.abort() cancels in-flight fetchesCritical for search-as-you-type

The three you always forgetBuild a tiny "request status" reducerApply to the astronaut roster — never a blank screen

Day 24: Storage, Dates, Numbers, Regex

setItem / getItem / removeItem / clearString-only — JSON.stringify on the way inQuota ~5–10MBUse for non-sensitive prefs only (no tokens)

new Date() — months are 0-indexed (yes, really)Date.now() for timestampsWhy we install date-fns or use TemporalTime zones are hard — store UTC, format on display

Intl.NumberFormat — currency, decimals, localesIntl.DateTimeFormat — readable datesIntl.RelativeTimeFormat — "2 hours ago"Intl.ListFormat — "a, b, and c"

/pattern/flags syntax; flags g, i, m, sCharacter classes: \d \w \s . [abc]Quantifiers: + * ? {n,m}Anchors: ^ $Capture groups (parens) and replace with $1regex101.com — your friend

Validate an email (cheap regex)Format a phone number 1234567890 → (123) 456-7890Parse a date in dd/mm/yyyy and reformat

Day 25: Modules, Bundlers, Tooling

export / export default / importNamed vs default — use named for librariesTree-shaking only works with named exportsIn browser via <script type="module">

npm create vite@latestWhy bundlers exist: node_modules → one fileDev server with HMRProduction build: npm run build → dist/

name, version, type: "module"scripts (and how npm run works)dependencies vs devDependenciesengines field for Node version pinning

npm install -D eslint @eslint/js prettier eslint-config-prettiereslint.config.js with recommended rulesPrettier config (.prettierrc) — keep it minimalFormat-on-save in VS Code

node_modules, dist, .env, .DS_StorePer-project additionsWhy never commit lockfiles to .gitignore

Day 26: Practice — Build 10 Tiny Products

Living clock — Date, setInterval, padStart, Intl date line, 12/24h toggleStopwatch — Date.now() deltas (no tick counting), pause/resume, laps with fastest/slowestPomodoro — focus/break state machine, progress bar, session count in localStorage

Quiz game — questions as data, render-from-state, one delegated listener, results + play againPassword generator — charset guarantees, shuffle, strength meter, clipboard copy

Signup form — live validation with "touched" UX, strength bar, FormData + toastExpense tracker — state array, delegated delete, Intl INR total, safe localStorageSpecimen label board — debounced autosave, delegated editing, "Saved ✓" indicator

Package-status lookup — fetch, 404 vs network error, retry, disabled-while-loadingDuty roster — fetch-on-load, skeleton shimmer, debounced in-memory search, empty state

Mini Project

Ten shipped interface instruments

Ten single-page instruments — tide clock, lap marshal, medication interval timer, evacuation drill quiz, recovery-code generator, volunteer intake validator, water-usage ledger, specimen label board, package-status lookup, and duty roster. Each has a detailed spec, observable acceptance criteria, hidden hints, and a solution that unlocks only after a real attempt.

Day 27: Project — Build the Community Pantry Dispatch Board

Add / edit / delete / mark completeFilter: all / active / donePersist to localStorageKeyboard: Enter adds, Esc cancels editSmooth add/remove animationDark mode + mobile-first

State shape: [{ id, text, done }]render() reads state and rebuildsOr: target only changed nodes (your call)Pure helpers: receiveParcel, assignParcel, advanceStatus, removeParcel

Vite + Tailwind + vanilla TSCommit small, oftenTest edge cases: empty list, duplicate text, long text

Project

Community Pantry Dispatch Board

Coordinate incoming food parcels through received, packed, assigned, and collected states. Support edits, deletion with undo, urgency and status filters, local persistence, keyboard operation, motion-safe feedback, and a high-contrast theme.

Empty state with charmCounters: "3 of 7 done"Mobile responsive

Day 28: Project — Public Art Walk Planner + Ship Both

Search a civic public-art feed by artist, neighborhood, or mediumRender cover, title, author, first publish year, and edition count with safe fallbacksPaginate result pages and retain the current query in the URLLoading / error / empty states explicitSave a personal Want to Read shelf in localStorage

Vite + Tailwind + TSUse AbortController for fast typingFormat edition counts and first-publish years with IntlUse image fallbacks and textContent for untrusted API data

Project

Public Art Walk Planner

Search a civic public-art dataset by artist, neighborhood, or medium; render accessible works, cancel stale searches, paginate results, and save an ordered walking shortlist locally. Include loading, empty, error, retry, image-fallback, and mobile route-summary states.

Deploy both to VercelAdd an evidence README with screenshots and keyboard-flow notesLighthouse pass on each

What was hardest? Write 3 lines in a learning journalWhat state pattern did you transfer from the dispatch board?What would you do differently next time?

Capstone

Phase 2 Capstone — Two deployed civic tools

The Pantry Dispatch Board and Public Art Walk Planner are both live, polished, keyboard-operable, failure-aware, and documented with evidence of the state and async decisions you made.

Phase Complete!

After this phase, you'll be able to:

Modern JS: closures, async/await, modules, ES2023+ features
Comfortable with array methods + functional patterns
DOM manipulation + event delegation
Fetch API with proper loading/error/empty states
Vite + ESLint + Prettier project setup

Two interactive apps in production. You can build small frontend apps end-to-end without React.

Back to all phases

Phase Goal

Day 13: JS Runtimes & The Mental Model

Install Node.js (the only install today)

Three places JS runs

Variables

Primitive types

Practice

Day 14: Functions & Scope

Three function forms

Parameters

Closures (the foundational concept)

Pure vs impure functions

Higher-order functions

Day 15: Control Flow

Conditionals

Loops

Truthy / falsy

Equality

Practice

Day 16: Arrays & Their Key Methods

Array basics

The big four

More methods worth knowing

Iteration patterns

Mini build

Trail-condition digest

Day 17: Objects, Destructuring, Spread

Object basics

Destructuring

Spread & rest

Object statics

JSON

Day 18: Classes & OOP in JS

Why classes exist (and why JS resisted them)

Class syntax basics

this — the part everyone trips on

Inheritance with extends + super

Static members & private fields

Where classes actually earn their keep in 2026

A 5-minute peek at prototypes

Practice

Build an EquipmentPool class

Day 19: DOM Manipulation

Querying the DOM

Reading & changing

Creating elements

data-* attributes

Event delegation

Inspection queue triage

Day 20: Events

Event basics

Bubbling vs capturing

Form events

Keyboard + debounce/throttle

Live search filter

Live filter for public meeting records

Day 21: Async JS — The Event Loop

Synchronous vs asynchronous

The event loop

Timers & queueMicrotask

Callbacks → callback hell → Promises

Day 22: Promises & fetch

Promise states

then / catch / finally

Promise combinators

fetch API

Hit a real API

Astronaut roster viewer

Day 23: async / await & Error Handling

async / await rewrite

try / catch / finally

AbortController

Loading / error / empty states

Day 24: Storage, Dates, Numbers, Regex

localStorage & sessionStorage

Dates (the painful part)

Intl APIs

Regex (just enough)

Practice

Day 25: Modules, Bundlers, Tooling