DOM Scripting By Example Course (How To)

Use JavaScript to build an RSVP web application. Many of the features you'll build are common to other web applications. When you're done programing the app, you'll have the basics you will need to build any client-side web app.

What you'll learn

• DOM element selection
• DOM traversal
• DOM manipulation
• Event handling

Adding and Removing Names

Let's start by looking at the RSVP application we want to build, and implementing some basic features.

Chevron 7 steps

• Tour the Application

  3:41

• Registering Names

  7:49

• Using the submit Event

  2 objectives

• RSVP Checkbox

  8:01

• Removing Names

  7:43

• Practice with Function Scope

  1 objective

• Adding and Removing Names Review

  5 questions

Editing and Filtering Names

Let's give users a way to modify names in our app. Let's also let them filter names, so they can see confirmed guests at a glance.

Chevron 7 steps

• States of the Application

  7:09

• Moving to an Editing State

  6:08

• Saving Names

  3:05

• State Review

  5 questions

• Filter Invitees Who Have Not Responded

  9:53

• Editing and Filtering Names Review

  5 questions

• Fix DOM Manipulation Code

  1 objective

Improving the Application Code

Now that we've pieced together a working app, let's go back in and tidy up our code. This will make it easier to modify later if need be.

Chevron 7 steps

• The DOMContentLoaded Event

  4:34

• Refactoring

  1:01

• Refactor 1: Create List Items

  11:19

• Fix Function that Should be Creating Links

  1 objective

• Refactor 2: Readable Branching Logic

  9:12

• Next Steps

  3:41

• Improving the Application Code Review

  6 questions