1
00:00:00,400 --> 00:00:02,750
Now that you've got a few
more methods under your belt,

2
00:00:02,750 --> 00:00:05,970
let's start working on this
project's main functionality.

3
00:00:05,970 --> 00:00:10,730
To be permitted to download a copy of
the jQuery Cheatsheet from our website,

4
00:00:10,730 --> 00:00:14,910
the user first has to check the box
confirming that they want to Allow PDF

5
00:00:14,910 --> 00:00:16,360
downloads.

6
00:00:16,360 --> 00:00:19,465
If the box isn't checked and
they attempt to download it,

7
00:00:19,465 --> 00:00:24,620
we'll display a message advising them that
they should check the box to confirm.

8
00:00:24,620 --> 00:00:29,070
Right now our default behavior
is to download the PDF on click.

9
00:00:29,070 --> 00:00:31,780
How can we conditionally
prevent this behavior?

10
00:00:31,780 --> 00:00:35,260
To prevent an event from triggering
the browser's default behavior,

11
00:00:35,260 --> 00:00:37,630
you call the preventDefault method.

12
00:00:37,630 --> 00:00:40,500
Go ahead and open the workspace with
this video, and let's get to it.

13
00:00:41,570 --> 00:00:44,210
To the PDF links,
let’s add a click handler.

14
00:00:57,200 --> 00:00:58,869
I’m gonna use the on method here.

15
00:00:58,869 --> 00:01:01,890
You can use the click shorthand
method if you'd like.

16
00:01:01,890 --> 00:01:04,730
But I prefer to use the on
method most of the time

17
00:01:04,730 --> 00:01:08,270
because as we discussed in a previous
video, it's more flexible and

18
00:01:08,270 --> 00:01:10,600
you never know what's gonna
happen in the future.

19
00:01:10,600 --> 00:01:13,450
Maybe we'll wanna add another
event listener at some point.

20
00:01:13,450 --> 00:01:16,870
Remember, we can get access to
the jQuery event object for

21
00:01:16,870 --> 00:01:20,710
an event by adding a parameter
to our event handler function.

22
00:01:20,710 --> 00:01:24,530
The name of the parameter can be anything
we want, but it's common to use event.

23
00:01:25,900 --> 00:01:27,730
Let's break down what we need to do here.

24
00:01:27,730 --> 00:01:29,715
When the user clicks on a PDF link,

25
00:01:29,715 --> 00:01:32,600
we need to check to see if
the checkbox is checked.

26
00:01:34,030 --> 00:01:37,710
If it's not checked, we need to prevent
the browser's default behavior,

27
00:01:37,710 --> 00:01:40,050
which is just a trick
the download of the PDF.

28
00:01:46,290 --> 00:01:48,000
We also need to alert the user.

29
00:01:50,280 --> 00:01:52,890
If the box is checked,
we don't need to do anything.

30
00:01:52,890 --> 00:01:55,140
We can just let the browser
trigger the download.

31
00:01:59,910 --> 00:02:02,790
Let's first stop the PDF from downloading.

32
00:02:02,790 --> 00:02:06,460
We learned a little about the event
object in an earlier video.

33
00:02:06,460 --> 00:02:10,132
One of the methods available on
the event object is preventDefault.

34
00:02:10,132 --> 00:02:14,706
You prevent the browser's default behavior
simply by calling this method on the event

35
00:02:14,706 --> 00:02:15,591
object like so.

36
00:02:20,133 --> 00:02:22,870
There are two main reasons
you'd wanna do this.

37
00:02:22,870 --> 00:02:27,235
The majority of the time, you'll probably
be using the preventDefault method to

38
00:02:27,235 --> 00:02:28,826
stop a form from submitting.

39
00:02:28,826 --> 00:02:32,980
By default, the browser will take
whatever information is in the form and

40
00:02:32,980 --> 00:02:34,257
send it to the server.

41
00:02:34,257 --> 00:02:39,439
This causes the page to reload, so you'd
use this method to say, hey, browser.

42
00:02:39,439 --> 00:02:43,950
When the form on this page is submitted,
don't send the information to the server.

43
00:02:43,950 --> 00:02:47,260
This prevents the browser from
reloading the page on submit.

44
00:02:47,260 --> 00:02:51,320
The second reason you'd use this method
is to stop the browser from automatically

45
00:02:51,320 --> 00:02:54,240
following a link after
the user clicks on it.

46
00:02:54,240 --> 00:02:56,570
And that's what we're using it for today.

47
00:02:56,570 --> 00:03:02,460
So you'll see that if I save and refresh
the preview and click on the PDF link,

48
00:03:07,557 --> 00:03:10,080
Looks like we're missing an s here.

49
00:03:10,080 --> 00:03:15,820
So let's save and preview and
click on the PDF link.

50
00:03:15,820 --> 00:03:17,700
You'll see now that nothing happens.

51
00:03:17,700 --> 00:03:18,819
Nothing is downloaded.

52
00:03:20,430 --> 00:03:22,940
And that's exactly what
we want at the moment.

53
00:03:22,940 --> 00:03:26,170
Now let's check for checked checkboxes.

54
00:03:26,170 --> 00:03:29,560
We can do that by using jQuery's
checked pseudo selector.

55
00:03:34,900 --> 00:03:39,040
Let's open up the console and dev tools
and see what checked returns to us.

56
00:03:44,620 --> 00:03:47,770
As you can see,
if the checkbox is unchecked,

57
00:03:47,770 --> 00:03:50,940
it will return to me
what looks like an array.

58
00:03:52,060 --> 00:03:56,353
As we discussed a bit in a previous video,
this was a jQuery collection,

59
00:03:56,353 --> 00:04:02,010
which is array-like in that you can
access elements within it by index.

60
00:04:02,010 --> 00:04:07,270
It also has a length property, which tells
you how many elements are in the array.

61
00:04:07,270 --> 00:04:11,270
jQuery has returned to us an empty
array-like collection because we're

62
00:04:11,270 --> 00:04:16,370
asking for all elements on the page
with the property of checked.

63
00:04:16,370 --> 00:04:21,192
If we expand this collection,
we can see it has a length of 0.

64
00:04:21,192 --> 00:04:23,860
There are zero items in
the collection because we've

65
00:04:23,860 --> 00:04:25,490
got nothing on the page that's checked.

66
00:04:26,590 --> 00:04:32,710
If I check the box and
enter the checked pseudo selector again,

67
00:04:32,710 --> 00:04:38,520
I'm returned a collection with one
item in it, which is this input here.

68
00:04:38,520 --> 00:04:42,790
If I expand, I can see that
the collection now has a length of 1.

69
00:04:42,790 --> 00:04:44,860
So what's happening here is I'm asking for

70
00:04:44,860 --> 00:04:48,700
all the elements on the page
with a checked attribute.

71
00:04:48,700 --> 00:04:52,493
And I'm returned a jQuery collection
of all the elements that are checked.

72
00:04:52,493 --> 00:04:56,418
In this case, this single input.

73
00:04:56,418 --> 00:04:58,864
Now how is this information useful?

74
00:04:58,864 --> 00:04:59,952
Just like an array,

75
00:04:59,952 --> 00:05:03,550
I can use the length property to
see how many elements are checked.

76
00:05:04,700 --> 00:05:07,570
Because we're only checking
this one checkbox,

77
00:05:07,570 --> 00:05:12,760
we'll know that if this array has a length
of zero, there are no checked checkboxes.

78
00:05:12,760 --> 00:05:16,738
If the length is greater than zero,
then we have a checked checkbox.

79
00:05:21,676 --> 00:05:29,358
So we can say if checked.length === 0,

80
00:05:29,358 --> 00:05:35,450
then we'll do this stuff here.

81
00:05:35,450 --> 00:05:38,218
As we just established,
if the link is equal to zero,

82
00:05:38,218 --> 00:05:42,650
then no checkboxes are checked and we
need to stop the download from happening.

83
00:05:42,650 --> 00:05:46,740
Else we do nothing and
the link is downloadable.

84
00:05:46,740 --> 00:05:50,099
Let's move the preventDefault method
into our conditional statement.

85
00:05:55,783 --> 00:05:59,001
And finally,
let's make an alert pop up to say,

86
00:05:59,001 --> 00:06:01,997
Please check the box to
allow PDF downloads.

87
00:06:17,721 --> 00:06:22,471
And we can remove the last comments, since
we don't need to write any code for it.

88
00:06:22,471 --> 00:06:24,129
Save the file and refresh.

89
00:06:30,047 --> 00:06:33,200
Click the PDF, and we see the alert.

90
00:06:33,200 --> 00:06:35,120
And the file isn't downloaded.

91
00:06:35,120 --> 00:06:40,820
When we check the checkbox and
click the download link, there's no alert.

92
00:06:40,820 --> 00:06:43,310
And the PDF starts to download.

93
00:06:43,310 --> 00:06:44,590
Excellent.

94
00:06:44,590 --> 00:06:46,520
Here's a small challenge for you.

95
00:06:46,520 --> 00:06:50,560
The checkbox and its parent label
are currently part of the HTML.

96
00:06:50,560 --> 00:06:54,350
Pause the video and make this code
unobtrusive, so that the checkbox

97
00:06:54,350 --> 00:06:58,510
isn't present if JavaScript is broken or
otherwise unavailable.

98
00:06:58,510 --> 00:07:02,294
Then unpause the video, and
I'll show you my solution.

99
00:07:02,294 --> 00:07:05,683
First, I'll cut the label
in input from the HTML.

100
00:07:10,614 --> 00:07:14,468
In app.js, I'll use jQuery
to create a new element and

101
00:07:14,468 --> 00:07:17,426
save it to a variable called PDF checkbox.

102
00:07:22,401 --> 00:07:26,281
Maybe you used a different variable name,
and that's totally fine.

103
00:07:38,269 --> 00:07:42,205
Then I appended PDF checkbox
to the links container,

104
00:07:42,205 --> 00:07:44,926
which is this container right here.

105
00:08:07,610 --> 00:08:10,250
Now the code works the same,
but it's unobtrusive.