Preview
Video Player
00:00
00:00
Introducing the Practice
3:17This video introduces the challenge relating to "Selecting DOM Elements" that you'll be working to complete.
[MUSIC]
0:00
Hey everyone, Guil here.
0:04
It's time for some practice to help
make what you've learned stick, and
0:05
become a faster and better developer.
0:08
You're going to sharpen your
JavaScript skills by practicing
0:10
the basics of selecting DOM
elements with JavaScript.
0:13
This exercise is a follow-up to the
getting a handle on the DOM stage of our
0:16
Javascript and the DOM course.
0:20
So if you haven't watched that stage yet,
0:22
I suggest you watch it before
trying this challenge.
0:24
I've also added a link to
the stage in the teacher's notes.
0:27
So to make a web page
interactive with JavaScript,
0:30
you'll first grab a hold of the elements
you want the user to interact with.
0:33
This is called selection.
0:37
It's a way to identify an element for the
browser, so the browser can target it in
0:39
the document and make it available for
us to do something with it.
0:43
So JavaScript provides a number of methods
that let you select elements on a webpage.
0:47
To get started, go ahead and
launch the workspace with this video.
0:51
For this exercise, I included a webpage
setup using the Bootstrap framework.
0:55
So here, you'll see an HTML file,
images, and a JavaScript file.
0:59
You're going to write JavaScript
that selects some of these HTML
1:04
elements inside the file scripts.js.
1:08
Scripts.js has six comments with
instructions about the methods you'll use
1:11
to select the elements.
1:16
Now in the first two stages of the
JavaScript and the DOM course, you saw how
1:18
you're able to set inline styles on
an element using the style property.
1:22
So below some of the comments,
1:28
I included a line of code that applies
a style to the selected element.
1:30
Now normally,
you'll apply styles with CSS.
1:35
But for this exercise,
we're applying the inline style so
1:38
that you can immediately see if your code
worked and selected the correct elements.
1:40
All right, so first up,
1:45
you're going to use a method to
select the element with the ID about.
1:47
And to apply this border style here,
1:52
you'll need to assign the returned
element to the about variable.
1:55
Then, you'll select all the h2
elements in the document, and
2:00
using JavaScript, set the color of
the h2 elements to a different color.
2:05
It can be the color of your choice.
2:10
After that, you'll select all
elements with the class card.
2:12
Then with JavaScript, set their background
color to the color of your choice.
2:17
In step four, you'll select only
the first ul in the document and
2:22
store it in a variable named ul.
2:28
This is going to set its border style,
as you can see here, to 2 pixels,
2:31
solid indigo.
2:36
And step five asks you to select
2:38
only the second element in
the document with the class container.
2:40
And if you assign the return element
to a variable named container,
2:45
it will set its background
color to royalblue.
2:49
And finally, you'll select only the anchor
elements that have a title attribute.
2:52
And you'll set their color value
to the color of your choice.
2:59
So when you preview the HTML file
of this workspace in the browser,
3:04
you should see the selected elements
with the color, background, and
3:08
border styles applied via JavaScript.
3:11
So good luck, and in the next video,
I'll show you my solutions.
3:13