Module Overview
Modern JS language features (ES6+), event-driven programming, DOM APIs, asynchronous patterns, and fetching remote data with robust error handling. Students gain the ability to add interactive behavior and manage simple state.
Learning Objectives
- Apply ES6+ syntax effectively (modules, arrow functions, destructuring, promises, async/await).
- Manipulate the DOM and implement robust event handling patterns (delegation, throttling/debouncing).
- Use fetch and handle errors/loading/caching concerns conceptually.
Lesson-by-Lesson Breakdown
Modern syntax overview and module usage.
DOM traversal, element creation, event listeners, and delegation.
Asynchronous JS: Promises vs async/await — error handling best practices.
Fetch API patterns, request headers, JSON handling.
Local storage basics and persistence strategies for simple apps.
Debugging JS: breakpoints, call stacks, and common pitfalls.
Hands-on Activities & Deliverables
Activities
Build a dynamic todo app with add/edit/delete, local persistence, and fetch-based sample data.
📦 Deliverable
GitHub repo with README, screenshots, and usage instructions.
Required Tools & Readings
JS reference guides, interactive code playgrounds.
Assessment & Rubric
- Functionality & correctness50%
- Code clarity & structure25%
- Robustness & error handling25%
Prerequisites
Module 1 helpful but not required.
Parent-Friendly Value
Students learn to make web pages interactive and build basic web applications.