1
00:00:00,000 --> 00:00:09,268
[MUSIC]

2
00:00:09,268 --> 00:00:10,610
Hey everyone, what's up?

3
00:00:10,610 --> 00:00:13,050
I'm Dustin, a developer here at Treehouse.

4
00:00:13,050 --> 00:00:17,178
Today I wanna show you how easy it really
is to set up a searching feature for

5
00:00:17,178 --> 00:00:18,384
your project or app.

6
00:00:18,384 --> 00:00:22,525
Being able to search through your data in
an application is a really good feature to

7
00:00:22,525 --> 00:00:25,838
implement so that your users can
see what they wanna see quicker.

8
00:00:25,838 --> 00:00:29,561
Implementing this type of functionality
may seem really hard and intimidating, but

9
00:00:29,561 --> 00:00:30,962
it's actually pretty simple.

10
00:00:30,962 --> 00:00:33,302
We just need to write
a little bit of JavaScript.

11
00:00:33,302 --> 00:00:35,936
In this guide,
I'll show you how we can search for

12
00:00:35,936 --> 00:00:38,897
a specific author in a webpage
that hosts many authors.

13
00:00:38,897 --> 00:00:41,335
So follow along while I'll show you how.

14
00:00:41,335 --> 00:00:45,358
Make sure to check out our teachers notes
or description of this video to get links

15
00:00:45,358 --> 00:00:49,453
to helpful resources if you're unfamiliar
with JavaScript or need a refresher.

16
00:00:49,453 --> 00:00:53,083
You can also find links to our GitHub
repo associated with this project,

17
00:00:53,083 --> 00:00:56,672
as well as a blog post for a more
detailed written version of this guide.

18
00:00:56,672 --> 00:00:59,264
So if you're ready, let's get started.

19
00:00:59,264 --> 00:01:02,643
If you'd like to follow
along in your text editor,

20
00:01:02,643 --> 00:01:07,608
make sure to go to our GitHub repo and
clone the repository to your machine.

21
00:01:07,608 --> 00:01:11,392
Once you're ready to get started,
the first thing that we'll do is we'll

22
00:01:11,392 --> 00:01:15,131
hop into our scripts folder and
we'll set up a brand new JavaScript file.

23
00:01:15,131 --> 00:01:17,818
I'll name this app.js.

24
00:01:17,818 --> 00:01:22,583
And then I'll hop into my index.html file
and just before the closing body tag,

25
00:01:22,583 --> 00:01:25,475
I'll link to that new file
that we just created.

26
00:01:31,431 --> 00:01:36,374
I'm gonna close out of my explorer window
just to give us a little bit more space.

27
00:01:36,374 --> 00:01:39,729
Now, the first thing that we'll
wanna do is, we wanna listen for

28
00:01:39,729 --> 00:01:41,682
events when we start typing, right?

29
00:01:41,682 --> 00:01:44,926
And we can grab the input
element from the HTML and

30
00:01:44,926 --> 00:01:47,707
notice that it has an id of author search.

31
00:01:47,707 --> 00:01:52,179
So we'll grab that, and in the JavaScript
we can create a variable for this.

32
00:01:52,179 --> 00:01:57,745
I'll write const authorSearch=
document.getElementById,

33
00:01:57,745 --> 00:02:02,403
and we'll paste in that ID,
which was author search.

34
00:02:05,018 --> 00:02:11,846
To listen for events on this search, we
can write authorSearch.addEventListener,

35
00:02:11,846 --> 00:02:16,063
and the type of event we're listening for
is a keyup.

36
00:02:16,063 --> 00:02:21,216
And we'll take in the event, and
inside of this, let's see if we can grab

37
00:02:21,216 --> 00:02:26,636
the value from this search box just to
see if everything's set up correctly.

38
00:02:26,636 --> 00:02:30,961
We can do let currentValue=
e.target.value, and

39
00:02:30,961 --> 00:02:37,315
we'll do to lowercase just to make sure
that everything in here is lowercase.

40
00:02:39,520 --> 00:02:43,492
We can console.log this new variable,
currentValue and

41
00:02:43,492 --> 00:02:45,525
see if it logs in the console.

42
00:02:45,525 --> 00:02:49,679
So we'll hit save, and
we'll hop into our browser.

43
00:02:49,679 --> 00:02:53,963
I'll right click on the page and click
inspect to open up the console, I'll push

44
00:02:53,963 --> 00:02:57,935
it to the bottom of the screen just so
that we can still see what's going on.

45
00:02:57,935 --> 00:03:02,608
I'll open up the console and
then I'll begin typing in our search box.

46
00:03:02,608 --> 00:03:06,532
And it looks like the console
is logging everything in there.

47
00:03:06,532 --> 00:03:10,994
And if we turn on Caps Lock, we'll notice
that everything is still getting logged

48
00:03:10,994 --> 00:03:14,044
but it's in lowercase,
which is exactly what we want.

49
00:03:14,044 --> 00:03:18,805
So we'll hop back into the code and
we can delete this console.log.

50
00:03:18,805 --> 00:03:23,698
And next we want to grab something
unique from each of these cards.

51
00:03:23,698 --> 00:03:26,269
And the easiest thing that
I can see is the names,

52
00:03:26,269 --> 00:03:28,101
the names are unique on each card.

53
00:03:28,101 --> 00:03:30,963
So this will be what we wanna search for.

54
00:03:30,963 --> 00:03:32,795
If we go into our HTML file,

55
00:03:32,795 --> 00:03:37,194
we'll notice that each card has
a card header and a card content.

56
00:03:37,194 --> 00:03:41,750
And under card content,
we'll see that h1 with the author's name.

57
00:03:41,750 --> 00:03:44,474
So this is the element
that we'll wanna grab.

58
00:03:44,474 --> 00:03:48,868
And we can do this by writing,
let authors equal, and

59
00:03:48,868 --> 00:03:52,395
we wanna grab every iteration of this h1.

60
00:03:52,395 --> 00:03:58,082
So we'll do document.querySelectorAll,
and we'll do h1 with the class of title.

61
00:04:02,713 --> 00:04:06,705
And how we can loop over this
is by writing a forEach method.

62
00:04:06,705 --> 00:04:10,995
So we can do authors.forEach, and for

63
00:04:10,995 --> 00:04:16,195
each author we are going
to check that the author

64
00:04:16,195 --> 00:04:20,881
text content includes our current value.

65
00:04:20,881 --> 00:04:23,104
So we'll write an if statement.

66
00:04:23,104 --> 00:04:27,197
And if that is true we wanna
show the author card, and

67
00:04:27,197 --> 00:04:29,720
if it's false we wanna hide it.

68
00:04:29,720 --> 00:04:35,061
So inside of our if statement,
we can write if(author.textContent,

69
00:04:35,061 --> 00:04:40,487
and we'll do the .toLowerCase method
on this since we're doing that for

70
00:04:40,487 --> 00:04:45,324
the current value, and
we will write .includescurrentValue.

71
00:04:45,324 --> 00:04:50,227
And if this is true,
we will show the author card, else,

72
00:04:50,227 --> 00:04:52,789
we'll hide the author card.

73
00:04:52,789 --> 00:04:59,991
So the way that we can do that is by
writing author.parentNode.parentNode.

74
00:04:59,991 --> 00:05:04,501
And the reason for
this is author holds our h1 tag.

75
00:05:04,501 --> 00:05:06,985
So if we hop into our HTML file,

76
00:05:06,985 --> 00:05:12,349
we'll notice that the parent node
of this h1 tag is card content.

77
00:05:12,349 --> 00:05:15,743
And the parent node of
that is our author card

78
00:05:15,743 --> 00:05:19,155
which is the item that we wanna hide or
show.

79
00:05:19,155 --> 00:05:24,991
So in this case, we'll write
author.parentNode.parentNode.style.disp-

80
00:05:24,991 --> 00:05:28,531
lay, and
we wanna make sure this one's visible.

81
00:05:28,531 --> 00:05:30,271
So we'll write block.

82
00:05:30,271 --> 00:05:33,071
And in the else statement,
we'll just do the opposite.

83
00:05:33,071 --> 00:05:34,554
We'll write

84
00:05:34,554 --> 00:05:41,841
author.parentNode.parentNode.style.display
= none.

85
00:05:41,841 --> 00:05:46,184
So let's hit save and let's check
the browser to see if this is working.

86
00:05:47,394 --> 00:05:51,484
So I'll type in James to see if
the first option will show up.

87
00:05:54,693 --> 00:05:57,403
James, there we go.

88
00:05:57,403 --> 00:06:01,822
All the rest of the authors that
don't match James disappear.

89
00:06:01,822 --> 00:06:07,356
If I type Ja, Leslie Jacobs will show
because her last name starts with Ja.

90
00:06:07,356 --> 00:06:12,037
And James Kirby will show because
his first name starts with Ja.

91
00:06:12,037 --> 00:06:15,466
And if I delete that all
the other authors come back.

92
00:06:15,466 --> 00:06:18,098
This is exactly what we want.

93
00:06:18,098 --> 00:06:22,241
You may have noticed at the beginning
of this overview each card had a subtle

94
00:06:22,241 --> 00:06:26,139
animation when the page loaded as
well as when searching for authors.

95
00:06:26,139 --> 00:06:29,184
I'll quickly go over how this was
done in case this is something you're

96
00:06:29,184 --> 00:06:29,903
interested in.

97
00:06:29,903 --> 00:06:34,893
This requires just a little bit of CSS and
a little bit of JavaScript.

98
00:06:34,893 --> 00:06:39,456
So first things first,
hop back into the text editor and

99
00:06:39,456 --> 00:06:44,228
under styles and under scss,
you'll see a base partial.

100
00:06:44,228 --> 00:06:48,107
Click that, and at the bottom of
the file you'll notice a keyframe, and

101
00:06:48,107 --> 00:06:49,449
this is that animation.

102
00:06:49,449 --> 00:06:52,351
At 0% we have the opacity set at 0 and

103
00:06:52,351 --> 00:06:56,447
we translate the X-axis
at negative 100 pixels.

104
00:06:56,447 --> 00:07:00,790
And at 100%,
we bump the opacity back up to 1 and

105
00:07:00,790 --> 00:07:04,854
also translate on the x-axis
back to 0 pixels.

106
00:07:04,854 --> 00:07:08,644
On line 78, you'll notice this
animation is actually commented out.

107
00:07:08,644 --> 00:07:12,866
Because we actually use this in
the JavaScript because we use

108
00:07:12,866 --> 00:07:15,364
a random number for the time delay.

109
00:07:15,364 --> 00:07:21,134
We just need to make sure that you
add an opacity 0 in the author card.

110
00:07:21,134 --> 00:07:26,846
So in the JavaScript, what you wanna
do is we wanna grab every card.

111
00:07:26,846 --> 00:07:29,782
So we can set that up in a variable.

112
00:07:29,782 --> 00:07:38,053
We can write const
authorCards=document.querySelectorAll,

113
00:07:38,053 --> 00:07:43,523
and we'll target the class of author card.

114
00:07:43,523 --> 00:07:48,268
I'll close my explorer window so
that we can see a little bit better.

115
00:07:48,268 --> 00:07:51,300
Now, what we'll do is loop
over each one of these cards.

116
00:07:51,300 --> 00:07:55,246
So we can do authorCards.forEach, and for

117
00:07:55,246 --> 00:08:02,186
each card we basically want to set a new
random value for the animation delay.

118
00:08:02,186 --> 00:08:08,448
So we can do let
randomAniDelay=Math.floor(Math.random

119
00:08:08,448 --> 00:08:10,343
() * 500).

120
00:08:10,343 --> 00:08:15,303
And we'll do this 500 value because
we'll do this in milliseconds.

121
00:08:15,303 --> 00:08:18,519
So we can do card.style.animation, and

122
00:08:18,519 --> 00:08:23,981
we'll write backticks because we'll
interpolate that random value.

123
00:08:23,981 --> 00:08:27,801
And we'll just write in
the fadeIn keyframe.

124
00:08:27,801 --> 00:08:32,294
It'll be a one second keyframe,
and we will do point and

125
00:08:32,294 --> 00:08:37,085
then we'll interpolate the value
seconds ease forwards.

126
00:08:37,085 --> 00:08:41,258
And inside of those curly braces
we'll write in our variable for

127
00:08:41,258 --> 00:08:43,198
our random animation delay.

128
00:08:43,198 --> 00:08:45,843
So we'll put randomAniDelay.

129
00:08:45,843 --> 00:08:46,952
We'll hit save, and

130
00:08:46,952 --> 00:08:50,586
when the browser reload you should
see each card have that keyframe and

131
00:08:50,586 --> 00:08:54,723
they all start at different times because
their animation delay is different.

132
00:08:56,837 --> 00:09:01,560
And their animation delay should go from
anywhere from 0 to 500 milliseconds.

133
00:09:04,265 --> 00:09:08,115
And that's all there is to setting
up a quick subtle animation for

134
00:09:08,115 --> 00:09:09,235
the author cards.

135
00:09:09,235 --> 00:09:13,924
Awesome work, you should now be able to
add a search feature to your projects or

136
00:09:13,924 --> 00:09:15,284
apps moving forward.

137
00:09:15,284 --> 00:09:18,476
The main thing to remember is that
you wanna find a unique bit of data

138
00:09:18,476 --> 00:09:21,445
tied to the item you're wanting
to filter or search through.

139
00:09:21,445 --> 00:09:23,840
I hope this guide helped and
I'll see you in the next one.

140
00:09:23,840 --> 00:09:25,990
Until then, have fun and happy coding