CodeRung

COURSE · 03

JavaScript Fundamentals and Interaction

Add a real study tracker to the responsive site, progressing from values and functions to DOM, events, and local storage.

Start lesson one
Lessons
10
Estimated
8h
Starting level
Previous course
Outcome
Interactive study tracker

PART 01

Learn the language

  1. 01Connect a script and use the ConsoleUnderstand script loading and inspect real values in the Console.
  2. 02Values, variables, and typesStore strings, numbers, booleans, and missing values with const and let.
  3. 03Comparisons, boolean logic, and conditionsDerive not started, learning, or completed from progress.
  4. 04Functions, parameters, and scopeTurn repeated calculations into functions with clear inputs and stable returns.
  5. 05Arrays, objects, and data modelingRepresent a study record as an object and manage records in an array.

PART 02

Make the page interactive

  1. 06Select the DOM and render contentRender data as a list, progress text, and an empty state.
  2. 07Events and form submissionHandle one submit, read form data, validate it, add a record, and rerender.
  3. 08Errors, breakpoints, and systematic debuggingUse messages, call stacks, and breakpoints instead of random edits.
  4. 09Persist state with localStorageSerialize records, validate loaded data, and recover from corrupt storage.
  5. 10Capstone: finish the study trackerCombine data, functions, DOM, events, error handling, and persistence into a usable tracker.

Your privacy choices

Necessary storage is always on. Optional analytics and support services load only after consent.