Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video introduces the challenges to complete with this practice.
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
[MUSIC]
0:00
Hey everyone, Travis here and
it's time for some practice.
0:09
In this exercise, we're going to
manipulate the options of one select menu
0:13
based on the provided value of another,
using JavaScript.
0:18
This will enhance the user experience and
prevent potential errors.
0:22
Let's get started.
0:26
Go ahead and open the workspace
associated with this video, or
0:28
download the project files and
open them in your own text editor.
0:32
You'll see that we have index.html,
style.css,
0:36
and script.js files,
plus a folder of images.
0:41
You won't need to worry about anything
in the CSS or the images folder for
0:46
this exercise.
0:50
But of course, feel free to have some
fun with the styles after completing
0:51
the challenge if you'd like.
0:55
Let's open up the preview in the browser
and see what we're working with.
0:57
You'll see we have a very basic
form here with two select elements.
1:01
This first one is where users can select
whether they prefer cats or dogs.
1:05
Let's select cats.
1:11
This second select element is for the user
to select their favorite breed, and
1:13
here lies our first issue.
1:18
We should only be presented with breed
options that match our animal choice.
1:20
So in our case, we should only be able
to choose from cat breed options.
1:24
Currently, this allows the user
to provide invalid combinations.
1:30
But okay, let's choose a cat
breed here and, wait a second,
1:35
I totally forgot that I much
preferred dogs over cats, silly me.
1:39
I'm going to change my animal to dogs.
1:45
And here is our second issue.
1:47
When I already had a cat breed selected
then changed my animal to dogs,
1:50
the cat breed option is still selected.
1:54
This again leaves the potential for
invalid combinations, we'll want to
1:57
automatically change this breed select
menus value upon the animal changing.
2:02
All right,
let's take a look at index.html.
2:08
Here is our form element with
the two select element children.
2:13
Let's take a closer look
at these breed options.
2:17
First, is the default selected option.
2:20
It has the hidden attribute so
2:23
that users won't see it when
they open the drop-down menu.
2:25
I'm also using the disabled attribute
because with some browsers like Safari,
2:29
the hidden attribute doesn't quite work
the same as it does in Chrome for example.
2:34
Also notice that the value attribute
is equal to an empty string.
2:39
This will come in handy later on.
2:44
The second option is also hidden, and
has a value attribute equal to reselect.
2:47
This option will be very important
in the second part of this exercise.
2:54
The last six options are the dog and
cat breeds, and
2:59
notice they have this
breed data attribute.
3:01
This is going to be very useful in
the first part of this exercise.
3:05
At the bottom of the body element, I have
already linked the JavaScript file, so
3:09
you are all set there.
3:13
Let us jump over into script.js.
3:15
This is where you will
write all of your code.
3:18
I have laid out some code comments
here to guide you along the way.
3:21
Notice I've also indented the lines,
like pseudo-code,
3:25
so that you'll know if something
should be nested or not.
3:28
Down at the bottom is just some code for
validation purposes.
3:32
You won't have to work with or
worry about any of that.
3:36
Don't forget to console.log values, check
the teacher's notes for resources, and
3:40
test your work in
the browser along the way.
3:44
Good luck, have fun, and in the next
video I'll show you my solution.
3:48
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