"Ruby on Rails 5 Basics" was retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed DOM Scripting By Example!
You have completed DOM Scripting By Example!
Preview
Great work! We have a basic front end application now. There are many ways to go from here. I'll give you a few of my ideas, but feel free to try your own out!
Resources
Local Storage
- Check out the Treehouse workshop on Local Storage for a way to persist data across browser refreshes
- Also, here's the MDN page on Local Storage
Text Nodes
- Here's an explanation of whitespace in the DOM, and why not all nodes are element nodes.
- Here's the MDN page on text nodes, which talks about them more formally.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Congratulations.
0:00
You just wrote a JavaScript application.
0:01
This RSPV App has
a number of nice features
0:03
that can help users
manage party invitations.
0:06
So hopefully this course got you
comfortable with the basics you'll need to
0:09
build any client side web application.
0:12
Now, there's plenty of room to grow
this application even further, and
0:14
each feature you add will
expand your skills even more.
0:18
So I'd like to give you a few ideas for
where to go next with this application.
0:21
One topic we didn't cover in
this course is validation.
0:26
Validation is making sure any data a user
submits to our app makes sense and
0:29
doesn't break the app.
0:34
For example, try to submit a guest
when the form field is blank,
0:35
and you'll see that a blank
list item is added to the DOM.
0:38
So it would probably be wise to
reject empty strings from being added
0:42
to the list of guests.
0:47
Here in the submit handler,
0:48
you could write a conditional statement
to check the input for an empty string,
0:50
and if users do submit an empty string,
you could exit out of the handler.
0:55
But a better action would be to alert the
user what happened, and you can do this
1:00
with an alert box or by appending
this message to the DOM in some way.
1:04
And once you've accounted for
1:09
empty strings you can also
reject duplicate names.
1:11
Now the function of this checkbox
seems fairly clear right now.
1:17
If it's checked, this label is true and
if it's unchecked the label is false.
1:22
But you might decide it would
be clear to the user if
1:27
this label read confirm
when it's unchecked,
1:30
as if it were instructing the user to
check the box to mark it confirmed.
1:33
Then when the user checks it,
the label could change to confirmed.
1:37
Now, to implement this, you may have to
do some research on a topic we've steered
1:42
clear of in this course and
that is text nodes.
1:47
Remember when we looked at first child and
first element child, and
1:50
I mentioned briefly that there are other
types of nodes than HTML nodes.
1:53
Well the text inside
the label is a text node.
1:58
And you'll have to figure out how
to target it to complete this task.
2:01
I'm including a few links in
the teacher's notes about text nodes
2:05
if you wanna learn more.
2:07
So right now users can only enter names
and check them as attending or not.
2:09
So you could also create an additional
place to keep notes about each invitation.
2:15
Perhaps adding a text
area to each list item.
2:20
And users can only mark invitees as
showing up or not responded right now.
2:23
So there's no option to mark
an invitee is not coming.
2:28
So you could add this as a third option.
2:31
Perhaps using a select element,
instead of a check box.
2:33
When you filter out the unresponded,
2:37
see how the confirmed check
boxes is still show up.
2:40
This is redundant
information at this point,
2:44
because all the boxes will be
confirmed if our filter is active.
2:46
So you could add behavior to hide
this checkbox whenever the filter is
2:50
active to reduce the visual
clutter of the app in this state.
2:55
Finally, you've seen that every
time you refresh the application,
2:59
all its memory gets wiped away.
3:03
There's a browser feature
called local storage
3:05
that saves information even
when a page is refreshed.
3:08
So you can use local storage to save
the state of the application, so
3:11
that even if the user refreshes the page,
the names they have entered will persist.
3:15
Check the teacher's notes of this video
for some resources on local storage.
3:20
Well, that does it for this course.
3:25
I hope you feel ready to tackle some
of the ideas I just mentioned, or
3:27
start working on another app you
may already have an idea for.
3:30
And don't forget to share your progress
with other students in the Treehouse
3:33
community, and
3:35
find out how other students tackled some
of the problems they've encountered.
3:36
Thanks everyone.
3:39
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up