1
00:00:00,180 --> 00:00:01,140
Congratulations.

2
00:00:01,140 --> 00:00:03,686
You just wrote a JavaScript application.

3
00:00:03,686 --> 00:00:06,500
This RSPV App has
a number of nice features

4
00:00:06,500 --> 00:00:09,070
that can help users
manage party invitations.

5
00:00:09,070 --> 00:00:12,695
So hopefully this course got you
comfortable with the basics you'll need to

6
00:00:12,695 --> 00:00:14,631
build any client side web application.

7
00:00:14,631 --> 00:00:18,120
Now, there's plenty of room to grow
this application even further, and

8
00:00:18,120 --> 00:00:21,310
each feature you add will
expand your skills even more.

9
00:00:21,310 --> 00:00:24,350
So I'd like to give you a few ideas for
where to go next with this application.

10
00:00:26,180 --> 00:00:29,980
One topic we didn't cover in
this course is validation.

11
00:00:29,980 --> 00:00:34,550
Validation is making sure any data a user
submits to our app makes sense and

12
00:00:34,550 --> 00:00:35,890
doesn't break the app.

13
00:00:35,890 --> 00:00:38,980
For example, try to submit a guest
when the form field is blank,

14
00:00:38,980 --> 00:00:42,680
and you'll see that a blank
list item is added to the DOM.

15
00:00:42,680 --> 00:00:47,110
So it would probably be wise to
reject empty strings from being added

16
00:00:47,110 --> 00:00:48,760
to the list of guests.

17
00:00:48,760 --> 00:00:50,524
Here in the submit handler,

18
00:00:50,524 --> 00:00:55,445
you could write a conditional statement
to check the input for an empty string,

19
00:00:55,445 --> 00:01:00,020
and if users do submit an empty string,
you could exit out of the handler.

20
00:01:00,020 --> 00:01:04,424
But a better action would be to alert the
user what happened, and you can do this

21
00:01:04,424 --> 00:01:09,180
with an alert box or by appending
this message to the DOM in some way.

22
00:01:09,180 --> 00:01:11,143
And once you've accounted for

23
00:01:11,143 --> 00:01:14,472
empty strings you can also
reject duplicate names.

24
00:01:17,032 --> 00:01:22,070
Now the function of this checkbox
seems fairly clear right now.

25
00:01:22,070 --> 00:01:27,156
If it's checked, this label is true and
if it's unchecked the label is false.

26
00:01:27,156 --> 00:01:30,240
But you might decide it would
be clear to the user if

27
00:01:30,240 --> 00:01:33,178
this label read confirm
when it's unchecked,

28
00:01:33,178 --> 00:01:37,594
as if it were instructing the user to
check the box to mark it confirmed.

29
00:01:37,594 --> 00:01:42,549
Then when the user checks it,
the label could change to confirmed.

30
00:01:42,549 --> 00:01:47,120
Now, to implement this, you may have to
do some research on a topic we've steered

31
00:01:47,120 --> 00:01:50,270
clear of in this course and
that is text nodes.

32
00:01:50,270 --> 00:01:53,940
Remember when we looked at first child and
first element child, and

33
00:01:53,940 --> 00:01:58,090
I mentioned briefly that there are other
types of nodes than HTML nodes.

34
00:01:58,090 --> 00:02:01,675
Well the text inside
the label is a text node.

35
00:02:01,675 --> 00:02:05,080
And you'll have to figure out how
to target it to complete this task.

36
00:02:05,080 --> 00:02:07,730
I'm including a few links in
the teacher's notes about text nodes

37
00:02:07,730 --> 00:02:08,560
if you wanna learn more.

38
00:02:09,560 --> 00:02:15,730
So right now users can only enter names
and check them as attending or not.

39
00:02:15,730 --> 00:02:20,125
So you could also create an additional
place to keep notes about each invitation.

40
00:02:20,125 --> 00:02:23,730
Perhaps adding a text
area to each list item.

41
00:02:23,730 --> 00:02:28,460
And users can only mark invitees as
showing up or not responded right now.

42
00:02:28,460 --> 00:02:31,790
So there's no option to mark
an invitee is not coming.

43
00:02:31,790 --> 00:02:33,831
So you could add this as a third option.

44
00:02:33,831 --> 00:02:36,725
Perhaps using a select element,
instead of a check box.

45
00:02:37,825 --> 00:02:40,835
When you filter out the unresponded,

46
00:02:40,835 --> 00:02:44,155
see how the confirmed check
boxes is still show up.

47
00:02:44,155 --> 00:02:46,702
This is redundant
information at this point,

48
00:02:46,702 --> 00:02:50,552
because all the boxes will be
confirmed if our filter is active.

49
00:02:50,552 --> 00:02:55,352
So you could add behavior to hide
this checkbox whenever the filter is

50
00:02:55,352 --> 00:02:59,082
active to reduce the visual
clutter of the app in this state.

51
00:02:59,082 --> 00:03:03,482
Finally, you've seen that every
time you refresh the application,

52
00:03:03,482 --> 00:03:05,450
all its memory gets wiped away.

53
00:03:05,450 --> 00:03:08,290
There's a browser feature
called local storage

54
00:03:08,290 --> 00:03:11,330
that saves information even
when a page is refreshed.

55
00:03:11,330 --> 00:03:15,880
So you can use local storage to save
the state of the application, so

56
00:03:15,880 --> 00:03:20,620
that even if the user refreshes the page,
the names they have entered will persist.

57
00:03:20,620 --> 00:03:24,140
Check the teacher's notes of this video
for some resources on local storage.

58
00:03:25,640 --> 00:03:27,070
Well, that does it for this course.

59
00:03:27,070 --> 00:03:30,260
I hope you feel ready to tackle some
of the ideas I just mentioned, or

60
00:03:30,260 --> 00:03:33,010
start working on another app you
may already have an idea for.

61
00:03:33,010 --> 00:03:35,870
And don't forget to share your progress
with other students in the Treehouse

62
00:03:35,870 --> 00:03:36,430
community, and

63
00:03:36,430 --> 00:03:39,790
find out how other students tackled some
of the problems they've encountered.

64
00:03:39,790 --> 00:03:40,380
Thanks everyone.