Work & Development · Web Development & Programming

Interactive Browser Apps

Build a study planner that responds to input, saves practice tasks and looks up resources.

Level: Intermediate
Lessons: 12 lessons in 4 modules
Estimated study: About 14 hours
Format: Online, self-paced

Start your free 3-day trial Read lesson 1 free Already a student? Open course

Monthly: $0 today with a card, then $34 on day 4 unless you cancel before then. After the trial, 30 days' notice applies. Active on-campus students have academy access included. Check your existing student account before buying another subscription.

Before you start

Recommended preparation:

Use a computer with a keyboard and a current browser. Individual lessons explain the tools needed for each exercise.

Full study requires active Academy access. This course can be audited independently of optional assessed programs.

About this course

After Programming Foundations with JavaScript, use JavaScript to make a page interactive. In about 14 hours, build a study planner with checked forms, editable tasks, browser saving and resource search. Show clear messages while work is loading or when something goes wrong.

What you will be able to do

Build accessible forms and update the DOM in response to events.
Use browser storage for non-sensitive data.
Handle loading, empty, success and error states when requesting data.

Course outline

Find page elements, respond to input and update the page while keeping keyboard use working.

Find elements and update their text1 hFree preview
Respond to native control events1 h
Render a task collection safely1 h

Check form entries, edit tasks and restore saved practice data that contains no private information.

Validate titles and whole-minute durations1 h
Edit and remove tasks by stable identity1 h 30 min
Save and restore non-sensitive practice data1 h

Learn how JavaScript waits for results. Practice with local example files and compare an optional public service.

Represent waiting with promises and async functions1 h
Fetch and validate a local JSON resource file1 h
Define resource contracts and cancel outdated requests1 h

Join the planner features together, then check feedback, errors and awkward cases.

Prepare the final planner shell and state helpers1 h
Connect editing, filters, saving and lookup1 h 30 min
Review and hand over the complete planner2 h

Related assessed programs

This course belongs to the following optional programs. Each has its own required course bundle, evidence review and separate fee. Each program page shows its approved fee and current registration status.