Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Web Accessibility: Checkboxes!
You have completed Practice Web Accessibility: Checkboxes!
Preview
This video covers one solution to the challenge.
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
Welcome back.
0:00
How did it go?
0:01
Did you get the checkbox
focus state set up?
0:02
Don't worry if you didn't, keep watching
to see one solution and then go ahead and
0:05
give it another try.
0:09
First, I selected all checkbox
inputs present in the HTML using
0:11
querySelectorAll and
assign them to the checkbox's variable.
0:15
Next, I looped through each
checkbox using the forEach method.
0:20
Then I added an event listener for
the focus event to each checkbox.
0:24
When a checkbox gains focus,
the focus event listener is triggered.
0:28
Inside of the focus event listener,
I added the focus class to the checkbox.
0:32
Then, I also added the focus class to
the checkbox's parentElement, the label.
0:38
Next, I added an event listener for
the blur event to each checkbox.
0:43
When a checkbox loses focus,
the blur event listener is triggered.
0:47
Inside of the blur event listener, I
removed the focus class from the checkbox.
0:51
Then I also removed the focus class
from the check boxes parentElement.
0:56
Let's move over to the browser to
see these event listeners in action,
1:00
there we have it.
1:04
All check boxes and their parent label
elements have focus states applied.
1:06
Was your approach to solving this
practice different from mine?
1:10
If so, that's perfectly fine,
1:14
there are always multiple ways to
reach the same outcome when coding.
1:16
I hope you feel better about
implementing web accessibility features.
1:21
I'll see you next time.
1:25
Until then, happy coding.
1:27
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