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

2
00:00:09,769 --> 00:00:13,640
Hey everyone, Travis here and
it's time for some practice.

3
00:00:13,640 --> 00:00:18,195
In this exercise, we're going to
manipulate the options of one select menu

4
00:00:18,195 --> 00:00:22,380
based on the provided value of another,
using JavaScript.

5
00:00:22,380 --> 00:00:26,850
This will enhance the user experience and
prevent potential errors.

6
00:00:26,850 --> 00:00:27,630
Let's get started.

7
00:00:28,940 --> 00:00:32,443
Go ahead and open the workspace
associated with this video, or

8
00:00:32,443 --> 00:00:36,840
download the project files and
open them in your own text editor.

9
00:00:36,840 --> 00:00:41,366
You'll see that we have index.html,
style.css,

10
00:00:41,366 --> 00:00:46,280
and script.js files,
plus a folder of images.

11
00:00:46,280 --> 00:00:50,447
You won't need to worry about anything
in the CSS or the images folder for

12
00:00:50,447 --> 00:00:51,840
this exercise.

13
00:00:51,840 --> 00:00:55,384
But of course, feel free to have some
fun with the styles after completing

14
00:00:55,384 --> 00:00:57,410
the challenge if you'd like.

15
00:00:57,410 --> 00:01:00,630
Let's open up the preview in the browser
and see what we're working with.

16
00:01:01,690 --> 00:01:05,995
You'll see we have a very basic
form here with two select elements.

17
00:01:05,995 --> 00:01:11,330
This first one is where users can select
whether they prefer cats or dogs.

18
00:01:11,330 --> 00:01:13,560
Let's select cats.

19
00:01:13,560 --> 00:01:18,016
This second select element is for the user
to select their favorite breed, and

20
00:01:18,016 --> 00:01:20,440
here lies our first issue.

21
00:01:20,440 --> 00:01:24,938
We should only be presented with breed
options that match our animal choice.

22
00:01:24,938 --> 00:01:29,200
So in our case, we should only be able
to choose from cat breed options.

23
00:01:30,590 --> 00:01:35,421
Currently, this allows the user
to provide invalid combinations.

24
00:01:35,421 --> 00:01:39,740
But okay, let's choose a cat
breed here and, wait a second,

25
00:01:39,740 --> 00:01:44,320
I totally forgot that I much
preferred dogs over cats, silly me.

26
00:01:45,530 --> 00:01:47,880
I'm going to change my animal to dogs.

27
00:01:47,880 --> 00:01:49,220
And here is our second issue.

28
00:01:50,350 --> 00:01:54,185
When I already had a cat breed selected
then changed my animal to dogs,

29
00:01:54,185 --> 00:01:56,400
the cat breed option is still selected.

30
00:01:57,640 --> 00:02:02,215
This again leaves the potential for
invalid combinations, we'll want to

31
00:02:02,215 --> 00:02:07,090
automatically change this breed select
menus value upon the animal changing.

32
00:02:08,120 --> 00:02:13,020
All right,
let's take a look at index.html.

33
00:02:13,020 --> 00:02:16,200
Here is our form element with
the two select element children.

34
00:02:17,480 --> 00:02:20,820
Let's take a closer look
at these breed options.

35
00:02:20,820 --> 00:02:23,710
First, is the default selected option.

36
00:02:23,710 --> 00:02:25,197
It has the hidden attribute so

37
00:02:25,197 --> 00:02:28,240
that users won't see it when
they open the drop-down menu.

38
00:02:29,620 --> 00:02:34,216
I'm also using the disabled attribute
because with some browsers like Safari,

39
00:02:34,216 --> 00:02:39,800
the hidden attribute doesn't quite work
the same as it does in Chrome for example.

40
00:02:39,800 --> 00:02:44,690
Also notice that the value attribute
is equal to an empty string.

41
00:02:44,690 --> 00:02:47,300
This will come in handy later on.

42
00:02:47,300 --> 00:02:54,360
The second option is also hidden, and
has a value attribute equal to reselect.

43
00:02:54,360 --> 00:02:58,040
This option will be very important
in the second part of this exercise.

44
00:02:59,160 --> 00:03:01,916
The last six options are the dog and
cat breeds, and

45
00:03:01,916 --> 00:03:05,250
notice they have this
breed data attribute.

46
00:03:05,250 --> 00:03:09,450
This is going to be very useful in
the first part of this exercise.

47
00:03:09,450 --> 00:03:13,308
At the bottom of the body element, I have
already linked the JavaScript file, so

48
00:03:13,308 --> 00:03:15,310
you are all set there.

49
00:03:15,310 --> 00:03:18,223
Let us jump over into script.js.

50
00:03:18,223 --> 00:03:21,019
This is where you will
write all of your code.

51
00:03:21,019 --> 00:03:25,130
I have laid out some code comments
here to guide you along the way.

52
00:03:25,130 --> 00:03:28,170
Notice I've also indented the lines,
like pseudo-code,

53
00:03:28,170 --> 00:03:31,100
so that you'll know if something
should be nested or not.

54
00:03:32,310 --> 00:03:36,480
Down at the bottom is just some code for
validation purposes.

55
00:03:36,480 --> 00:03:40,080
You won't have to work with or
worry about any of that.

56
00:03:40,080 --> 00:03:44,827
Don't forget to console.log values, check
the teacher's notes for resources, and

57
00:03:44,827 --> 00:03:47,210
test your work in
the browser along the way.

58
00:03:48,270 --> 00:03:52,260
Good luck, have fun, and in the next
video I'll show you my solution.